/* LAYOUT — grid, containers and the responsive patterns every component reuses.
   Mobile-first: the base rule is the 375px layout, media queries only scale up.
   Tailwind handoff: each class maps to one @layer components utility of the same name. */

/* ── Page shell ───────────────────────────────────────────────────────────── */
.sg-page{width:100%;min-width:var(--viewport-min)}
.sg-container{width:100%;max-width:calc(var(--container-max) + var(--page-inline) * 2);margin-inline:auto;padding-inline:var(--page-inline)}
.sg-container-detail{max-width:calc(var(--container-detail) + var(--page-inline) * 2)}
.sg-container-narrow{max-width:calc(var(--container-narrow) + var(--page-inline) * 2)}
.sg-container-bleed{padding-inline:0}
.sg-section{padding-block:var(--section-y)}
.sg-section-editorial{padding-block:var(--section-y-editorial)}

/* ── The grid: 4 / 8 / 12 ─────────────────────────────────────────────────── */
.sg-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gutter)}
.sg-col-full{grid-column:1 / -1}
/* Spans are declared per range so a component never needs a media query of its own. */
.sg-col-2,.sg-col-3,.sg-col-4,.sg-col-6,.sg-col-8,.sg-col-9{grid-column:1 / -1}
@media (min-width:768px){
.sg-col-2{grid-column:span 4}.sg-col-3{grid-column:span 4}.sg-col-4{grid-column:span 4}
.sg-col-6{grid-column:span 8}.sg-col-8{grid-column:span 8}.sg-col-9{grid-column:span 8}
}
@media (min-width:1024px){
.sg-col-2{grid-column:span 2}.sg-col-3{grid-column:span 3}.sg-col-4{grid-column:span 4}
.sg-col-6{grid-column:span 6}.sg-col-8{grid-column:span 8}.sg-col-9{grid-column:span 9}
}

/* ── Card grids. Mobile is always one column, full width. ─────────────────── */
.sg-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3) var(--gutter-card)}
@media (min-width:600px){.sg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.sg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.sg-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sg-cards-2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3) var(--gutter-card)}
@media (min-width:768px){.sg-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sg-cards-3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3) var(--gutter-card)}
@media (min-width:600px){.sg-cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.sg-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Destination links: 1 → 2 → 3 → 6. */
.sg-links-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2) var(--gutter-card)}
@media (min-width:600px){.sg-links-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.sg-links-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.sg-links-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ── Body + rail. Stacks until 1024, then 64% / 32%. ──────────────────────── */
.sg-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
@media (min-width:1024px){.sg-split{grid-template-columns:minmax(0,64fr) minmax(0,32fr);gap:var(--space-8);align-items:start}}
.sg-split-rail{position:static}
@media (min-width:1024px){.sg-split-rail{position:sticky;top:calc(var(--nav-height) + var(--space-3))}}

/* ── Stacks and rows ─────────────────────────────────────────────────────── */
.sg-stack{display:flex;flex-direction:column;gap:var(--space-2)}
.sg-stack-lg{display:flex;flex-direction:column;gap:var(--space-4)}
.sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5)}
.sg-row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
/* Inline on tablet up, stacked full-width on mobile — the default reflow for action pairs. */
.sg-actions{display:flex;flex-direction:column;gap:var(--space-1-5)}
.sg-actions > *{width:100%}
@media (min-width:600px){.sg-actions{flex-direction:row;align-items:center}.sg-actions > *{width:auto}}

/* ── Touch targets. 44px floor at every breakpoint. ──────────────────────── */
.sg-tap{min-width:var(--tap-min);min-height:var(--tap-min);display:inline-flex;align-items:center;justify-content:center}
/* Mobile pattern: full-width tappable row instead of a small inline link. */
.sg-tap-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;min-height:var(--space-7);padding-block:var(--space-1-5);text-align:left;background:none;border:0;border-bottom:var(--border-width) solid var(--hairline);cursor:pointer;font:inherit;color:inherit}
.sg-tap-row:last-child{border-bottom:0}

/* ── Media. Ratio is locked so cards never jump as images load. ──────────── */
.sg-media{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--surface-soft)}
.sg-media > img,.sg-media > picture > img{width:100%;height:100%;object-fit:cover}
.sg-ratio-1x1{aspect-ratio:1 / 1}
.sg-ratio-4x3{aspect-ratio:4 / 3}
.sg-ratio-3x2{aspect-ratio:3 / 2}
.sg-ratio-16x9{aspect-ratio:16 / 9}
.sg-ratio-4x5{aspect-ratio:4 / 5}
.sg-ratio-2x3{aspect-ratio:2 / 3}
/* Heroes shorten on mobile rather than going taller than the viewport. */
.sg-ratio-hero{aspect-ratio:4 / 5;max-height:72svh}
@media (min-width:600px){.sg-ratio-hero{aspect-ratio:3 / 2;max-height:none}}
@media (min-width:1024px){.sg-ratio-hero{aspect-ratio:21 / 9;min-height:480px}}

/* ── Visibility. Paired so nothing is hidden without a replacement. ──────── */
.sg-mobile-only{display:revert}
.sg-tablet-up{display:none}
.sg-desktop-up{display:none}
@media (min-width:768px){.sg-mobile-only{display:none}.sg-tablet-up{display:revert}}
@media (min-width:1024px){.sg-desktop-up{display:revert}}
.sg-tablet-up-flex,.sg-desktop-up-flex{display:none}
@media (min-width:768px){.sg-tablet-up-flex{display:flex}}
@media (min-width:1024px){.sg-desktop-up-flex{display:flex}}

/* ── Overlays: modal on desktop, full-screen sheet on mobile. ────────────── */
.sg-scrim{position:fixed;inset:0;background:var(--scrim-modal);z-index:var(--z-scrim)}
.sg-modal{position:fixed;z-index:var(--z-modal);background:var(--canvas);box-shadow:var(--shadow-sheet);display:flex;flex-direction:column;inset:0;border-radius:0;max-height:100%;overscroll-behavior:contain}
@media (min-width:768px){.sg-modal{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - var(--space-8)));max-height:min(80svh,720px);border-radius:var(--radius-lg)}}
/* Filters and pickers: bottom sheet on mobile, popover/panel above 768. */
.sg-sheet{position:fixed;z-index:var(--z-sheet);left:0;right:0;bottom:0;max-height:88svh;background:var(--canvas);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;box-shadow:var(--shadow-sheet);display:flex;flex-direction:column;overscroll-behavior:contain}
.sg-sheet-grip{flex:none;display:flex;justify-content:center;padding-block:var(--space-1-5)}
.sg-sheet-grip::after{content:"";width:var(--space-5);height:var(--space-0-5);border-radius:var(--radius-full);background:var(--border-strong)}
.sg-sheet-body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--space-2) var(--space-3)}
.sg-sheet-foot{flex:none;padding:var(--space-2);padding-bottom:max(var(--space-2),env(safe-area-inset-bottom));border-top:var(--border-width) solid var(--hairline);background:var(--canvas)}
@media (min-width:768px){.sg-sheet{position:absolute;inset:auto;max-height:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}.sg-sheet-grip{display:none}}
/* Sticky bottom bar — the reservation rail's mobile form. Only on screens where the tab bar is
   hidden, so the two never stack. */
.sg-dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-1-5) var(--space-2);padding-bottom:max(var(--space-1-5),env(safe-area-inset-bottom));background:var(--canvas);box-shadow:var(--shadow-dock)}
@media (min-width:1024px){.sg-dock{display:none}}
/* Clearance for the fixed tab bar. On the scrolling container, not the body. */
.sg-has-tabbar{padding-bottom:calc(var(--tabbar-height) + env(safe-area-inset-bottom))}
@media (min-width:768px){.sg-has-tabbar{padding-bottom:0}}
/* Clearance for the dock, on the screens that have one instead. */
.sg-has-dock{padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom))}
@media (min-width:1024px){.sg-has-dock{padding-bottom:0}}

/* ── Horizontal scroll rail. Bleeds to the page edge; snaps. ─────────────── */
.sg-hscroll{display:flex;gap:var(--gutter-card);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--page-inline) * -1);padding-inline:var(--page-inline);scroll-padding-inline-start:var(--page-inline)}
.sg-hscroll::-webkit-scrollbar{display:none}
.sg-hscroll > *{flex:none;scroll-snap-align:start}

/* ── Data-dense: table above 768, stacked cards below. ──────────────────── */
.sg-table-wrap{width:100%}
.sg-table{width:100%;border-collapse:collapse;font-size:var(--body-sm-size);line-height:var(--body-sm-lh)}
.sg-table th,.sg-table td{text-align:left;padding:var(--space-1-5) var(--space-2);border-bottom:var(--border-width) solid var(--hairline);vertical-align:middle}
.sg-table th{font-weight:600;color:var(--text-muted)}
/* Priority columns: drop the lowest-priority cells first, never wrap the header. */
.sg-col-p3{display:none}
.sg-col-p2{display:none}
@media (min-width:1024px){.sg-col-p2{display:table-cell}}
@media (min-width:1280px){.sg-col-p3{display:table-cell}}
/* The mobile replacement for a table. Pair one with the other. */
.sg-record-list{display:flex;flex-direction:column}
@media (min-width:768px){.sg-record-list{display:none}}
.sg-table-wrap{display:none}
@media (min-width:768px){.sg-table-wrap{display:block}}
.sg-record{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-0-5) var(--space-2);align-items:center;padding:var(--space-2) 0;border-bottom:var(--border-width) solid var(--hairline);min-height:var(--tap-min)}

/* ── 200% zoom / 320px guard ─────────────────────────────────────────────── */
/* Nothing in the system may set a fixed width below the tablet breakpoint. */
@media (max-width:767px){.sg-fluid-guard,.sg-fluid-guard *{max-width:100%}}