/* ============================================================================
   Nono Ban — mobile layer (≤ 820px)

   The page is built with inline styles, so every override here needs
   !important. Selectors lean on the inline-style substrings, which are
   deterministic in this static build.

   Contents:
     1. Shell — header, safe areas
     2. Bottom navigation bar (icons) + "More" sheet
     3. Book — floating action button
     4. Hero + search bar
     5. Grid de-columning
     6. Typography + rhythm
     7. Odds and ends
   ========================================================================= */

@media (max-width: 820px) {

  /* ---------- 1. Shell --------------------------------------------------- */

  /* Header keeps only the wordmark and the language switch.
     backdrop-filter is dropped: it turns the header into a containing block
     for position:fixed, which would trap the bottom bar inside it. */
  header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: color-mix(in srgb, #f5ead8 97%, #ffffff) !important;
  }
  header > div {
    width: min(1280px, 100% - 28px) !important;
    min-height: 0 !important;
    padding: 8px 0 !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  header > div > button:first-child img { height: 32px !important; }

  header [data-header-actions] { gap: 0 !important; margin-left: auto !important; }
  header [data-header-actions] [data-bar-phone] { display: none !important; }

  /* language pill: tighter, still tappable */
  header [data-header-actions] > div:first-child { padding: 1px !important; }
  header [data-header-actions] > div:first-child button {
    padding: 6px 9px !important;
    font-size: 12px !important;
    min-height: 30px;
  }

  /* narrower page gutters than the desktop 48px */
  [style*="100% - 48px"] { width: min(1280px, 100% - 28px) !important; }
  [style*="100% - 40px"] { width: min(1280px, 100% - 28px) !important; }

  /* ---------- 2. Bottom navigation -------------------------------------- */

  nav[data-nav="main"] {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 90;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, #f5ead8 92%, #ffffff);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-divider);
    box-shadow: 0 -6px 22px color-mix(in srgb, #201e1d 12%, transparent);
  }

  /* every nav button becomes an icon + label stack */
  nav[data-nav="main"] > button {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    border: 0 !important;
    background: none !important;
    margin: 0 !important;
    padding: 7px 2px 5px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: color-mix(in srgb, #201e1d 62%, transparent) !important;
    -webkit-tap-highlight-color: transparent;
  }
  nav[data-nav="main"] > button::before {
    content: "";
    width: 23px; height: 23px;
    flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 23px 23px; mask-size: 23px 23px;
  }

  /* the four kept in the bar: Stay · Restaurant · Spa · Gallery */
  nav[data-nav="main"] > button:nth-child(1)::before {
    -webkit-mask-image: var(--ic-bed); mask-image: var(--ic-bed);
  }
  nav[data-nav="main"] > button:nth-child(2)::before {
    -webkit-mask-image: var(--ic-dine); mask-image: var(--ic-dine);
  }
  nav[data-nav="main"] > button:nth-child(3)::before {
    -webkit-mask-image: var(--ic-spa); mask-image: var(--ic-spa);
  }
  nav[data-nav="main"] > button:nth-child(5)::before {
    -webkit-mask-image: var(--ic-gallery); mask-image: var(--ic-gallery);
  }

  /* Weddings, Story and Location move into the More sheet */
  nav[data-nav="main"] > button:nth-child(4),
  nav[data-nav="main"] > button:nth-child(6),
  nav[data-nav="main"] > button:nth-child(7) { display: none !important; }

  /* Active tab. The runtime rewrites the button's inline style on navigation,
     swapping in the accent tokens — so the inline string is the source of
     truth and no JavaScript bookkeeping is needed. */
  nav[data-nav="main"] > button[style*="--color-accent-700"] {
    color: var(--color-accent) !important;
  }
  nav[data-nav="main"] > button[style*="--color-accent-700"]::after {
    content: "";
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 22px; height: 2.5px; border-radius: 0 0 3px 3px;
    background: var(--color-accent);
  }

  /* injected "More" trigger */
  .nb-more {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 3px;
    border: 0; background: none; cursor: pointer;
    padding: 7px 2px 5px;
    font-family: var(--font-body);
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.15;
    color: color-mix(in srgb, #201e1d 62%, transparent);
    -webkit-tap-highlight-color: transparent;
  }
  .nb-more::before {
    content: "";
    width: 23px; height: 23px; flex: none;
    background-color: currentColor;
    -webkit-mask-image: var(--ic-more); mask-image: var(--ic-more);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 23px 23px; mask-size: 23px 23px;
  }
  .nb-more[aria-expanded="true"] { color: var(--color-accent); }

  /* ---------- More sheet ------------------------------------------------- */

  .nb-scrim {
    position: fixed; inset: 0; z-index: 95;
    background: color-mix(in srgb, #201e1d 42%, transparent);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .nb-scrim.open { opacity: 1; pointer-events: auto; }

  .nb-sheet {
    position: fixed; left: 0; right: 0; z-index: 96;
    bottom: 0;
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    background: var(--color-neutral-100);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 40px color-mix(in srgb, #201e1d 26%, transparent);
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    max-height: 78vh; overflow-y: auto;
  }
  .nb-sheet.open { transform: translateY(0); }
  .nb-sheet__grip {
    width: 40px; height: 4px; border-radius: 99px; margin: 4px auto 12px;
    background: color-mix(in srgb, #201e1d 20%, transparent);
  }
  .nb-sheet__item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; border: 0; background: none; cursor: pointer;
    padding: 14px 4px; text-align: left;
    font-family: var(--font-body); font-size: 16px; font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-divider);
    text-decoration: none;
  }
  .nb-sheet__item:last-of-type { border-bottom: 0; }
  a.nb-sheet__item { color: var(--color-text); }   /* the tel row, not a link colour */
  .nb-sheet__item::before {
    content: ""; width: 22px; height: 22px; flex: none;
    background-color: var(--color-accent);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
  }
  .nb-sheet__item[data-ic="rings"]::before { -webkit-mask-image: var(--ic-rings); mask-image: var(--ic-rings); }
  .nb-sheet__item[data-ic="book"]::before  { -webkit-mask-image: var(--ic-book);  mask-image: var(--ic-book); }
  .nb-sheet__item[data-ic="pin"]::before   { -webkit-mask-image: var(--ic-pin);   mask-image: var(--ic-pin); }
  .nb-sheet__item[data-ic="phone"]::before { -webkit-mask-image: var(--ic-phone); mask-image: var(--ic-phone); }

  /* ---------- 3. Book — floating action button --------------------------- */

  [data-header-book] {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    z-index: 88;
    padding: 13px 24px !important;
    font-size: 14.5px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-accent) 46%, transparent) !important;
    transition: opacity .2s ease, transform .2s ease;
  }
  /* While the hero's own search card is on screen it already carries the
     primary call to action, so the floating one steps out of the way rather
     than sitting on top of the date fields. */
  [data-header-book].nb-hide {
    opacity: 0 !important;
    transform: translateY(12px) scale(.94);
    pointer-events: none !important;
  }

  /* keep content clear of the fixed bar */
  body { padding-bottom: 64px !important; }

  /* ---------- 4. Hero + search bar --------------------------------------- */

  /* The runtime rewrites inline styles in normalised form — "minmax(140px, 1fr)"
     rather than the source's "minmax(140px,1fr)". Selectors below therefore key
     off the shortest fragment that is unique and free of that whitespace. */

  /* the search card overlaps the hero by -64px on desktop; too tight here */
  [style*="-64px auto 0"] { margin: -26px auto 0 !important; }

  /* search bar: two dates on one row, guests and the CTA full width */
  [style*="minmax(230px"] {
    grid-template-columns: 1fr 1fr !important;
    padding: 8px !important;
    gap: 2px !important;
    border-radius: var(--radius-md) !important;
  }
  [style*="minmax(230px"] > *:nth-child(1),
  [style*="minmax(230px"] > *:nth-child(2) { padding: 11px 12px !important; }

  /* guests block spans the full width and gains a divider above */
  [style*="minmax(230px"] > *:nth-child(3) {
    grid-column: 1 / -1 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--color-divider) !important;
    padding: 12px !important;
    min-width: 0 !important;
  }
  [style*="minmax(230px"] > *:nth-child(3) > div {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  /* the CTA becomes a full-width button */
  [style*="minmax(230px"] > *:nth-child(4) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 15px 20px !important;
    border-radius: var(--radius-md) !important;
    margin-top: 2px;
  }

  /* the compact search bars used on the sub pages */
  [style*="1fr) 400px"],
  [style*="1fr) 380px"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* ---------- 5. Grid de-columning --------------------------------------- */

  /* two-column layouts whose minimums exceed a phone */
  [style*="minmax(340px"],
  [style*="minmax(380px"],
  [style*="minmax(360px"],
  [style*="minmax(320px, 1.4fr)"], [style*="minmax(320px,1.4fr)"],
  [style*="minmax(300px, 1.1fr)"], [style*="minmax(300px,1.1fr)"],
  [style*="minmax(0, 1.62fr)"],    [style*="minmax(0,1.62fr)"],
  [style*="columns: 2fr 1fr"],     [style*="columns:2fr 1fr"],
  [style*="1.5fr 1fr 1fr 1fr 1fr"],
  [style*="repeat(3, auto)"],      [style*="repeat(3,auto)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* image mosaics: keep two up, but let them shrink */
  [style*="auto-fill, minmax(230px"], [style*="auto-fill,minmax(230px"],
  [style*="auto-fill, minmax(250px"], [style*="auto-fill,minmax(250px"],
  [style*="auto-fill, minmax(210px"], [style*="auto-fill,minmax(210px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 132px !important;
  }

  /* three-up feature rows drop to two */
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* anything still declaring two fractions gets breathing room */
  [style*="columns: 1fr 1fr"], [style*="columns:1fr 1fr"] { gap: 10px !important; }

  /* grid and flex children may not shrink below their content without this */
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* ---------- 6. Typography + rhythm ------------------------------------- */

  h1 { font-size: 34px !important; line-height: 1.08 !important; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 21px !important; }
  h4 { font-size: 18px !important; }

  /* inline display sizes used across the hero and section heads */
  [style*="font-size:64px"] { font-size: 34px !important; }
  [style*="font-size:60px"] { font-size: 33px !important; }
  [style*="font-size:56px"] { font-size: 32px !important; }
  [style*="font-size:52px"] { font-size: 31px !important; }
  [style*="font-size:48px"] { font-size: 30px !important; }
  [style*="font-size:44px"] { font-size: 28px !important; }
  [style*="font-size:42px"] { font-size: 27px !important; }
  [style*="font-size:40px"] { font-size: 26px !important; }
  [style*="font-size:38px"] { font-size: 25px !important; }
  [style*="font-size:36px"] { font-size: 24px !important; }
  [style*="font-size:34px"] { font-size: 23px !important; }
  [style*="font-size:32px"] { font-size: 23px !important; }
  [style*="font-size:30px"] { font-size: 22px !important; }
  [style*="font-size:28px"] { font-size: 21px !important; }
  [style*="font-size:26px"] { font-size: 20px !important; }

  /* generous desktop spacing compressed */
  [style*="padding: 96px"], [style*="padding:96px"] { padding: 46px 0 !important; }
  [style*="padding: 80px"], [style*="padding:80px"] { padding: 40px 0 !important; }
  [style*="padding-bottom: 112px"], [style*="padding-bottom:112px"] { padding-bottom: 56px !important; }
  [style*="padding-bottom: 100px"], [style*="padding-bottom:100px"] { padding-bottom: 52px !important; }
  [style*="64px auto 0"]:not([style*="-64px"]) { margin: 34px auto 0 !important; }
  [style*="56px auto 0"] { margin: 30px auto 0 !important; }

  /* ---------- 7. Odds and ends ------------------------------------------- */

  /* fixed-width blocks that would push the page sideways */
  [style*="width:620px"] { width: 100% !important; }
  [style*="min-width:240px"] { min-width: 0 !important; }

  /* horizontal rails scroll instead of overflowing the document */
  [style*="display:flex"][style*="overflow-x:auto"] { max-width: 100% !important; }

  /* tables and long words */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* the calendar keeps its seven columns but shrinks to fit */
  [style*="repeat(7, 1fr)"] { gap: 2px !important; }
}

/* ----------------------------------------------------------------------------
   Icon set — inline SVG masks so they take the current text colour.
   Declared outside the media query: custom properties do not need gating.
   ------------------------------------------------------------------------- */
:root {
  --ic-bed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-5.5A2.5 2.5 0 0 1 5.5 10h13a2.5 2.5 0 0 1 2.5 2.5V18'/%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M3 18v2.5M21 18v2.5'/%3E%3Cpath d='M7 10V7.6A1.6 1.6 0 0 1 8.6 6h6.8A1.6 1.6 0 0 1 17 7.6V10'/%3E%3C/svg%3E");
  --ic-dine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3v5.5a2.5 2.5 0 0 0 5 0V3'/%3E%3Cpath d='M9 11V21'/%3E%3Cpath d='M17.2 3c-1.5 1.9-2.2 3.9-2.2 6 0 1.5.7 2.2 2.2 2.2V21'/%3E%3C/svg%3E");
  --ic-spa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4s6.2 6.3 6.2 10.4a6.2 6.2 0 0 1-12.4 0C5.8 9.7 12 3.4 12 3.4Z'/%3E%3Cpath d='M12 17.6a3.6 3.6 0 0 1-3.4-2.6'/%3E%3C/svg%3E");
  --ic-gallery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.4'/%3E%3Cpath d='M3.8 16.2l4.4-4.2 3.3 3.2 3-2.8 5.2 4.8'/%3E%3Ccircle cx='9' cy='9.6' r='1.3'/%3E%3C/svg%3E");
  --ic-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5.2' cy='12' r='1.75'/%3E%3Ccircle cx='12' cy='12' r='1.75'/%3E%3Ccircle cx='18.8' cy='12' r='1.75'/%3E%3C/svg%3E");
  --ic-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='14.5' r='5.3'/%3E%3Ccircle cx='15' cy='14.5' r='5.3'/%3E%3Cpath d='M12 4.6l2.4 3.1h-4.8z'/%3E%3C/svg%3E");
  --ic-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.4C10.4 5.9 8 5.4 4 5.4v13c4 0 6.4.5 8 2 1.6-1.5 4-2 8-2v-13c-4 0-6.4.5-8 2Z'/%3E%3Cpath d='M12 7.4V20.4'/%3E%3C/svg%3E");
  --ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.4s7-6.4 7-11.4a7 7 0 1 0-14 0c0 5 7 11.4 7 11.4Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.6h3.1l1.5 3.9-2 1.5a12.2 12.2 0 0 0 6 6l1.5-2 3.9 1.5v3.1a2 2 0 0 1-2.1 2A16.6 16.6 0 0 1 4.4 5.7a2 2 0 0 1 2-2.1Z'/%3E%3C/svg%3E");
}