/* ═══════════════════════════════════════════════════
   MOBILE STYLES — JARD'OR
   Activated below 720px viewport
═══════════════════════════════════════════════════ */

/* Hide burger button and mobile menu by default (desktop) */
.m-burger { display: none !important; }
.m-menu   { display: none !important; }
.m-menu.open { display: flex !important; }

@media (max-width: 720px) {

  body { font-size: 14px; }
  .page { max-width: 100% !important; box-shadow: none !important; }

  /* ─── NAV ─── */
  nav {
    padding: 12px 18px !important;
    flex-wrap: nowrap !important;
  }
  /* Hide inline link list, show hamburger */
  nav > ul { display: none !important; }

  /* Logo: smaller, fixed width */
  nav > a > div:first-child { font-size: 14px !important; }
  nav > a > span { font-size: 6px !important; }

  /* Reservation button: pill, smaller */
  nav > a:last-child {
    padding: 7px 13px !important;
    font-size: 9px !important;
  }
  nav > a:last-child > span { display: none !important; }

  /* Hamburger button */
  .m-burger {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 1px solid rgba(201,164,74,0.3);
    width: 36px; height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
  }
  .m-burger span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--gold, #C9A44A);
  }

  /* Mobile menu overlay */
  .m-menu {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8,18,12,0.97);
    backdrop-filter: blur(16px);
    z-index: 200;
    display: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 60px 30px;
  }
  .m-menu.open { display: flex !important; }
  .m-menu a {
    color: var(--cream, #F0ECE4) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 16px !important;
    letter-spacing: 0.2em !important;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: color 0.2s;
  }
  .m-menu a.active { color: var(--gold, #C9A44A) !important; }
  .m-close {
    position: absolute;
    top: 18px; right: 18px;
    background: none;
    border: 1px solid rgba(201,164,74,0.35);
    color: var(--gold, #C9A44A);
    width: 36px; height: 36px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Cinzel', serif;
  }

  /* ─── HERO ─── */
  section[style*="min-height"], section.hero {
    padding: 40px 22px 50px !important;
    min-height: 380px !important;
  }
  h1 { font-size: 28px !important; line-height: 1.18 !important; }
  .hero-h1 { font-size: 28px !important; }
  .hero-sub, .s-sub { font-size: 12px !important; max-width: 100% !important; }
  .script { font-size: 20px !important; }
  .s-title { font-size: 24px !important; }

  /* ─── SECTIONS ─── */
  .sec { padding: 44px 22px !important; }

  /* ─── GRIDS → single col ─── */
  /* Generic 3-col & 2-col grids stack on mobile */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }
  /* Asymmetric grids */
  [style*="1.1fr 0.9fr"], [style*="0.9fr 1.1fr"],
  [style*="1.05fr 0.95fr"], [style*="1.4fr 1fr"],
  [style*="1fr 1.15fr"], [style*="1.2fr 1fr"],
  [style*="1.4fr 0.8fr 1fr"], [style*="1.2fr 0.85fr 1fr"],
  [style*="2fr 1fr 1fr"], [style*="1fr 2fr 1fr"], [style*="1fr 1fr 2fr"],
  [style*="100px 1fr"], [style*="130px 1fr"], [style*="180px 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Food/voucher card flex direction */
  [style*="180px 1fr auto"] > * { width: 100% !important; }

  /* ─── FOOD GRID (specialities) ─── */
  .food-grid { grid-template-columns: 1fr !important; }
  .sl-track .food-card { min-width: 100% !important; }
  /* Center middle featured card no longer needs lift on mobile */
  .food-card.featured { transform: none !important; }

  /* ─── EXPERIENCE GRID (hover expand) ─── */
  .exp-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 6px !important;
  }
  .exp-grid.h2, .exp-grid.h3 { grid-template-columns: 1fr !important; }
  .exp-photo { min-height: 180px; }

  /* ─── COUNTDOWN ─── */
  #countdown { gap: 12px !important; flex-wrap: wrap; }
  #countdown > div { min-width: auto !important; }
  #cd-days, #cd-hours, #cd-mins, #cd-secs { font-size: 24px !important; min-width: 36px !important; }

  /* ─── HEADER FLEX (article header, etc) ─── */
  div[style*="justify-content:space-between"][style*="align-items:flex-end"],
  div[style*="justify-content:space-between"][style*="align-items:flex-start"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* But not the nav */
  nav[style*="justify-content:space-between"] {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* ─── TABS overflow x-scroll ─── */
  div[style*="border-bottom:1px solid rgba(201,164,74,0.18)"] > div,
  div[style*="border-bottom:1px solid rgba(201,164,74,0.15)"] > div {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .stab, .mtab { font-size: 10.5px !important; padding: 10px 14px !important; }

  /* ─── TASTING MENU rows (Fine Dining) ─── */
  [style*="grid-template-columns:130px 1fr"],
  [style*="grid-template-columns:100px 1fr"] {
    grid-template-columns: 100px 1fr !important;
  }

  /* ─── MENU PAGE: 3-col panel becomes simple stack ─── */
  #panel-fd > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    display: block !important;
  }
  #panel-fd > div > div[style*="grid-column:1"][style*="grid-row"] {
    height: 200px !important;
    min-height: 200px !important;
  }
  #panel-fd > div > div:last-child[style*="background-image"]:not([style*="grid-column"]) {
    min-height: 200px !important;
  }
  #panel-fd > div > div[style*="padding:32px"],
  #panel-fd > div > div[style*="padding:0 28px"],
  #panel-fd > div > div[style*="padding:0 32px"] {
    padding: 20px 22px !important;
  }
  #panel-fd .mi-name { font-size: 12px !important; }
  #panel-fd .mi-desc { font-size: 11px !important; }

  /* Make 2-col menu within panels stack */
  #panel-fd div[style*="grid-template-columns:1fr 1fr"],
  #panel-veg div[style*="grid-template-columns:1fr 1fr"],
  #panel-drinks div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* ─── BUTTONS ─── */
  .btn-ol, .btn-gd {
    padding: 10px 18px !important;
    font-size: 9.5px !important;
  }

  /* CTA banner address: stack */
  div[style*="gap:44px"], div[style*="gap:40px"] {
    flex-direction: column;
    gap: 18px !important;
    align-items: center !important;
  }

  /* ─── FOOTER ─── */
  footer { padding: 40px 22px 24px !important; }
  footer > div:first-child {
    flex-direction: column;
    gap: 24px !important;
    align-items: flex-start !important;
  }
  footer > div[style*="grid-template-columns:1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  footer > div:last-child {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* ─── POPUP CAMPAIGN ─── */
  #campaign-modal {
    width: calc(100% - 32px) !important;
    max-width: 380px;
  }

  /* ─── FORM INPUTS full width ─── */
  input[type=text], input[type=email], input[type=tel], input[type=date],
  select, textarea {
    width: 100% !important;
    font-size: 14px !important;
  }

  /* ─── GALLERY: 2-col on mobile, not 3 ─── */
  div[style*="grid-template-columns:1fr 1fr 1fr"][style*="grid-template-rows"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ─── EXPERIENCE section reservation button ─── */
  /* (was overlapping in desktop) */

  /* ─── HIDE FEATURED CARD ELEVATION ─── */
  div[style*="transform:translateY(-16px)"] { transform: none !important; }

  /* ─── HERO RIGHT VOUCHER CARDS smaller ─── */
  section[style*="min-height:420px"] div[style*="width:200px"],
  section[style*="min-height:380px"] div[style*="width:185px"] {
    transform: scale(0.7);
    transform-origin: top right;
  }

  /* ─── HOW IT WORKS connecting line hide ─── */
  /* Most decorative shadows lighter for mobile perf */
  .page { transition: none; }
}

/* ─── Small phones < 380px ─── */
@media (max-width: 380px) {
  h1, .hero-h1 { font-size: 24px !important; }
  .s-title { font-size: 20px !important; }
  .sec { padding: 36px 18px !important; }
}