/* =========================================================================
   Souvenir showcase page (/souvenirs) — page-souvenir.php
   Builds on main.css tokens + home-sections.css primitives
   (.y70-sec, .y70-card2, .y70-media) + content.css (.y70-page-hero/.y70-cta-band).
   ========================================================================= */

/* Lead paragraph under the conditions heading */
.y70-svw-lead{
  max-width: 70ch; margin: 0 0 clamp(22px,3vw,34px);
  font-size: clamp(1rem,1.5vw,1.12rem); line-height:1.85; color:#52575f;
}
.y70-svw-lead b{ color:var(--primary); white-space:nowrap; }

/* This page drops the repeating decorative corner gears (one per .y70-sec looked
   cluttered); the staircase is the page's focal visual instead. */
.y70-souvenir-page .y70-sec::before,
.y70-souvenir-page .y70-sec::after{ display:none; }

/* =========================================================================
   Interactive reward staircase — "บริจาคเท่าไหร่ ได้อะไร"
   ========================================================================= */
.y70-stair-wrap{ margin-top: clamp(4px,1.5vw,14px); }

/* --- amount control --- */
.y70-stair-ctl{ margin-bottom: clamp(16px,2.6vw,26px); }
.y70-stair-ctl__label{ display:block; font-weight:800; color:var(--dark); margin-bottom:12px; }
.y70-stair-ctl__row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.y70-stair-ctl__field{ position:relative; display:inline-flex; align-items:center; }
.y70-stair-ctl__input{ width:170px; font:inherit; font-size:1.15rem; font-weight:800; color:var(--primary);
  padding:12px 46px 12px 16px; border:2px solid var(--y70-ring); border-radius:14px; background:var(--card); -moz-appearance:textfield; }
.y70-stair-ctl__input::-webkit-outer-spin-button, .y70-stair-ctl__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.y70-stair-ctl__input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 13%,transparent); }
.y70-stair-ctl__unit{ position:absolute; right:15px; color:var(--muted); font-weight:700; pointer-events:none; }
.y70-stair-ctl__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.y70-stair-chip{ font:inherit; font-weight:700; font-size:.86rem; color:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,#fff); border:1.5px solid var(--y70-ring);
  padding:9px 15px; border-radius:999px; cursor:pointer; transition:.15s; }
.y70-stair-chip::before{ content:"฿"; opacity:.55; margin-right:2px; }
.y70-stair-chip:hover{ border-color:var(--primary); }
.y70-stair-chip.is-on{ background:var(--primary); color:#fff; border-color:var(--primary); }
.y70-stair-ctl__result{ margin:14px 0 0; min-height:1.6em; font-size:1.02rem; line-height:1.65; color:var(--dark); }
.y70-stair-ctl__result b{ color:var(--primary); font-weight:900; }
.y70-stair-next{ color:var(--muted); font-size:.92rem; }

/* --- the staircase: big white reward cards on slim ascending bases --- */
.y70-stair{ display:flex; align-items:flex-end; gap:clamp(12px,1.8vw,24px);
  overflow-x:auto; padding:46px 6px 10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.y70-stair__step{ position:relative; flex:1 0 clamp(150px,18vw,188px); display:flex; flex-direction:column; align-items:center;
  scroll-snap-align:center; cursor:pointer; outline:none; }

/* the reward card (the hero) — big image, white, airy */
.y70-stair__card{ width:100%; background:var(--card); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--y70-shadow); padding:16px 14px 15px; display:flex; flex-direction:column; align-items:center; gap:11px;
  position:relative; transition:transform .28s, box-shadow .28s, border-color .28s; z-index:1; }
.y70-stair__pics{ position:relative; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.y70-stair__pic{ width:clamp(92px,11vw,124px); height:clamp(92px,11vw,124px); border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg,#f4f5f7,#e9ebef); display:grid; place-items:center; }
.y70-stair__pic img{ width:100%; height:100%; object-fit:cover; }
.y70-stair__pic .emoji{ font-size:clamp(2.6rem,4.4vw,3.4rem); line-height:1; }
.y70-stair__name{ font-size:.92rem; font-weight:800; color:var(--dark); text-align:center; line-height:1.35; }
.y70-stair__check{ position:absolute; top:-9px; right:-9px; width:27px; height:27px; border-radius:50%;
  background:var(--primary); color:#fff; display:grid; place-items:center; font-size:.82rem; font-weight:900;
  opacity:0; transform:scale(.4); transition:.25s; box-shadow:0 2px 8px rgba(0,0,0,.22); z-index:2; }

/* the slim ascending base (the "step" you stand on) — light, not a heavy block */
.y70-stair__base{ width:78%; margin-top:13px; height:calc(26px + var(--rise) * 24px);
  border-radius:13px 13px 0 0; background:linear-gradient(180deg, #f3f4f6, color-mix(in srgb,#f3f4f6 12%, transparent));
  border:1px solid var(--border); border-bottom:0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding-top:11px; gap:1px; transition:background .3s, border-color .3s; }
.y70-stair__amt{ font-size:1.08rem; font-weight:900; color:var(--dark); }
.y70-stair__amt small{ font-size:.66em; font-weight:800; margin-left:1px; }
.y70-stair__lv{ font-size:.66rem; font-weight:800; color:var(--muted); }

.y70-stair__step:hover .y70-stair__card{ transform:translateY(-5px); box-shadow:var(--y70-shadow-hover); border-color:var(--y70-ring); }
.y70-stair__step:focus-visible .y70-stair__card{ box-shadow:0 0 0 3px var(--y70-ring); }

/* reached — light maroon accents (airy, no heavy fill) */
.y70-stair__step.is-reached .y70-stair__card{ border-color:var(--primary); }
.y70-stair__step.is-reached .y70-stair__check{ opacity:1; transform:none; }
.y70-stair__step.is-reached .y70-stair__base{
  background:linear-gradient(180deg, color-mix(in srgb,var(--primary) 16%,#fff), color-mix(in srgb,var(--primary) 3%,#fff));
  border-color:color-mix(in srgb,var(--primary) 45%,#fff); }
.y70-stair__step.is-reached .y70-stair__amt{ color:var(--primary); }

/* current — the single rich highlight (maroon, on-brand; no gold) + marker */
.y70-stair__step.is-current .y70-stair__card{ border-color:var(--primary);
  box-shadow:0 14px 32px color-mix(in srgb,var(--primary) 24%,transparent); transform:translateY(-7px); }
.y70-stair__step.is-current .y70-stair__base{
  background:linear-gradient(180deg, var(--primary), color-mix(in srgb,var(--primary) 76%,#000)); border-color:var(--primary); }
.y70-stair__step.is-current .y70-stair__amt{ color:#fff; }
.y70-stair__step.is-current .y70-stair__amt small{ color:#fff; }
.y70-stair__step.is-current .y70-stair__lv{ color:rgba(255,255,255,.82); }

/* "ยอดของคุณ" marker above the current card */
.y70-stair__marker{ position:absolute; top:-16px; opacity:0; transform:translateY(8px); transition:.25s;
  background:var(--primary); color:#fff; font-size:.72rem; font-weight:800; padding:4px 12px; border-radius:999px; white-space:nowrap; z-index:4; }
.y70-stair__marker::after{ content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--primary); }
.y70-stair__step.is-current .y70-stair__marker{ opacity:1; transform:none; }

@media (max-width:600px){
  .y70-stair__step{ flex-basis:clamp(140px,46vw,162px); }
  .y70-stair__name{ font-size:.82rem; }
}

/* ---------- Reward tiers (บริจาคครบ X → ของที่ระลึก) ---------- */
.y70-svw-tiers{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(272px,1fr));
  gap: clamp(14px,1.8vw,22px);
}
.y70-svw-tier{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--y70-radius); overflow:hidden; box-shadow:var(--y70-shadow);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.y70-svw-tier:hover{ transform:translateY(-4px); box-shadow:var(--y70-shadow-hover); border-color:var(--y70-ring); }
.y70-svw-tier__head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; color:#fff;
  background:linear-gradient(120deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000));
}
.y70-svw-tier__step{
  font-size:.72rem; font-weight:800; letter-spacing:.03em; white-space:nowrap;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34);
  padding:3px 10px; border-radius:999px;
}
.y70-svw-tier__amt{ font-size:.98rem; font-weight:700; }
.y70-svw-tier__amt b{ font-size:1.16rem; font-weight:900; }
.y70-svw-tier__items{ display:flex; flex-direction:column; gap:11px; padding:16px 18px 18px; }
.y70-svw-item{ display:flex; align-items:center; gap:12px; }
.y70-svw-item__img{
  flex:0 0 auto; width:48px; height:48px; border-radius:12px; overflow:hidden;
  background:#f1f2f5; border:1px solid var(--border); display:grid; place-items:center;
}
.y70-svw-item__img img{ width:100%; height:100%; object-fit:cover; }
.y70-svw-item__emoji{ font-size:1.5rem; line-height:1; }
.y70-svw-item__name{ font-weight:700; color:var(--dark); line-height:1.4; }

/* ---------- Gallery ---------- */
.y70-svw-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap: clamp(16px,1.8vw,24px);
}
.y70-svw-card{ display:flex; flex-direction:column; }
.y70-svw-card__media{ aspect-ratio:1/1; background:#f1f2f5; position:relative; }
.y70-svw-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.y70-svw-card__ph{ position:absolute; inset:0; display:grid; place-items:center; font-size:4rem; opacity:.55; pointer-events:none; }
.y70-svw-badge{
  position:absolute; left:12px; top:12px; z-index:2;
  font-size:.74rem; font-weight:800; padding:4px 11px; border-radius:999px;
  background:rgba(255,255,255,.94); border:1px solid var(--border);
}
.y70-svw-badge.is-ok{ color:#0a7d33; border-color:color-mix(in srgb,#0a7d33 30%,#fff); }
.y70-svw-badge.is-pre{ color:var(--primary); border-color:var(--y70-ring); }
.y70-svw-badge.is-out{ color:#8a8f98; }
.y70-svw-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.y70-svw-card__name{ margin:0; font-size:1.06rem; font-weight:800; color:var(--dark); line-height:1.4; }
.y70-svw-card__en{ font-size:.8rem; color:var(--muted); margin-top:-2px; }
.y70-svw-card__tagline{ margin:0; font-size:.9rem; color:#52575f; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.y70-svw-card__vars{ margin-top:auto; padding-top:11px; display:flex; flex-direction:column; gap:8px; }
.y70-svw-varrow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.y70-svw-varlabel{ font-size:.76rem; font-weight:700; color:var(--muted); min-width:26px; }
.y70-svw-chip{
  font-size:.76rem; font-weight:700; color:var(--primary-600);
  background:color-mix(in srgb, var(--primary) 7%, #fff);
  border:1px solid var(--y70-ring); padding:3px 9px; border-radius:999px;
}
.y70-svw-chip--more{
  color:var(--muted); background:transparent; border-color:var(--border);
}

/* The maroon CTA band is the last block before the footer, so drop the footer's
   global 40px margin-top here — that white gap is invisible on pages whose last
   section is already light (news/results) but shows under the maroon band. */
.y70-souvenir-page .y70-foot{ margin-top:0; }

@media (max-width:640px){
  .y70-svw-grid{ grid-template-columns:repeat(2,1fr); }
  .y70-svw-card__body{ padding:13px 13px 15px; }
  .y70-svw-card__name{ font-size:.98rem; }
}

/* ---------- Clickable card affordance ---------- */
.y70-svw-card{ cursor:pointer; }
.y70-svw-card:focus-visible{ outline:3px solid var(--y70-ring); outline-offset:2px; }
.y70-svw-card__more{ margin-top:10px; align-self:flex-start; font-size:.82rem; font-weight:800; color:var(--primary);
  display:inline-flex; gap:5px; align-items:center; transition:gap .2s; }
.y70-svw-card:hover .y70-svw-card__more{ gap:9px; }

/* =========================================================================
   Detail popup (click a card) — image gallery + colour/size picks + size chart
   ========================================================================= */
.y70-svw-modal[hidden]{ display:none; }
.y70-svw-modal{ position:fixed; inset:0; z-index:100050; display:grid; place-items:center; padding:20px; }
.y70-svw-modal__overlay{ position:absolute; inset:0; background:rgba(20,18,22,.62); }
.y70-svw-modal__dialog{
  position:relative; z-index:1; width:min(900px,100%); max-height:90vh; overflow:auto;
  background:var(--card); border-radius:var(--y70-radius); box-shadow:0 24px 60px rgba(0,0,0,.32);
  animation:y70-svw-pop .22s ease;
}
@keyframes y70-svw-pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.y70-svw-modal__x{
  position:absolute; right:12px; top:12px; z-index:3; width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color:var(--dark); font-size:1.5rem; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.y70-svw-modal__x:hover{ background:#fff; }
.y70-svw-modal__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.y70-svw-modal__media{ background:#f1f2f5; padding:22px; display:flex; }
.y70-svw-mgal{ width:100%; display:flex; flex-direction:column; gap:12px; }
.y70-svw-mgal__main{ aspect-ratio:1/1; background:#fff; border-radius:14px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--border); }
.y70-svw-mgal__main img{ width:100%; height:100%; object-fit:cover; }
.y70-svw-mgal__ph{ font-size:4rem; opacity:.4; }
.y70-svw-mgal__thumbs{ display:flex; gap:8px; flex-wrap:wrap; }
.y70-svw-mgal__thumb{ width:56px; height:56px; padding:0; border-radius:10px; overflow:hidden; border:2px solid transparent; background:#fff; cursor:pointer; }
.y70-svw-mgal__thumb img{ width:100%; height:100%; object-fit:cover; }
.y70-svw-mgal__thumb.is-active{ border-color:var(--primary); }
.y70-svw-modal__info{ padding:26px 28px 28px; display:flex; flex-direction:column; gap:10px; }
.y70-svw-modal__info .y70-svw-badge{ position:static; align-self:flex-start; }
.y70-svw-modal__name{ margin:2px 0 0; font-size:1.5rem; font-weight:900; color:var(--dark); line-height:1.3; }
.y70-svw-modal__en{ font-size:.92rem; color:var(--muted); }
.y70-svw-modal__tag{ margin:4px 0 0; color:#52575f; line-height:1.7; }
.y70-svw-modal__detail{ font-size:.94rem; color:#52575f; line-height:1.8; }
.y70-svw-modal__detail p{ margin:0 0 .6em; }
.y70-svw-mrow{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-top:4px; }
.y70-svw-mrow__label{ font-size:.86rem; font-weight:800; color:var(--dark); min-width:34px; padding-top:6px; }
.y70-svw-mchips{ display:flex; gap:8px; flex-wrap:wrap; }
.y70-svw-mchip{
  font-size:.86rem; font-weight:700; color:var(--dark); background:var(--card);
  border:1.5px solid var(--border); padding:6px 14px; border-radius:999px; cursor:pointer; transition:.15s;
}
.y70-svw-mchip:hover{ border-color:var(--primary); }
.y70-svw-mchip.is-on{ background:var(--primary); color:#fff; border-color:var(--primary); }
/* unavailable (hidden combos already excluded server-side; this is paused/out-of-stock) —
   still shown for accuracy, same treatment as the gift-claim page's chips */
.y70-svw-mchip.is-oos{ opacity:.45; text-decoration:line-through; }
.y70-svw-mchip.is-oos:hover{ border-color:var(--border); }
.y70-svw-mchart{ margin-top:8px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.y70-svw-mchart__head{ background:color-mix(in srgb,var(--primary) 7%,#fff); padding:9px 14px; font-weight:800; color:var(--primary); font-size:.9rem; }
.y70-svw-mchart__head span{ font-weight:600; color:var(--muted); font-size:.8rem; }
.y70-svw-mchart__tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.y70-svw-mchart__tbl th, .y70-svw-mchart__tbl td{ padding:8px 14px; text-align:center; border-top:1px solid var(--border); }
.y70-svw-mchart__tbl th{ background:#fafafa; color:var(--muted); font-weight:700; }
.y70-svw-mchart__tbl td:first-child{ font-weight:800; color:var(--dark); }
.y70-svw-mchart__tbl tr.is-on td{ background:color-mix(in srgb,var(--primary) 12%,#fff); }
.y70-svw-modal__cta{ margin-top:14px; align-self:flex-start; }
body.y70-souv-modal-open{ overflow:hidden; }

@media (max-width:720px){
  .y70-svw-modal__grid{ grid-template-columns:1fr; }
  .y70-svw-modal__media{ padding:16px; }
  .y70-svw-modal__info{ padding:18px 18px 22px; }
  .y70-svw-modal__name{ font-size:1.28rem; }
}