/* =========================================================================
   Home add-on sections (history / news / results / souvenirs)
   Reuses theme tokens from main.css :root (--primary, --dark, --muted, ...).
   OOD: shared .y70-sec shell + skeleton + card primitives, reused per section.
   ========================================================================= */
:root{
  --y70-sec-pad: clamp(40px, 6vw, 88px);
  --y70-radius: 18px;
  --y70-radius-sm: 12px;
  --y70-shadow: 0 1px 4px rgba(42,44,47,.05);
  --y70-shadow-hover: 0 4px 12px rgba(42,44,47,.08);
  --y70-ring: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ---------- Section shell (reusable) ---------- */
.y70-sec{ padding: var(--y70-sec-pad) 0; position: relative; scroll-margin-top: 110px; }
.y70-sec--tint{ background:
   radial-gradient(1200px 400px at 100% -10%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%),
   var(--bg); }
.y70-sec--alt{ background: linear-gradient(180deg, #fff, var(--bg)); }

/* contain decorative cogs; keep real content above them */
.y70-sec{ overflow:hidden; }
.y70-sec > .y70-container{ position:relative; z-index:1; }
/* decorative gears (ฟันเฟือง) accenting each section's heading corner */
.y70-sec::before,
.y70-sec::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
  background:url(../images/gear_hero.svg) center/contain no-repeat;
}
.y70-sec::before{ right:-40px; top:-40px; width:180px; height:180px; opacity:.08; animation:y70-spin 42s linear infinite; }
.y70-sec::after{ right:108px; top:46px; width:82px; height:82px; opacity:.06; animation:y70-spin 24s linear infinite reverse; }

.y70-sec__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom: clamp(20px, 3vw, 36px);
}
.y70-sec__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--primary-600);
}
.y70-sec__eyebrow::before{ content:""; width:26px; height:2px; background:var(--primary-600); border-radius:2px; }
.y70-sec__title{
  margin:.25rem 0 0; line-height:1.18;
  font-size: clamp(1.4rem, 3.2vw, 2.15rem); font-weight:800; color:var(--dark);
}
.y70-sec__viewall{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-weight:700; color:var(--primary); text-decoration:none;
  padding:10px 16px; border:1px solid var(--y70-ring); border-radius:999px;
  transition: background .2s, color .2s, transform .2s;
}
.y70-sec__viewall:hover{ background:var(--primary); color:#fff; transform:translateY(-1px); }
.y70-sec__viewall .a{ transition: transform .2s; }
.y70-sec__viewall:hover .a{ transform: translateX(3px); }
.y70-sec__foot{ display:flex; justify-content:center; margin-top: clamp(18px,2.6vw,30px); }

/* ---------- Skeleton (shimmer) ---------- */
.y70-skel{ position:relative; overflow:hidden; background:#e9ebef; border-radius:var(--y70-radius-sm); }
.y70-skel::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: y70-shimmer 1.25s infinite;
}
@keyframes y70-shimmer{ 100%{ transform:translateX(100%); } }
.y70-sec.is-ready .y70-skel-host{ display:none !important; }
.y70-sec:not(.is-ready) .y70-real{ display:none !important; }

/* Image skeleton: shimmer behind <img> until it loads, then fade the image in. */
.y70-media{ position:relative; overflow:hidden; background:#e9ebef; }
.y70-media::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:y70-shimmer 1.25s infinite;
}
.y70-media.is-loaded::after, .y70-media.is-error::after{ display:none; }
.y70-media img{ opacity:0; transition:opacity .45s ease; }
.y70-media.is-loaded img{ opacity:1; }
.y70-media.is-error img{ opacity:0 !important; }
.y70-media.is-error::before{
  content:"ไม่มีรูป"; position:absolute; inset:0; display:grid; place-items:center;
  color:#aeb4bd; font-size:.85rem;
}

/* reveal on scroll (progressive) */
.y70-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.y70-reveal.is-in{ opacity:1; transform:none; }

/* =========================================================================
   SECTION 1 — History
   ========================================================================= */
.y70-history__grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px);
  align-items:center;
}
.y70-history__title{
  font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight:800; line-height:1.18;
  color:var(--dark); margin:.4rem 0 1rem;
}
.y70-history__title .hl{ color:var(--primary); }
.y70-history__body p{ color:#3c4047; line-height:1.85; margin:0 0 1rem; }
.y70-history__stats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.y70-stat{
  flex:1 1 130px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--y70-radius-sm); padding:16px 18px; box-shadow:var(--y70-shadow);
  position:relative; overflow:hidden;
}
.y70-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--primary),var(--primary-600)); }
.y70-stat__num{ font-size:1.7rem; font-weight:900; color:var(--primary); line-height:1; }
.y70-stat__label{ margin-top:6px; font-size:.86rem; color:var(--muted); }

.y70-history__media{ position:relative; }
.y70-history__photo{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--y70-radius);
  box-shadow:var(--y70-shadow); display:block;
}
.y70-history__media::after{ /* accent frame */
  content:""; position:absolute; inset:auto -14px -14px auto; width:62%; height:62%;
  border:3px solid var(--primary); border-radius:var(--y70-radius); z-index:-1; opacity:.5;
}
.y70-gear{ position:absolute; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 38%, color-mix(in srgb,var(--primary) 16%, transparent) 39% 52%, transparent 53%);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%);
  animation: y70-spin 26s linear infinite;
}
.y70-gear--a{ width:120px; height:120px; left:-44px; top:-30px; }
.y70-gear--b{ width:80px; height:80px; right:18%; bottom:-28px; animation-duration:18s; animation-direction:reverse; }
@keyframes y70-spin{ to{ transform:rotate(360deg); } }

/* =========================================================================
   Shared Swiper chrome (news + results)
   ========================================================================= */
.y70-swiper{ position:relative; padding-bottom:8px; }
.y70-swiper .swiper{
  overflow:hidden;
  /* cards flush to the left/right container edges; generous top/bottom breathing room */
  padding: 22px 0 34px;
}
.y70-swiper .swiper-slide{ height:auto; } /* equal-height slides */
.y70-swiper .swiper-pagination{ position:static; margin-top:4px; }
.y70-swiper .swiper-pagination-bullet{
  width:9px; height:9px; background:var(--border); opacity:1; transition:width .25s, background .25s;
}
.y70-swiper .swiper-pagination-bullet-active{ width:26px; border-radius:6px; background:var(--primary); }
.y70-swnav{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  background:var(--card); color:var(--primary); display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--y70-shadow); transition:transform .2s, background .2s, color .2s;
}
.y70-swnav:hover{ background:var(--primary); color:#fff; transform:scale(1.06); }
.y70-swnav.swiper-button-disabled{ opacity:.4; cursor:default; }
.y70-swiper__ctrl{ display:flex; gap:10px; }

/* card base */
.y70-card2{
  display:block; background:var(--card); border:1px solid var(--border);
  border-radius:var(--y70-radius); overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:var(--y70-shadow); transition:transform .25s, box-shadow .25s, border-color .25s;
  height:100%;
}
.y70-card2:hover{ transform:translateY(-4px); box-shadow:var(--y70-shadow-hover); border-color:var(--y70-ring); }
.y70-card2 .ph{ width:100%; background:linear-gradient(135deg,#eef0f3,#dfe3e8); display:grid; place-items:center; color:#aeb4bd; }
.y70-date{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); }
.y70-date::before{ content:"📅"; font-size:.82rem; filter:grayscale(1); opacity:.7; }

/* =========================================================================
   SECTION 2 — News (portrait POSTER carousel; center prominent, sides peek, loop)
   Aspect ratio 2:3 (poster). Driven by Swiper {base:'auto', centered:true}.
   ========================================================================= */
.y70-news-swiper .swiper{ padding: 26px 0 36px; }
.y70-news-swiper .swiper-slide{
  width: clamp(208px, 56vw, 272px);   /* poster width; slidesPerView:auto reads this */
  height: auto;
  opacity: .5;
  transform: scale(.86);
  transition: transform .45s ease, opacity .45s ease;
}
.y70-news-swiper .swiper-slide-active{ opacity: 1; transform: scale(1); }    /* centre = most prominent */

.y70-poster{
  display:block; background:var(--card); border:1px solid var(--border);
  border-radius: var(--y70-radius); overflow:hidden; text-decoration:none; color:inherit;
  box-shadow: var(--y70-shadow); transition: box-shadow .35s ease, border-color .35s ease;
}
.y70-news-swiper .swiper-slide-active .y70-poster{
  box-shadow: 0 18px 44px rgba(42,44,47,.20); border-color: var(--y70-ring);
}
.y70-poster__media{ position:relative; aspect-ratio: 210 / 297; background: color-mix(in srgb, var(--primary) 7%, #fff); }   /* <-- A4 portrait */
.y70-poster__media img{ width:100%; height:100%; object-fit:contain; display:block; }   /* fit whole image; letterbox fills with the tint */
.y70-poster__badge{
  position:absolute; left:12px; top:12px; background:var(--primary); color:#fff;
  font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:999px;
}
.y70-poster__body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:8px; }
.y70-poster__title{
  margin:0; font-size:1.04rem; font-weight:800; color:var(--dark); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- News feature: 70/30 split (desktop) → stacked (mobile) ---- */
.y70-news-feature__grid{
  display:grid; grid-template-columns: 68% 32%; gap: clamp(16px, 2.4vw, 36px); align-items:center;
}
.y70-news-feature__left{ min-width:0; }   /* let the swiper shrink inside the grid track */
.y70-news-feature .y70-news-swiper .swiper{ padding: 22px 0 30px; }

.y70-news-feature__detail{
  background:var(--card); border:1px solid var(--border); border-radius:var(--y70-radius);
  box-shadow:var(--y70-shadow); padding: clamp(20px, 2.2vw, 28px);
  display:flex; flex-direction:column;                 /* footer pins to bottom -> stable height */
  min-height: clamp(320px, 26vw, 400px);               /* fixed-size feel on desktop */
}
/* honour [hidden] even though the elements below set their own display */
.y70-news-feature [hidden]{ display:none !important; }
/* event group (status + big date) — stacked on their own lines */
.y70-nf__event{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:12px; }
.y70-nf__status{ display:inline-flex; align-items:center; font-size:.74rem; font-weight:800; padding:5px 12px; border-radius:999px; }
.y70-nf__status.is-primary{ background:color-mix(in srgb, var(--primary) 14%, #fff); color:var(--primary-600); }
.y70-nf__status.is-success{ background:color-mix(in srgb, var(--success) 20%, #fff); color:#0c7a57; }
.y70-nf__status.is-warning{ background:color-mix(in srgb, var(--warning) 26%, #fff); color:#946200; }
.y70-nf__status.is-muted{ background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.y70-nf__eventdate{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--primary);
  font-size:clamp(1.15rem, 1.5vw, 1.45rem); line-height:1.15; }     /* event date — emphasised */
.y70-nf__eventdate .ic{ width:1.05em; height:1.05em; flex:0 0 auto; }   /* inherits brand colour from the date */
.y70-nf__place .ic{ width:1.05em; height:1.05em; flex:0 0 auto; color:var(--primary); }   /* flat single-colour pin */
.y70-nf__title{
  margin:0 0 10px; font-size:clamp(1.02rem, 1.3vw, 1.28rem); font-weight:800; color:var(--dark); line-height:1.34;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;   /* <= 3 lines */
}
.y70-nf__rule{ display:block; width:46px; height:3px; border-radius:999px; margin:0 0 14px;
  background:linear-gradient(90deg, var(--primary), var(--primary-600)); }   /* small divider under title */
.y70-nf__excerpt{
  margin:0; color:#52575f; line-height:1.7; font-size:.94rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;   /* <= 2 lines */
}
.y70-nf__place{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:14px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 12px;
  font-size:.86rem; font-weight:700; color:var(--dark);
}
.y70-nf__place .ic{ filter:grayscale(.1); }
.y70-nf__foot{ margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.y70-nf__posted{ font-size:.8rem; color:var(--muted); }
.y70-nf__more{ white-space:nowrap; }

@media (max-width: 900px){
  .y70-news-feature__grid{ grid-template-columns: 1fr; gap: 6px; }   /* mobile version: stack */
  .y70-news-feature__detail{ min-height: 0; }                        /* let it size to content on mobile */
}

/* =========================================================================
   SECTION 3 — Results (image top + title + excerpt)
   ========================================================================= */
.y70-result-card{ display:flex; flex-direction:column; }
.y70-result-card__media{ aspect-ratio:16/10; background:#e9ebef; }
.y70-result-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.y70-result-card__body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.y70-result-card__area{ align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center;
  font-size:.72rem; font-weight:700; color:var(--primary-600);
  background: color-mix(in srgb, var(--primary) 8%, #fff); border:1px solid var(--y70-ring);
  padding:3px 10px; border-radius:999px; }
.y70-result-card__title{ font-size:1.08rem; font-weight:800; color:var(--dark); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.y70-result-card__excerpt{ font-size:.92rem; color:#52575f; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* =========================================================================
   SECTION 4 — Souvenirs (responsive grid)
   ========================================================================= */
.y70-souv__tierbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(120deg, color-mix(in srgb,var(--primary) 10%, #fff), var(--card));
  border:1px solid var(--y70-ring); border-radius:var(--y70-radius); padding:14px 18px; margin-bottom:26px;
}
.y70-souv__tierbar .ic{ font-size:1.4rem; }
.y70-souv__tierbar b{ color:var(--primary); }
.y70-souv__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:clamp(14px,1.6vw,22px); }
.y70-souv-card{ display:flex; flex-direction:column; }
.y70-souv-card__media{ aspect-ratio:1/1; background:#f1f2f5; position:relative; }
.y70-souv-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.y70-souv-card__tag{ position:absolute; right:10px; top:10px; background:rgba(255,255,255,.92);
  color:var(--primary); font-size:.72rem; font-weight:700; padding:4px 9px; border-radius:999px; border:1px solid var(--y70-ring); }
.y70-souv-card__body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.y70-souv-card__name{ font-weight:800; color:var(--dark); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.y70-souv-card__tagline{ font-size:.84rem; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.y70-souv-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:8px; }
.y70-souv-card__price{ font-weight:900; color:var(--primary); }
.y70-souv-card__cta{ font-size:.8rem; font-weight:700; color:#fff; background:var(--primary); padding:6px 12px; border-radius:999px; }

/* skeleton hosts */
.y70-skel--banner{ aspect-ratio:3/4; }
.y70-skel--line{ height:14px; margin:8px 0; }
.y70-skel--line.sm{ width:55%; }
.y70-skel--thumb{ aspect-ratio:16/10; }
.y70-skel--sq{ aspect-ratio:1/1; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 960px){
  .y70-history__grid{ grid-template-columns:1fr; }
  .y70-history__media{ order:-1; }
}
@media (max-width: 640px){
  .y70-sec__head{ align-items:flex-start; }
  .y70-sec::after{ display:none; }
  /* News poster: a touch wider so the centre poster reads well on phones */
  .y70-news-swiper .swiper-slide{ width: clamp(196px, 66vw, 248px); }
  .y70-souv__grid{ grid-template-columns:repeat(2, 1fr); }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .y70-skel::after, .y70-gear, .y70-sec::before, .y70-sec::after, .y70-media::after{ animation:none; }
  .y70-reveal{ opacity:1; transform:none; transition:none; }
}