/* story-wall.css — Emerald fit layer for the Story Wall on the home page.
   Added 19 Sep 2026. Every rule is scoped under #story-wall so it can only
   affect the Story Wall section. The other session's story-preview.css and
   story-real-preview.css are loaded before this file and are NOT modified.
   Deleting this file returns the Story Wall to the standalone preview look. */

/* Sticky header is ~110px; match .community-section's scroll-margin-top. */
#story-wall { scroll-margin-top: 110px; }

/* Every other Emerald section heading is var(--serif); match it, and bring the
   display size closer to the rest of the page (other h2 are 27-32px). */
#story-wall .story-wall-heading h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
}

#story-wall .story-wall-intro p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
}

/* Emerald eyebrows sit at 9-10px with wide tracking. */
#story-wall .story-wall-heading .eyebrow {
  font-size: 9px;
  letter-spacing: .17em;
}

/* The giant decorative quote mark is scaled to a 88px heading; rescale it. */
#story-wall::before { top: -92px; font-size: 330px; }

/* Keep the vertical rhythm of the surrounding sections. */
#story-wall { margin-top: 48px; margin-bottom: 56px; }

@media (max-width: 760px) {
  #story-wall { margin-top: 32px; margin-bottom: 34px; }
  #story-wall .story-wall-heading h2 { font-size: 34px; }
  #story-wall::before { top: -54px; font-size: 190px; }
}

/* Tablet 841-980px: story-real-preview.css drops the grid to a single column at
   980px while the heading only stacks at 840px, so one card fills the whole
   837px rail and runs taller than the screen. Two columns for that band only. */
@media (min-width: 841px) and (max-width: 980px) {
  #story-wall .story-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Story Wall batch 2 — 20 Sep 2026: per-card fit overrides */
/* Copied verbatim from source/story-workbench-20260920/preview-batch2.html
   <style> (FB cards 076 071 075 028 057 046 056 044 052 067) and ig-cards.css
   (IG cards 051 025 050). 037 keeps its rules in story-real-preview.css (only
   its cover file changed). Same selectors as the workbench so the computed
   fit/position is identical to what the owner approved there. */

/* Batch 1 (076, 071, 075, 028) — scoped per ID, mirrors public/story-real-preview.css for the 13+037 cards */
.story-id-076 .story-photo, .story-id-071 .story-photo, .story-id-075 .story-photo, .story-id-028 .story-photo {
  min-height: 0; aspect-ratio: 4 / 5;
  background: radial-gradient(circle at 50% 30%, rgba(240, 206, 135, .18), transparent 55%), #0c2923;
}
.story-id-071 .story-photo img { object-fit: contain; object-position: center; }
/* 076 v2 (20 ก.ย. เจ้าของสั่ง): ปก media-01 ภาพ 5 คน → cover; selector เจาะจงกว่า .story-card:not(.story-card-featured) .story-photo img ใน story-preview.css */
.story-wall-grid .story-card.story-id-076 .story-photo img { object-fit: cover; object-position: 50% 72%; }
.story-id-075 .story-photo img, .story-id-028 .story-photo img { object-fit: cover; object-position: center 30%; }
@media (max-width: 980px) {
  .story-id-076 .story-photo, .story-id-071 .story-photo, .story-id-075 .story-photo, .story-id-028 .story-photo { aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
  .story-id-076 .story-photo, .story-id-071 .story-photo, .story-id-075 .story-photo, .story-id-028 .story-photo { min-height: 0; max-height: none; }
}
/* Batch 2 (057, 046, 056, 044, 052) — scoped per ID */
.story-id-057 .story-photo, .story-id-046 .story-photo, .story-id-056 .story-photo, .story-id-044 .story-photo, .story-id-052 .story-photo {
  min-height: 0; aspect-ratio: 4 / 5;
  background: radial-gradient(circle at 50% 30%, rgba(240, 206, 135, .18), transparent 55%), #0c2923;
}
/* 057: เฟรมจริงเป็นภาพแนวนอน 4:3 (ตัดเฉพาะแถบดำ letterbox ของ Reel) → กล่อง 4:3 ให้พอดีทั้งใบ ไม่ตัดหน้า/หมา/ข้อความ */
.story-id-057 .story-photo { aspect-ratio: 4 / 3; }
/* คลิป 9:16 → cover (selector เจาะจงกว่า .story-card:not(.story-card-featured) .story-photo img) · ภาพนิ่ง → contain */
.story-wall-grid .story-card.story-id-057 .story-photo img { object-fit: cover; object-position: 50% 50%; }
.story-wall-grid .story-card.story-id-046 .story-photo img { object-fit: cover; object-position: 50% 45%; }
.story-wall-grid .story-card.story-id-044 .story-photo img { object-fit: cover; object-position: 50% 22%; }
.story-wall-grid .story-card.story-id-056 .story-photo img,
.story-wall-grid .story-card.story-id-052 .story-photo img { object-fit: contain; object-position: center; }
@media (max-width: 980px) {
  .story-id-046 .story-photo, .story-id-056 .story-photo, .story-id-044 .story-photo, .story-id-052 .story-photo { aspect-ratio: 4 / 5; }
  .story-id-057 .story-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .story-id-057 .story-photo, .story-id-046 .story-photo, .story-id-056 .story-photo, .story-id-044 .story-photo, .story-id-052 .story-photo { min-height: 0; max-height: none; }
}
/* 067: ภาพนิ่งแนวนอนเกือบจัตุรัส (2048×1764) → กล่อง 1:1 แบบ 001 + contain */
.story-id-067 .story-photo { min-height: 0; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 30%, rgba(240, 206, 135, .18), transparent 55%), #0c2923; }
.story-wall-grid .story-card.story-id-067 .story-photo img { object-fit: contain; object-position: center; }
@media (max-width: 980px) { .story-id-067 .story-photo { aspect-ratio: 1 / 1; } }
@media (max-width: 520px) { .story-id-067 .story-photo { min-height: 0; max-height: none; } }

/* Instagram (051, 025, 050) — from ig-cards.css */
.story-id-051 .story-photo,
.story-id-025 .story-photo,
.story-id-050 .story-photo {
  min-height: 0;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 30%, rgba(240, 206, 135, .18), transparent 55%),
    #0c2923;
}

.story-id-051 .story-photo img,
.story-id-025 .story-photo img,
.story-id-050 .story-photo img {
  object-fit: contain;
  object-position: center;
}
/* ig-cards.css had no phone rules; these mirror what every other card gets from
   story-real-preview.css so the three IG boxes keep the 4:5 ratio at <=520px
   instead of being capped by story-preview.css's .story-photo { max-height: 410px }. */
@media (max-width: 980px) {
  .story-id-051 .story-photo, .story-id-025 .story-photo, .story-id-050 .story-photo { aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
  .story-id-051 .story-photo, .story-id-025 .story-photo, .story-id-050 .story-photo { min-height: 0; max-height: none; }
}

/* === Story Wall batch 2026-09-21 (010 ยัง, 021 ธี, 038 บอทอ, 048 เยียร์) — from source/story-workbench-final-20260921/story-cards.css === */
.story-id-010 .story-photo,
.story-id-021 .story-photo,
.story-id-038 .story-photo,
.story-id-048 .story-photo {
  min-height: 0;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 30%, rgba(240, 206, 135, .18), transparent 55%),
    #0c2923;
}

.story-wall-grid .story-card.story-id-010 .story-photo img {
  object-fit: cover;
  object-position: 50% 48%;
}

.story-wall-grid .story-card.story-id-021 .story-photo img,
.story-wall-grid .story-card.story-id-038 .story-photo img,
.story-wall-grid .story-card.story-id-048 .story-photo img {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 980px) {
  .story-id-010 .story-photo,
  .story-id-021 .story-photo,
  .story-id-038 .story-photo,
  .story-id-048 .story-photo {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 520px) {
  .story-id-010 .story-photo,
  .story-id-021 .story-photo,
  .story-id-038 .story-photo,
  .story-id-048 .story-photo {
    min-height: 0;
    max-height: none;
  }
}

/* === Unit-page posts (not in the contest) — added 21 Sep 2026 by owner's request === */
.story-id-unit01 .story-photo,
.story-id-unit02 .story-photo {
  min-height: 0;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 30%, rgba(240, 206, 135, .18), transparent 55%),
    #0c2923;
}
.story-wall-grid .story-card.story-id-unit01 .story-photo img { object-fit: contain; object-position: center; }
.story-wall-grid .story-card.story-id-unit02 .story-photo img { object-fit: cover; object-position: 50% 55%; }
.story-wall-grid .story-card.story-unit .story-person span { font-size: .78em; letter-spacing: 0; }
@media (max-width: 980px) {
  .story-id-unit01 .story-photo, .story-id-unit02 .story-photo { aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
  .story-id-unit01 .story-photo, .story-id-unit02 .story-photo { min-height: 0; max-height: none; }
}