/* bistrot.css — tema dark+gold, pulito e sofisticato */
:root{
  --bg:#0d0d0d; --text:#fff; --muted:#c7c7c7;
  --brand:#eed149; --brand-2:#6d5f21;
  --card:#121212; --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4);
  --radius:18px;
}

.bistrot-page { padding: clamp(16px, 3vw, 28px); }
.card{background:var(--card); border:1px solid #1f1f1f; border-radius:var(--radius); box-shadow:var(--shadow);}

/* HERO */
.hero-bistrot{ position:relative; border-radius:var(--radius); overflow:hidden; isolation:isolate; }
.hero-bg img{ width:100%; height: min(70vh, 560px); object-fit: cover; display:block; }
.hero-inner{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center; padding:24px;
  z-index:2;             /* porta i testi e pulsanti sopra */
}

.hero-grad{ 
  position:absolute; 
  inset:0; 
  background:
    radial-gradient(800px 300px at 20% -10%, rgba(238,209,73,.18), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.82) 70%, rgba(0,0,0,.93));
  z-index:1;
}


.hero-title{ font-family:"Archivo Black","Titillium Web",sans-serif; font-size: clamp(2rem, 1rem + 3vw, 3.2rem); margin:0; }
.hero-sub {
  color: var(--brand);
  font-weight: 800;
  letter-spacing: .3px;
  margin: .35rem 0 .2rem;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
}
.hero-mini{  max-width: 900px; margin: 0 auto .8rem; }
.hero-cta{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.btn{ border-radius:999px; padding:.6rem 1rem; font-weight:800; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.btn-primary{ background:var(--brand); color:#000; }
.btn-outline{ background:transparent; border-color:var(--brand); color:var(--brand); }
.btn:hover{ filter:brightness(1.03); transform: translateY(-1px); }

/* INTRO */
.intro{ margin: 26px 0; }
.intro-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:center; overflow:hidden; }
.intro-text p{ font-size:1.05rem; }
.intro-media img{ width:100%; height:100%; object-fit:cover; border-radius: calc(var(--radius) - 8px); }
.intro-grid.card{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:center;
  overflow:hidden;
  padding: clamp(16px, 2vw, 24px);
}


/* PILLARS */
.pillars{ margin: 26px 0; }
.pillars h2{ margin: 0 0 10px; }
/* PILLARS */
.pillars-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}



/* Mobile */
@media (max-width: 600px){
  .pillars-grid{
    grid-template-columns: 1fr;
  }
}

.pillar{ text-align:center; padding: 18px; }
.pillar i{ font-size: 1.6rem; color: var(--brand); }
.pillar h3{ margin:.4rem 0; }
.pillar p{ color: var(--muted);}

/* LAB */
.lab{ margin: 26px 0; }
.lab-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:14px; align-items:center; }
.lab-media img{ width:100%; height:100%; object-fit:cover; border-radius: calc(var(--radius) - 8px); }
.checks{ list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.4rem; }
.checks i{ color:var(--brand); margin-right:.35rem; }
.lab-grid.card{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:14px;
  align-items:center;
  padding: clamp(16px, 2vw, 24px);   /* 👈 padding interno */
}


/* GALLERY STRIP */
.gallery{ margin: 22px 0; }
.gallery-strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  grid-auto-columns: initial;   /* annulla override precedenti */
  grid-auto-flow: row;
}
.gallery-strip img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:14px;
}

@media (max-width: 820px){
  .gallery-strip{
    grid-template-columns: 1fr;
  }
}

/* CTA */
.cta{ padding: 18px; text-align:center; }
.cta h2{ margin:0 0 .4rem; }
.cta p{ color:var(--muted); margin:0 0 .6rem; }

/* ==== Reviews carousel (dark + gold) ==== */
.reviews{ padding:18px; overflow:hidden ; margin-top: 25px;}
.reviews-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.reviews h2{ margin:0 }
.rating-pill{ color:#000; background:var(--brand); border-radius:999px; padding:.35rem .7rem; font-weight:800; display:inline-flex; align-items:center; gap:.4rem }

.reviews-viewport{ overflow:hidden }
.reviews-track{ display:flex; gap:12px; will-change:transform; transition: transform .45s ease }
.review-card{
  flex: 0 0 calc(33.333% - 8px);
  background: #0f0f0f; border:1px solid #1f1f1f; border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:.5rem; min-height:180px
}
.review-head{ display:flex; align-items:center; gap:.6rem }
.avatar{
  width:36px; height:36px; border-radius:999px; background:#1f1f1f; display:grid; place-items:center; font-weight:800; color:#bdbdbd
}
.stars{ display:inline-flex; gap:2px; line-height:1 }
.stars svg{ width:16px; height:16px }
.review-name{ font-weight:700 }
.review-text{ color:var(--muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical }
.review-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; color:#9ca3af; font-size:.9rem }

.reviews-nav{ display:flex; gap:8px; justify-content:center; margin-top:10px }
.rv-btn{ background:transparent; border:1px solid #2a2a2a; color:#fff; border-radius:999px; width:38px; height:38px; display:grid; place-items:center; cursor:pointer }
.rv-btn:hover{ border-color:var(--brand); color:var(--brand) }

.reviews-dots{ display:flex; gap:6px; justify-content:center; margin-top:8px }
.reviews-dots button{
  width:8px; height:8px; border-radius:999px; background:#2a2a2a; border:none; padding:0; cursor:pointer
}
.reviews-dots button[aria-selected="true"]{ background:var(--brand) }

/* Tablet */
@media (max-width: 980px){
  .review-card{ flex-basis: calc(50% - 6px) }
}

/* Mobile */
@media (max-width: 600px){
  .review-card{ flex-basis: 100% }
}


/* Responsive */
@media (max-width: 980px){
  .intro-grid{ grid-template-columns: 1fr; }
  .lab-grid{ grid-template-columns: 1fr; }
  .gallery-strip{ grid-auto-columns: initial; }
}
@media (max-width: 600px){
  .btn{ padding:.5rem .9rem; }
  .gallery-strip{ grid-auto-columns: initial; }
}

/* === Fix layout mobile per intro-grid e lab-grid === */
@media (max-width: 700px){
  .intro-grid.card,
  .lab-grid.card{
    grid-template-columns: 1fr;          /* una colonna */
    grid-template-areas:
      "media"
      "text";                             /* immagine sopra, testo sotto */
    gap: 10px;
    padding: clamp(14px, 2vw, 18px);
  }

  .intro-media, .lab-media{ grid-area: media; }
  .intro-text,  .lab-text { grid-area: text; }

  /* L’immagine non si schiaccia più: prende tutta la larghezza con altezza proporzionata */
  .intro-media img,
  .lab-media img{
    width: 100%;
    height: auto;                         /* annulla height:100% del desktop */
    aspect-ratio: 16 / 9;                 /* look pulito e coerente */
    object-fit: cover;
    border-radius: calc(var(--radius) - 8px);
  }
}

/* === Autumn promo === */
.autumn-promo{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 26px);
  background:
    radial-gradient(1200px 280px at 8% -10%, rgba(160,120,60,.18), transparent 60%),
    linear-gradient(135deg, #1a120b 0%, #1b1510 35%, #221911 100%);
  border:1px solid #2a2218;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-top: 25px;
}

.autumn-promo .ap-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#d9c08a; font-weight:800; letter-spacing:.3px;
  text-transform:uppercase; font-size:.85rem;
}

.autumn-promo h2{
  margin:.2rem 0 .3rem;
  font-family:"Archivo Black","Titillium Web",sans-serif;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
}

.autumn-promo p{ margin:0; color:var(--muted); }

.autumn-promo .ap-cta{ display:flex; gap:.6rem; flex-wrap:wrap; justify-self:end; }
.autumn-promo .btn{ border-color:#927447; }
.autumn-promo .btn-primary{
  background: linear-gradient(180deg,#d7b56a,#b28b46);
  color:#0d0d0d;
}
.autumn-promo .btn-outline{
  border-color:#b28b46; color:#d7b56a;
}

.autumn-promo .ap-date{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#2a2218; border:1px solid #3a2f20; color:#f0ddaa;
  padding:.35rem .65rem; border-radius:999px; font-weight:800; font-size:.9rem;
  margin-top: 5px;
}

.autumn-promo::after{
  /* decorazione foglie molto soft */
  content:"";
  position:absolute; inset:-30% -10% auto auto; height:260px; width:420px;
  opacity:.12; pointer-events:none;
  background:
    radial-gradient(closest-side, #8b5e34 0 60%, transparent 61%) 0 0/80px 80px,
    radial-gradient(closest-side, #6f4f28 0 60%, transparent 61%) 40px 40px/80px 80px;
  filter: blur(6px) saturate(95%);
}

@media (max-width: 820px){
  .autumn-promo{ grid-template-columns: 1fr; gap:10px; }
  .autumn-promo .ap-cta{ justify-self:start; }
}

/* === Fix rating-pill centrata su mobile === */
@media (max-width: 600px){
  /* il contenitore passa in colonna e centra tutto */
  .reviews.card .reviews-head{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* centra orizzontalmente gli elementi */
    justify-content: center !important;
    gap: 8px;                         /* piccolo respiro tra titolo e pill */
    text-align: center;               /* centra eventuale testo */
  }

  /* la pillola non si allarga e si centra sempre */
  .reviews.card .rating-pill{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;           /* impedisce width:100% ereditati */
    margin: 0 auto !important;        /* centra anche se il parent rimanesse in row */
    white-space: nowrap;              /* evita a capo interni */
  }
}

/* Centra la pill se il parent rimanesse per errore in row */
@media (max-width: 600px){
  .reviews.card .reviews-head{ justify-content: center !important; }
}