/* ==========================================================================
   Saveurs et Table — Home Page Styles
   Culinary Carousel Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Base
   -------------------------------------------------------------------------- */
.home-hero,
.home-cuisine,
.home-carte,
.home-signature,
.home-interieur,
.home-casino,
.home-poker,
.home-roulette,
.home-blackjack,
.home-diner,
.home-galerie,
.home-contact {
  padding-block: var(--space-7);
}

.home-cuisine,
.home-signature,
.home-roulette {
  background-color: rgba(168, 198, 134, 0.12);
}

.home-casino,
.home-diner {
  background-color: var(--color-bordeaux);
  color: var(--color-white);
}

.home-casino h2,
.home-casino h3,
.home-diner h2,
.home-diner h3 {
  color: var(--color-white);
}

.home-casino .overline,
.home-diner .overline {
  color: var(--color-secondary);
}

.home-casino p,
.home-diner p {
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.home-hero {
  background-color: var(--color-ivory);
  overflow: hidden;
}

.home-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: center;
}

.home-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.home-hero__content h1 {
  max-width: 12ch;
  margin-block-end: 0;
}

.home-hero__lead {
  max-width: 60ch;
  margin-block-end: 0;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.home-hero__actions .btn {
  min-width: 200px;
}

.home-hero__media {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.home-hero__media img {
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(42, 157, 143, 0.15), 0 0 0 16px rgba(244, 162, 97, 0.12);
  transition: transform var(--transition-slow);
}

.home-hero__media img:hover {
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   Notre Cuisine
   -------------------------------------------------------------------------- */
.home-cuisine__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--space-6);
  align-items: center;
}

.home-cuisine__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  text-align: center;
}

.home-cuisine__text h2,
.home-cuisine__text p {
  max-width: 70ch;
  margin-inline: auto;
}

.home-cuisine__text h2 {
  margin-block-end: 0;
}

.home-cuisine__text p {
  margin-block-end: 0;
}

.home-cuisine__medallion {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.home-cuisine__medallion img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform var(--transition-slow);
}

.home-cuisine__medallion img:hover {
  transform: rotate(6deg);
}

/* --------------------------------------------------------------------------
   La Carte
   -------------------------------------------------------------------------- */
.home-carte {
  background-color: var(--color-white);
}

.home-carte__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.home-carte__header h2 {
  margin-block-end: 0;
}

.home-carte__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-carte__card {
  background-color: var(--color-surface);
  border: var(--surface-card-border);
  border-radius: var(--radius-medium);
  padding: var(--surface-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.home-carte__card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.home-carte__card h3 {
  margin-block-end: 0;
}

.home-carte__card p {
  max-width: 50ch;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Créations Signature
   -------------------------------------------------------------------------- */
.home-signature__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.home-signature__header h2 {
  margin-block-end: 0;
}

.home-signature__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-signature__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.home-signature__item--reverse {
  direction: rtl;
}

.home-signature__item--reverse > * {
  direction: ltr;
}

.home-signature__media {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.home-signature__media img {
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  transition: transform var(--transition-slow);
}

.home-signature__media img:hover {
  transform: scale(1.03);
}

.home-signature__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.home-signature__content h3 {
  margin-block-end: 0;
}

.home-signature__content p {
  max-width: 60ch;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Intérieur & Ambiance
   -------------------------------------------------------------------------- */
.home-interieur {
  position: relative;
  padding-block: 0;
  overflow: hidden;
}

.home-interieur__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-interieur__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  will-change: transform;
}

.home-interieur__overlay {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(107, 45, 58, 0.75) 0%, rgba(107, 45, 58, 0.85) 100%);
  padding-block: var(--space-8);
}

.home-interieur__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}

.home-interieur__content h2,
.home-interieur__content p {
  color: var(--color-white);
}

.home-interieur__content h2 {
  margin-block-end: 0;
}

.home-interieur__content p {
  max-width: 70ch;
  margin-block-end: 0;
}

.home-interieur__content .overline {
  color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   Casino Hors Ligne
   -------------------------------------------------------------------------- */
.home-casino__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.home-casino__header h2 {
  margin-block-end: 0;
}

.home-casino__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-casino__card {
  background-color: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-medium);
  padding: var(--surface-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.home-casino__card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.home-casino__card h3 {
  color: var(--color-text-heading);
  margin-block-end: 0;
}

.home-casino__card p {
  color: var(--color-text);
  max-width: 50ch;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Poker
   -------------------------------------------------------------------------- */
.home-poker__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
}

.home-poker__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.home-poker__content h2 {
  margin-block-end: 0;
}

.home-poker__content p {
  max-width: 60ch;
  margin-block-end: 0;
}

.home-poker__media {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.home-poker__media img {
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  transition: transform var(--transition-slow);
}

.home-poker__media img:hover {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Roulette
   -------------------------------------------------------------------------- */
.home-roulette__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: center;
}

.home-roulette__media {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.home-roulette__media img {
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  transition: transform var(--transition-slow);
}

.home-roulette__media img:hover {
  transform: rotate(4deg);
}

.home-roulette__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.home-roulette__content h2 {
  margin-block-end: 0;
}

.home-roulette__content p {
  max-width: 60ch;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Blackjack
   -------------------------------------------------------------------------- */
.home-blackjack__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
}

.home-blackjack__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.home-blackjack__content h2 {
  margin-block-end: 0;
}

.home-blackjack__content p {
  max-width: 60ch;
  margin-block-end: 0;
}

.home-blackjack__media {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.home-blackjack__media img {
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  transition: filter var(--transition-base), transform var(--transition-base);
}

.home-blackjack__media img:hover {
  filter: grayscale(1);
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   Dîner & Casino
   -------------------------------------------------------------------------- */
.home-diner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.home-diner__medallion {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.home-diner__medallion img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

.home-diner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
}

.home-diner__content h2 {
  margin-block-end: 0;
}

.home-diner__content p {
  max-width: 70ch;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */
.home-galerie {
  background-color: var(--color-white);
}

.home-galerie__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.home-galerie__header h2 {
  margin-block-end: 0;
}

.home-galerie__header p {
  max-width: 50ch;
  margin-block-end: 0;
}

.home-galerie__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-galerie__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin-block-end: 0;
}

.home-galerie__link {
  display: block;
  border-radius: var(--radius-medium);
  overflow: hidden;
  min-width: 0;
}

.home-galerie__link img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-medium);
  transition: transform var(--transition-slow);
}

.home-galerie__link:hover img {
  transform: scale(1.04);
}

.home-galerie__item figcaption {
  max-width: 50ch;
}

/* --------------------------------------------------------------------------
   Réservation & Contact
   -------------------------------------------------------------------------- */
.home-contact {
  background-color: var(--color-ivory);
}

.home-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: start;
}

.home-contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.home-contact__form h2 {
  margin-block-end: 0;
}

.home-contact__form-element {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.home-contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.home-contact__field--full {
  grid-column: span 2;
}

.home-contact__submit {
  grid-column: span 2;
  display: flex;
  justify-content: flex-start;
}

.home-contact__confirmation {
  grid-column: span 2;
  margin-block-end: 0;
  min-height: 1.5em;
}

.home-contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  background-color: var(--color-white);
  border: var(--surface-card-border);
  border-radius: var(--radius-medium);
  padding: var(--surface-card-padding);
}

.home-contact__details h3 {
  margin-block-end: 0;
}

.home-contact__details p {
  max-width: 60ch;
  margin-block-end: 0;
}

.home-contact__details a {
  color: var(--color-primary);
}

.home-contact__details a:hover {
  color: var(--color-primary-hover);
}

/* --------------------------------------------------------------------------
   Responsive — Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
  }

  .home-hero__media img {
    width: min(100%, 400px);
  }

  .home-cuisine__inner {
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: var(--space-5);
  }

  .home-cuisine__medallion img {
    width: 160px;
    height: 160px;
  }

  .home-carte__grid,
  .home-casino__grid,
  .home-galerie__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .home-signature__item {
    gap: var(--space-5);
  }

  .home-poker__inner,
  .home-roulette__inner,
  .home-blackjack__inner {
    gap: var(--space-5);
  }

  .home-poker__media img,
  .home-roulette__media img,
  .home-blackjack__media img {
    width: min(100%, 320px);
  }

  .home-contact__inner {
    gap: var(--space-5);
  }
}

@media (max-width: 900px) {
  .home-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .home-hero__content {
    align-items: flex-start;
  }

  .home-hero__media {
    order: -1;
  }

  .home-hero__media img {
    width: min(100%, 420px);
  }

  .home-cuisine__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .home-cuisine__medallion {
    order: -1;
  }

  .home-cuisine__medallion img {
    width: 150px;
    height: 150px;
  }

  .home-signature__item {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .home-signature__item--reverse {
    direction: ltr;
  }

  .home-signature__media img {
    width: min(100%, 360px);
  }

  .home-poker__inner,
  .home-roulette__inner,
  .home-blackjack__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .home-poker__media,
  .home-roulette__media,
  .home-blackjack__media {
    order: -1;
  }

  .home-poker__media img,
  .home-roulette__media img,
  .home-blackjack__media img {
    width: min(100%, 320px);
  }

  .home-contact__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .home-hero,
  .home-cuisine,
  .home-carte,
  .home-signature,
  .home-interieur,
  .home-casino,
  .home-poker,
  .home-roulette,
  .home-blackjack,
  .home-diner,
  .home-galerie,
  .home-contact {
    padding-block: var(--space-6);
  }

  .home-hero__content {
    gap: var(--space-3);
  }

  .home-hero__content h1 {
    max-width: 100%;
  }

  .home-hero__lead {
    max-width: 100%;
  }

  .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .home-hero__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .home-hero__media img {
    width: min(100%, 340px);
  }

  .home-cuisine__text h2,
  .home-cuisine__text p {
    max-width: 100%;
  }

  .home-carte__grid,
  .home-casino__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .home-carte__card p,
  .home-casino__card p {
    max-width: 100%;
  }

  .home-signature__content p {
    max-width: 100%;
  }

  .home-interieur__overlay {
    padding-block: var(--space-6);
  }

  .home-interieur__content {
    text-align: left;
    align-items: flex-start;
  }

  .home-interieur__content p {
    max-width: 100%;
  }

  .home-diner__content p {
    max-width: 100%;
  }

  .home-galerie__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .home-contact__form-element {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .home-contact__field--full,
  .home-contact__submit,
  .home-contact__confirmation {
    grid-column: span 1;
  }

  .home-contact__details p {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .home-hero,
  .home-cuisine,
  .home-carte,
  .home-signature,
  .home-interieur,
  .home-casino,
  .home-poker,
  .home-roulette,
  .home-blackjack,
  .home-diner,
  .home-galerie,
  .home-contact {
    padding-block: var(--space-5);
  }

  .home-hero__media img {
    width: min(100%, 280px);
  }

  .home-cuisine__medallion img {
    width: 130px;
    height: 130px;
  }

  .home-signature__media img {
    width: min(100%, 280px);
  }

  .home-poker__media img,
  .home-roulette__media img,
  .home-blackjack__media img {
    width: min(100%, 280px);
  }

  .home-diner__medallion img {
    width: 130px;
    height: 130px;
  }

  .home-galerie__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero__media img,
  .home-cuisine__medallion img,
  .home-signature__media img,
  .home-poker__media img,
  .home-roulette__media img,
  .home-blackjack__media img,
  .home-galerie__link img {
    transition: none;
  }

  .home-interieur__media img {
    will-change: auto;
  }
}