/* 078 Website layouts (design: canvas boards 22-25; note docs/design-notes/POSxp_Design_Note_Website.txt).
   html[data-layout] is set from the client's choice or its business's default.
   clear   words beside a photo, cards in rows (the base styles, plus the photo split)
   story   full photo, big type, editorial
   market  compact, phone-first, items up front, sticky action
   RULE: every page type must work in all three before it ships. */

/* ---------- shared hero parts ---------- */
.hero-eye{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0;font-weight:600}
.hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hero-pic img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- CLEAR ---------- */
html[data-layout="clear"] .hero.has-pic{grid-template-columns:1fr;align-items:center;gap:22px}
html[data-layout="clear"] .hero-pic{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--soft)}
@media (min-width:820px){
  html[data-layout="clear"] .hero.has-pic{grid-template-columns:1.05fr 1fr}
  html[data-layout="clear"] .hero.has-pic .hero-pic{order:2}
  html[data-layout="clear"] .hero h1{font-size:clamp(2rem,3.6vw,2.9rem)}
}

/* ---------- STORY ---------- */
html[data-layout="story"] .top{padding-top:16px;padding-bottom:16px}
html[data-layout="story"] .brand{font-size:1.25rem;letter-spacing:.01em}
html[data-layout="story"] .nav a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
html[data-layout="story"] h1,html[data-layout="story"] h2{letter-spacing:-.02em}
html[data-layout="story"] h2{font-size:clamp(1.5rem,3vw,2rem)}
html[data-layout="story"] .btn{border-radius:999px;padding:13px 22px}
html[data-layout="story"] .hero{position:relative;margin:-22px calc(50% - 50vw) 34px;min-height:min(68vh,620px);align-content:end;
  padding:48px max(20px,calc(50vw - 530px)) 56px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.66)),var(--hero,linear-gradient(135deg,var(--ink),var(--ink)));
  background-size:cover;background-position:center}
html[data-layout="story"] .hero-pic{display:none}
html[data-layout="story"] .hero h1{font-size:clamp(2.4rem,7vw,4.8rem);line-height:.98;color:#fff;max-width:13em}
html[data-layout="story"] .hero p{color:rgba(255,255,255,.88);font-size:1.08rem}
html[data-layout="story"] .hero .hero-eye{color:rgba(255,255,255,.8);letter-spacing:.2em}
html[data-layout="story"] .hero .btn:not(.primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
html[data-layout="story"] .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px 20px}
html[data-layout="story"] .card{border:0;border-radius:0;background:transparent}
html[data-layout="story"] .card:hover{transform:none}
html[data-layout="story"] .card .pic{aspect-ratio:4/3;border-radius:4px;overflow:hidden}
html[data-layout="story"] .card .b{padding:12px 0 0}
html[data-layout="story"] .card h3{font-size:1.18rem}
html[data-layout="story"] .impact{border-radius:4px}
/* the hotel booking page */
html[data-layout="story"] .sx-hero{margin:-30px calc(50% - 50vw) 40px;border-radius:0;min-height:min(70vh,640px);display:grid;align-content:end;
  padding:56px max(20px,calc(50vw - 530px)) 48px;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.68)),var(--hero,linear-gradient(135deg,var(--ink),var(--ink)));background-size:cover;background-position:center}
html[data-layout="story"] .sx-hero-in{max-width:none;width:100%}
html[data-layout="story"] .sx-hero h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;max-width:12em}
html[data-layout="story"] .sx-search{border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 18px 40px rgba(0,0,0,.2)}
html[data-layout="story"] .sx-search label{border:0}
html[data-layout="story"] .sx-search .btn{border-radius:999px}
@media(max-width:720px){html[data-layout="story"] .sx-search{border-radius:18px;padding:10px}}
html[data-layout="story"] .sx-card{border:0;border-radius:0;background:transparent}
html[data-layout="story"] .sx-pic{border-radius:4px}
html[data-layout="story"] .sx-body{padding:12px 0 0}
html[data-layout="story"] .sx-body h3{font-size:1.25rem;font-family:var(--head)}
html[data-layout="story"] .foot{background:var(--ink);color:rgba(255,255,255,.78);border-top:0}
html[data-layout="story"] .foot b{color:#fff}

/* ---------- MARKET ---------- */
html[data-layout="market"] main{max-width:720px}
html[data-layout="market"] .top{justify-content:center}
html[data-layout="market"] .btn{border-radius:14px}
html[data-layout="market"] .hero{text-align:center;justify-items:center;padding:14px 0 18px;gap:8px}
html[data-layout="market"] .hero h1{font-size:clamp(1.6rem,4.5vw,2rem)}
html[data-layout="market"] .hero p{font-size:.95rem}
html[data-layout="market"] .hero-acts{justify-content:center}
html[data-layout="market"] .hero-pic{order:-1;width:100%;aspect-ratio:3/1;border-radius:18px;overflow:hidden;background:var(--soft);margin-bottom:6px}
html[data-layout="market"] .chips{position:sticky;top:57px;z-index:10;background:var(--bg);margin:0 -16px 12px;padding:10px 16px;border-bottom:1px solid var(--line)}
html[data-layout="market"] .grid{grid-template-columns:1fr;gap:10px}
html[data-layout="market"] .card{flex-direction:row;align-items:center;border-radius:16px;padding:10px;gap:12px}
html[data-layout="market"] .card:hover{transform:none}
html[data-layout="market"] .card .pic{width:96px;flex:none;border-radius:12px;overflow:hidden}
html[data-layout="market"] .card .pic .ini{font-size:1.4rem}
html[data-layout="market"] .card .b{padding:0;flex:1}
html[data-layout="market"] .card .pr::after{content:"+";float:right;width:30px;height:30px;line-height:30px;text-align:center;border-radius:9px;background:var(--acc);color:var(--on-acc);font-size:1.2rem;margin-top:-18px}
html[data-layout="market"] .storepick{justify-content:center}
html[data-layout="market"] .bagbtn .count{background:var(--acc)}
/* the hotel booking page */
html[data-layout="market"] .sx-hero{margin:-8px 0 20px;border-radius:20px;padding:26px 18px;text-align:center}
html[data-layout="market"] .sx-hero-in{max-width:none}
html[data-layout="market"] .sx-hero h1{font-size:clamp(1.5rem,4.4vw,2rem)}
html[data-layout="market"] .sx-grid{grid-template-columns:1fr;gap:10px}
html[data-layout="market"] .sx-card{flex-direction:row;border-radius:16px}
html[data-layout="market"] .sx-pic{width:130px;flex:none;aspect-ratio:auto;min-height:110px}
html[data-layout="market"] .sx-body{padding:12px 14px}
html[data-layout="market"] .foot{justify-content:center;text-align:center}
html[data-layout="market"] .flinks{justify-content:center}

/* ---------- presence pages (079): built on the shared classes, shaped by each layout ---------- */
.pp-head{padding:8px 0 16px}
.pp-list{display:grid;gap:12px;margin-bottom:24px}
.pp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pp-row h3{font-size:1.08rem}
.pp-price{color:var(--acc-text);white-space:nowrap}.pp-price small{font-weight:400;color:var(--muted)}
.pp-offer .pic{aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-bottom:6px}
.pp-offer p{margin:0}
.pp-cta{margin:8px 0 24px}
.pp-home{margin:18px 0 26px}
.pp-home .sx-head a{color:var(--acc-text);text-decoration:none;font-weight:600;font-size:.9rem}
.pp-gallery{columns:3 220px;column-gap:12px}
.pp-gallery figure{margin:0 0 12px;break-inside:avoid}
.pp-gallery img{width:100%;border-radius:12px;display:block}
.pp-gallery figcaption{font-size:.82rem;color:var(--muted);padding:6px 2px 0}
.pp-two{display:grid;gap:16px}
@media (min-width:820px){.pp-two{grid-template-columns:1fr 1fr;align-items:start}}
.pp-contact p{margin:0}
.pp-form h2{margin:0 0 4px}
html[data-layout="story"] .pp-head h1{font-size:clamp(2rem,5vw,3.2rem)}
html[data-layout="story"] .pp-gallery img{border-radius:3px}
html[data-layout="market"] .pp-head{text-align:center}
html[data-layout="market"] .pp-gallery{columns:2 140px}

/* ---------------------------------------------------------------- Services booking page (book.js, S4) */
.sv-meta{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 10px;color:var(--muted);font-size:.92rem}
.sv-meta b{color:var(--ink);font-size:1.05rem}
.btn.sm{padding:7px 14px;font-size:.9rem;align-self:flex-start}
.sv-ini{display:grid;place-items:center;width:100%;height:100%;font-weight:600;color:var(--muted);background:var(--soft)}
.sv-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.sv-person{display:grid;justify-items:center;text-align:center;gap:4px}
.sv-face{width:96px;height:96px;border-radius:50%;overflow:hidden;margin-bottom:6px}
.sv-face img{width:100%;height:100%;object-fit:cover}
.sv-book{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
@media(max-width:900px){.sv-book{grid-template-columns:minmax(0,1fr)}.sv-book-side{position:static}}
.sv-book-main h1{font-family:var(--head);margin:4px 0 8px}
.sv-book-side{position:sticky;top:16px;display:grid;gap:6px}
.sv-step{margin:26px 0 10px;font-size:1.05rem}
.sv-who{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.sv-who button{display:grid;justify-items:center;gap:2px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--bg);cursor:pointer;font:inherit;color:inherit}
.sv-who button img,.sv-who button .sv-ini{width:48px;height:48px;border-radius:50%;object-fit:cover;overflow:hidden}
.sv-who button.on,.sv-days button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.sv-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.sv-days button{flex:0 0 auto;display:grid;justify-items:center;min-width:64px;padding:10px 6px;border:1px solid var(--line);border-radius:14px;background:var(--bg);cursor:pointer;font:inherit;color:inherit}
.sv-days button span{font-size:.78rem;color:var(--muted)}
.sv-days button b{font-size:1.2rem}
.sv-days button i{font-style:normal;font-size:.72rem;color:var(--muted)}
.sv-tgroup{margin-bottom:12px}
.sv-tgroup>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sv-times button{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer;font:inherit;color:inherit;font-variant-numeric:tabular-nums}
.sv-times button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.sv-sum{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.94rem;border-bottom:1px solid var(--line)}
.sv-sum span{color:var(--muted)}
.sv-form{display:grid;gap:4px;margin-top:10px}
.sv-done{max-width:520px;margin:30px auto;text-align:center;display:grid;gap:8px;justify-items:center}
.sv-done .sv-form{width:100%;text-align:left}
.sv-tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ok,#2e7d32);color:#fff;font-size:1.6rem}
.sv-week{margin:0 0 18px}
.sv-classes{display:grid;gap:12px}
.sv-class{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:16px;align-items:center}
.sv-class.off{opacity:.55}
.sv-ctime{display:grid}
.sv-ctime b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.sv-cbody h3{margin:0 0 2px}
.sv-bar{height:6px;border-radius:4px;background:var(--soft);overflow:hidden;margin:8px 0 4px;max-width:260px}
.sv-bar i{display:block;height:100%;background:var(--acc)}
@media(max-width:600px){.sv-class{grid-template-columns:70px minmax(0,1fr)}.sv-class .btn{grid-column:1/-1}}
.sv-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;align-items:start}
.sv-plan{position:relative;display:grid;gap:8px}
.sv-plan.feat{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.sv-pop{position:absolute;top:-11px;left:16px;background:var(--acc);color:var(--on-acc,#fff);font-size:.75rem;padding:3px 10px;border-radius:999px}
.sv-price b{font-size:1.8rem;font-family:var(--head)}
.sv-plan ul{margin:0;padding-left:18px;color:var(--muted);font-size:.92rem}
/* the layouts shape it too */
html[data-layout="story"] .sv-class,html[data-layout="story"] .sv-plan{border-radius:0}
html[data-layout="story"] .sv-book-main h1{font-size:clamp(2rem,5vw,3.2rem)}
html[data-layout="market"] .sv-book{gap:16px}
html[data-layout="market"] .sv-days button{min-width:56px;border-radius:12px}
html[data-layout="market"] .sv-plans{grid-template-columns:1fr}
/* booking pages (hotel and services) use the full width, not the 620 px member column */
.pxm.page:has(.sv-book,.sx-detail,.sx-grid,.sv-classes,.sv-plans,.sx-hero,.sv-team,.ng-events){max-width:1120px}

/* ---------------------------------------------------------------- NGO pages (ngo.js, N3) */
.ng-banner{margin:-8px -16px 0;padding:10px 16px;background:var(--acc);color:var(--on-acc,#fff);text-align:center;font-weight:600;font-size:.92rem}
.ng-bar{max-width:none;height:8px}
.ng-impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 28px}
.ng-impact div{display:grid;gap:2px;padding:16px;border:1px solid var(--line);border-radius:14px;text-align:center}
.ng-impact b{font-family:var(--head);font-size:1.7rem;color:var(--acc-text,var(--acc))}
.ng-impact span{color:var(--muted);font-size:.9rem}
.ng-feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;margin:0 0 34px;padding:0;overflow:hidden}
.ng-feat .sx-pic{aspect-ratio:4/3;height:100%}
.ng-feat-body{padding:22px 22px 22px 0}
.ng-feat-body h2{font-family:var(--head);margin:0 0 8px}
@media(max-width:760px){.ng-feat{grid-template-columns:minmax(0,1fr)}.ng-feat-body{padding:0 18px 20px}}
.ng-events{display:grid;gap:12px;margin-bottom:28px}
.ng-event{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}
.ng-date{display:grid;justify-items:center;padding:8px 0;border-radius:12px;background:var(--soft)}
.ng-date span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--acc-text,var(--acc));font-weight:700}
.ng-date b{font-size:1.5rem;line-height:1.1}
.ng-ebody h3{margin:0 0 2px}
.ng-ebody .note{margin:2px 0}
@media(max-width:600px){.ng-event{grid-template-columns:56px minmax(0,1fr)}.ng-event>.btn,.ng-event>.note{grid-column:1/-1}}
.ng-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 28px}
.ng-cta h2{margin:0 0 4px}
.ng-big{border-radius:16px;margin-bottom:16px;aspect-ratio:16/9}
.ng-story p{line-height:1.7;margin:0 0 12px}
.ng-updates{display:grid;gap:14px}
.ng-updates article{border-left:3px solid var(--acc);padding:2px 0 2px 14px}
.ng-updates img{display:block;max-width:100%;border-radius:10px;margin:6px 0}
.ng-updates p{margin:4px 0 0}
.ng-givers{display:flex;flex-wrap:wrap;gap:8px}
.ng-givers span{padding:6px 12px;border-radius:999px;background:var(--soft);font-size:.9rem}
.ng-amts{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin:12px 0 4px}
.ng-amts button{padding:10px 6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer;font:inherit;color:inherit;font-weight:600}
.ng-amts button.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.ng-what{min-height:1.2em;margin:0 0 4px}
.ng-qr{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;margin:8px 0;padding:10px;border:1px dashed var(--line);border-radius:12px}
.ng-qr img{width:120px;height:120px;object-fit:contain;background:#fff;border-radius:8px}
.ng-check{display:flex;gap:8px;align-items:center;font-size:.94rem;margin:4px 0}
.ng-give-page{max-width:560px;margin:0 auto}
.ng-vol{max-width:620px;margin:0 auto}
.ng-chips{display:flex;flex-wrap:wrap;gap:8px}
.ng-chips label{cursor:pointer}
.ng-chips input{position:absolute;opacity:0;pointer-events:none}
.ng-chips span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px}
.ng-chips input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.ng-chips input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.ng-sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.ng-sheet-in{position:relative;width:100%;max-width:440px;max-height:90vh;overflow:auto;background:var(--bg,#fff)}
.ng-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
html[data-layout="story"] .ng-feat,html[data-layout="story"] .ng-event{border-radius:0}
html[data-layout="story"] .ng-impact div{border:0;border-top:2px solid var(--ink);border-radius:0;text-align:left}
html[data-layout="market"] .ng-feat{grid-template-columns:minmax(0,1fr)}
html[data-layout="market"] .ng-feat-body{padding:0 18px 20px}
html[data-layout="story"] .ng-hero.ng-sub{min-height:0;padding-top:48px;padding-bottom:40px}
.ng-check input{width:auto;flex:none;margin:0;accent-color:var(--acc)}
.ng-cta>div{flex:1 1 320px}
.ng-cta>.btn{flex:none;width:auto}
.ng-event>.btn{align-self:center}
.ng-vol button[type=submit]{margin-top:18px}