@import url("fonts.css");

/* ============================================================
   Royal Samudra Beach Resort — public site stylesheet
   Framework-free, no build step. OTA / MakeMyTrip-style theme.
   ============================================================ */

:root {
    --blue:#008cff; --blue-600:#0a66d6; --blue-700:#0a5bd3; --blue-ink:#08366b;
    --grad:linear-gradient(135deg,#41a4ff 0%,#0a66d6 100%);
    --grad-dark:linear-gradient(135deg,#1572d6 0%,#0746a8 100%);
    --saffron:#ff6f1e; --saffron-2:#f5515f;
    --ink:#1f2733; --ink-2:#4a5568; --ink-3:#8a95a6;
    --bg:#f2f4f8; --bg-2:#eaf1fb; --card:#ffffff; --line:#e4e8f0; --line-2:#d7deea;
    --green:#1aa260; --green-bg:#e7f7ee; --green-ink:#0b6b3c;
    --star:#ffb300;
    --shadow-sm:0 1px 3px rgba(20,33,61,.07);
    --shadow:0 6px 22px rgba(20,33,61,.10);
    --shadow-lg:0 20px 50px rgba(20,33,61,.18);
    --serif:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --radius:12px; --radius-sm:8px;
    --maxw:1180px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); color:var(--ink-2); background:var(--card); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--blue-600); text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:700; color:var(--ink); line-height:1.2; margin:0; letter-spacing:-.01em; }

.container { max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:700; color:var(--blue-600); margin-bottom:.6rem; }
.section { padding:4rem 0; }
.section-sand, .section-alt { background:var(--bg); }
.section-head { max-width:720px; margin:0 auto 2.4rem; text-align:center; }
.section-head h2 { font-size:2rem; }
.section-head p { color:var(--ink-2); font-size:1.02rem; margin-top:.6rem; }
.text-center { text-align:center; }
.mt-3 { margin-top:1.5rem; }
.muted { color:var(--ink-3); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.78rem 1.5rem; border-radius:var(--radius-sm); font-family:var(--sans); font-weight:700; font-size:.92rem; letter-spacing:.01em; cursor:pointer; border:1.5px solid transparent; transition:transform .12s, box-shadow .15s, background .15s, color .15s; white-space:nowrap; }
.btn-gold { background:var(--grad); color:#fff; box-shadow:0 5px 16px rgba(10,102,214,.30); }
.btn-gold:hover { background:var(--grad-dark); transform:translateY(-1px); box-shadow:0 8px 22px rgba(10,102,214,.38); }
.btn-teal { background:var(--blue-600); color:#fff; }
.btn-teal:hover { background:var(--blue-700); transform:translateY(-1px); }
.btn-outline { background:#fff; border-color:var(--blue-600); color:var(--blue-600); }
.btn-outline:hover { background:var(--blue-600); color:#fff; }
.btn-ghost-light { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.6); }
.btn-ghost-light:hover { background:#fff; color:var(--blue-600); }
.btn-lg { padding:.95rem 2rem; font-size:1rem; }
.btn-sm { padding:.5rem 1rem; font-size:.82rem; }
.btn-block { width:100%; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; left:0; right:0; z-index:100; background:#fff; box-shadow:0 1px 0 var(--line), 0 2px 16px rgba(20,33,61,.06); transition:box-shadow .25s; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand { display:flex; align-items:center; gap:.65rem; color:var(--ink); }
.brand-mark { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--grad); color:#fff; font-family:var(--serif); font-weight:800; font-size:1.05rem; box-shadow:0 4px 12px rgba(10,102,214,.3); }
.brand-name { font-family:var(--serif); font-size:1.22rem; font-weight:800; line-height:1; color:var(--ink); }
.brand-sub { display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-600); margin-top:3px; font-weight:700; }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a { color:var(--ink); font-weight:600; font-size:.92rem; opacity:.86; transition:color .2s, opacity .2s; }
.nav-links a:hover { opacity:1; color:var(--blue-600); }
.nav-links a.btn { color:#fff; opacity:1; }
.nav-links a.btn-gold:hover { color:#fff; }
.header-phone { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--blue-ink); font-size:.92rem; }
.nav-toggle { display:none; background:none; border:none; color:var(--ink); font-size:1.6rem; cursor:pointer; line-height:1; }
.site-header.scrolled { box-shadow:0 2px 20px rgba(20,33,61,.14); }

/* ---------- Hero (home) ---------- */
.hero { position:relative; min-height:520px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,28,54,.35) 0%, rgba(8,28,54,.30) 45%, rgba(8,28,54,.78) 100%); }
.hero-inner { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:3.5rem 1.25rem 8rem; }
.hero .eyebrow { color:#bfe0ff; }
.hero h1 { font-size:clamp(2rem,4.4vw,3.2rem); color:#fff; max-width:760px; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.hero .lead { font-size:1.1rem; margin:.9rem 0 0; max-width:560px; color:rgba(255,255,255,.94); }
.hero-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.hero-tags span { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; padding:.32rem .8rem; border-radius:99px; font-size:.82rem; font-weight:600; backdrop-filter:blur(4px); }
.hero-loc { display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; color:#eaf3ff; font-size:.95rem; }

/* ---------- Search widget (MMT style) ---------- */
.booking-bar { position:relative; z-index:5; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:1rem 1rem .9rem; display:grid; grid-template-columns:1.2fr 1.2fr 1fr auto; gap:.6rem; align-items:end; }
.hero .booking-bar { max-width:var(--maxw); margin:-5.5rem auto 0; }
.booking-bar .bf { display:flex; flex-direction:column; gap:.3rem; padding:.55rem .75rem; border:1px solid var(--line); border-radius:var(--radius-sm); transition:border-color .15s, box-shadow .15s; }
.booking-bar .bf:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,140,255,.12); }
.booking-bar label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink-3); }
.booking-bar input, .booking-bar select { border:none; padding:.1rem 0; font:inherit; font-size:1rem; font-weight:600; color:var(--ink); background:transparent; outline:none; }
.booking-bar .bf-submit { padding:0; border:none; }
.booking-bar .bf-submit .btn { height:100%; min-height:62px; font-size:1rem; }

/* ---------- USP / trust strip ---------- */
.usp-bar { background:#fff; border-bottom:1px solid var(--line); }
.usp-bar .container { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 2.5rem; padding-top:1.2rem; padding-bottom:1.2rem; }
.usp { display:flex; align-items:center; gap:.6rem; color:var(--ink-2); font-weight:600; font-size:.92rem; }
.usp .ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--bg-2); color:var(--blue-600); font-size:1.1rem; }

/* ---------- Room rows (horizontal OTA cards) ---------- */
.room-list { display:flex; flex-direction:column; gap:1.25rem; }
.room-row { display:grid; grid-template-columns:300px 1fr 230px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s; }
.room-row:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.room-row .rr-photo { position:relative; overflow:hidden; min-height:230px; }
.room-row .rr-photo img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.room-row:hover .rr-photo img { transform:scale(1.05); }
.room-row .rr-photo .pcount { position:absolute; left:10px; bottom:10px; background:rgba(8,28,54,.72); color:#fff; font-size:.72rem; font-weight:600; padding:.25rem .6rem; border-radius:6px; display:flex; align-items:center; gap:.3rem; }
.room-row .rr-body { padding:1.25rem 1.4rem; display:flex; flex-direction:column; }
.room-row .rr-body h3 { font-size:1.3rem; margin-bottom:.35rem; }
.room-row .rr-meta { color:var(--ink-3); font-size:.88rem; margin-bottom:.7rem; }
.room-row .rr-desc { font-size:.9rem; color:var(--ink-2); margin:0 0 .8rem; }
.tag-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.tag-chip { font-size:.74rem; background:var(--bg); color:var(--ink-2); padding:.28rem .65rem; border-radius:6px; font-weight:600; border:1px solid var(--line); }
.incl { display:flex; align-items:center; gap:.4rem; color:var(--green-ink); font-size:.84rem; font-weight:600; margin-top:auto; }
.room-row .rr-price { border-left:1px dashed var(--line-2); padding:1.25rem 1.3rem; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; background:linear-gradient(180deg,#fbfdff,#f4f8ff); }
.rr-price .strike { color:var(--ink-3); text-decoration:line-through; font-size:.9rem; }
.rr-price .amt { font-family:var(--serif); font-weight:800; font-size:1.9rem; color:var(--ink); line-height:1.1; }
.rr-price .per { color:var(--ink-3); font-size:.78rem; margin-bottom:.7rem; }
.rr-price .save { color:var(--green); font-size:.78rem; font-weight:700; margin-bottom:.5rem; }
.rr-price .btn { width:100%; }
.rr-price .note { font-size:.72rem; color:var(--ink-3); margin-top:.5rem; }

/* ---------- Rating pill ---------- */
.rating-pill { display:inline-flex; align-items:center; gap:.35rem; background:var(--green); color:#fff; font-weight:700; font-size:.82rem; padding:.22rem .55rem; border-radius:6px; }
.rating-pill .ti, .rating-pill svg { font-size:.8rem; }

/* ---------- Vertical room cards (fallback / amenity) ---------- */
.room-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; }
.room-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.room-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.room-card .ph { aspect-ratio:3/2; overflow:hidden; }
.room-card .ph img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.room-card:hover .ph img { transform:scale(1.05); }
.room-card .body { padding:1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.room-card h3 { font-size:1.25rem; margin-bottom:.3rem; }
.room-card .meta { color:var(--ink-3); font-size:.86rem; margin-bottom:.8rem; }
.room-card .tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.room-card .tag { font-size:.72rem; background:var(--bg); color:var(--ink-2); border:1px solid var(--line); padding:.25rem .6rem; border-radius:6px; font-weight:600; }
.room-card .price-row { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:.9rem; border-top:1px solid var(--line); }
.room-card .price strong { font-family:var(--serif); font-size:1.5rem; color:var(--ink); }
.room-card .price span { color:var(--ink-3); font-size:.8rem; }

/* ---------- About / split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.split-img { position:relative; }
.split-img img { border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover; width:100%; }
.split-img .badge-float { position:absolute; bottom:-20px; right:-18px; background:var(--grad); color:#fff; padding:1rem 1.3rem; border-radius:var(--radius-sm); box-shadow:var(--shadow); font-family:var(--serif); }
.split-img .badge-float strong { font-size:1.7rem; display:block; }
.split-text h2 { font-size:2rem; margin-bottom:.9rem; }
.split-text p { color:var(--ink-2); margin:0 0 1rem; }
.feature-list { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.feature-list li { position:relative; padding-left:1.7rem; color:var(--ink-2); }
.feature-list li::before { content:'✓'; position:absolute; left:0; width:1.1rem; height:1.1rem; color:var(--green); font-weight:800; }

/* ---------- Amenities ---------- */
.amenity-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.amenity { display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); }
.amenity .ic { width:44px; height:44px; flex:none; border-radius:10px; background:var(--bg-2); color:var(--blue-600); display:grid; place-items:center; font-size:1.3rem; }
.amenity h4 { font-size:.95rem; margin:0; }
.amenity p { font-size:.78rem; color:var(--ink-3); margin:.1rem 0 0; }

/* ---------- Gallery ---------- */
.gallery-grid { column-count:3; column-gap:12px; }
.gallery-grid img { width:100%; margin-bottom:12px; border-radius:var(--radius-sm); break-inside:avoid; transition:filter .25s, transform .25s; cursor:zoom-in; box-shadow:var(--shadow-sm); }
.gallery-grid img:hover { filter:brightness(1.04); transform:scale(1.01); }

/* ---------- CTA band ---------- */
.cta-band { position:relative; color:#fff; text-align:center; padding:4.5rem 1.25rem; background:var(--grad-dark); overflow:hidden; }
.cta-band::after { content:''; position:absolute; inset:0; background-size:cover; background-position:center; opacity:.18; }
.cta-band > * { position:relative; z-index:2; }
.cta-band .eyebrow { color:#bfe0ff; }
.cta-band h2 { color:#fff; font-size:2.2rem; }
.cta-band p { max-width:560px; margin:.8rem auto 1.8rem; opacity:.94; }

/* ---------- Location ---------- */
.loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:stretch; }
.loc-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:2rem; }
.loc-card h3 { font-size:1.4rem; margin-bottom:1rem; }
.loc-line { display:flex; gap:.6rem; margin-bottom:.7rem; color:var(--ink-2); }
.map-embed { border-radius:var(--radius); overflow:hidden; min-height:320px; border:1px solid var(--line); }
.map-embed iframe { width:100%; height:100%; min-height:320px; border:0; }

/* ---------- Footer ---------- */
.site-footer { background:#0d1b2e; color:rgba(255,255,255,.72); padding:3.5rem 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:2.5rem; }
.site-footer h4 { color:#fff; font-family:var(--sans); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin:0 0 1rem; }
.site-footer a { color:rgba(255,255,255,.72); }
.site-footer a:hover { color:#fff; }
.footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.13); margin-top:2.5rem; padding-top:1.3rem; text-align:center; font-size:.82rem; opacity:.65; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position:relative; padding:3rem 1.25rem; text-align:center; color:#fff; background-size:cover; background-position:center; }
.page-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,28,54,.55),rgba(8,28,54,.72)); }
.page-hero > * { position:relative; z-index:2; }
.page-hero .eyebrow { color:#bfe0ff; }
.page-hero h1 { color:#fff; font-size:2.2rem; }
.page-hero p { opacity:.94; margin-top:.4rem; }

/* ---------- Booking flow ---------- */
.flow-steps { display:flex; gap:.5rem; justify-content:center; margin-bottom:2rem; flex-wrap:wrap; }
.flow-steps .step { font-size:.84rem; font-weight:600; color:var(--ink-3); padding:.45rem 1rem; border-radius:99px; background:var(--bg); border:1px solid var(--line); }
.flow-steps .step.active { background:var(--blue-600); color:#fff; border-color:var(--blue-600); }
.summary-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; position:sticky; top:88px; box-shadow:var(--shadow-sm); }
.summary-card h3 { font-size:1.2rem; margin-bottom:1rem; }
.summary-row { display:flex; justify-content:space-between; gap:1rem; padding:.38rem 0; color:var(--ink-2); font-size:.92rem; }
.summary-row.total { border-top:1px solid var(--line); margin-top:.5rem; padding-top:.8rem; font-size:1.15rem; color:var(--ink); font-weight:800; }
.field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.field label { font-size:.78rem; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; }
.field input, .field select, .field textarea { border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:.7rem .8rem; font:inherit; color:var(--ink); background:#fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,140,255,.12); }
.alert-site { padding:.85rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1.25rem; background:#fdecec; color:#b3261e; border:1px solid #f6c9c6; font-weight:600; }
.notice-site { padding:.85rem 1.1rem; border-radius:var(--radius-sm); margin-bottom:1.25rem; background:var(--green-bg); color:var(--green-ink); border:1px solid #bde9cf; font-weight:600; }

/* ---------- Room detail ---------- */
.detail-top { padding:1.5rem 0 .5rem; }
.detail-top h1 { font-size:2rem; }
.detail-top .d-loc { color:var(--ink-3); margin-top:.4rem; display:flex; align-items:center; gap:.4rem; }
.detail-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.detail-gallery { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:420px; margin-bottom:2rem; }
.detail-gallery a { display:block; overflow:hidden; border-radius:var(--radius-sm); }
.detail-gallery a:first-child { grid-row:1 / span 2; }
.detail-gallery img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:transform .4s; }
.detail-gallery a:hover img { transform:scale(1.05); }
.rdg { display:grid; grid-template-columns:1.7fr 1fr; gap:2.5rem; align-items:start; }
.book-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; position:sticky; top:88px; box-shadow:var(--shadow); }
.book-card .price-lead { display:flex; align-items:baseline; gap:.5rem; margin-bottom:1rem; }
.book-card .price-lead .amt { font-family:var(--serif); font-size:2rem; font-weight:800; color:var(--ink); }

/* ---------- Confirmation ---------- */
.confirm-box { max-width:680px; margin:0 auto; text-align:center; }
.confirm-check { width:74px; height:74px; margin:0 auto 1.3rem; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:2.2rem; }
.voucher { text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-top:2rem; overflow:hidden; }
.voucher-head { background:var(--grad-dark); color:#fff; padding:1.2rem 1.5rem; display:flex; justify-content:space-between; align-items:center; }
.voucher-body { padding:1.5rem; }
.voucher-body table { width:100%; border-collapse:collapse; }
.voucher-body td { padding:.5rem 0; border-bottom:1px solid var(--line); }
.voucher-body td:last-child { text-align:right; font-weight:600; color:var(--ink); }

/* ---------- WhatsApp float + legal ---------- */
.wa-float { position:fixed; right:18px; bottom:18px; z-index:90; background:#25d366; color:#fff; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow-lg); font-weight:700; font-size:1.4rem; }
.legal { max-width:760px; margin:0 auto; }
.legal h2 { font-size:1.4rem; margin:2rem 0 .6rem; }
.legal h3 { font-size:1.1rem; margin:1.4rem 0 .4rem; font-family:var(--sans); }
.legal p, .legal li { color:var(--ink-2); line-height:1.8; }
.legal ul { padding-left:1.2rem; margin:.4rem 0 1rem; }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
    .room-row { grid-template-columns:240px 1fr; }
    .room-row .rr-price { grid-column:1 / -1; border-left:none; border-top:1px dashed var(--line-2); flex-direction:row; align-items:center; justify-content:space-between; text-align:left; }
    .room-row .rr-price .btn { width:auto; }
}
@media (max-width:860px) {
    .nav-links { position:fixed; inset:0 0 0 auto; width:min(80vw,320px); background:#fff; flex-direction:column; align-items:flex-start; padding:5rem 1.6rem; transform:translateX(100%); transition:transform .3s; box-shadow:var(--shadow-lg); gap:1.2rem; }
    .nav-links.open { transform:translateX(0); }
    .nav-links a { font-size:1.05rem; }
    .nav-toggle { display:block; z-index:120; }
    .header-phone { display:none; }
    .booking-bar { grid-template-columns:1fr 1fr; }
    .hero .booking-bar { margin-top:-3.5rem; }
    .split, .loc-grid, .footer-grid, .rdg { grid-template-columns:1fr; }
    .split-img .badge-float { right:1rem; }
    .feature-list { grid-template-columns:1fr; }
    .gallery-grid { column-count:2; }
    .section { padding:3rem 0; }
    .section-head h2, .split-text h2 { font-size:1.7rem; }
    .detail-gallery { grid-template-columns:1fr 1fr; height:auto; grid-template-rows:none; }
    .detail-gallery a:first-child { grid-column:1 / -1; grid-row:auto; height:240px; }
    .book-card, .summary-card { position:static; margin-top:1.5rem; }
}
@media (max-width:560px) {
    .room-row { grid-template-columns:1fr; }
    .room-row .rr-photo { height:200px; }
    .booking-bar { grid-template-columns:1fr; }
    .gallery-grid { column-count:1; }
    .detail-gallery { grid-template-columns:1fr; }
}