/* Participant photo carousel preview. Existing page behavior remains untouched. */
.participant-carousel {
  width: 100%;
}

.participant-carousel-viewport {
  overflow: hidden;
  border-radius: 18px;
  background: #dce8df;
}

.participant-carousel-track {
  display: flex;
  transition: transform 1.05s cubic-bezier(.2, .75, .2, 1);
  will-change: transform;
}

.participant-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.participant-collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "a a b"
    "c d e"
    "f g h"
    "f i i";
  gap: 7px;
  overflow: hidden;
  background: #dce8df;
  box-shadow: none;
}

.participant-photo {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #dce8df;
  position: relative;
}

.participant-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.participant-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.photo-01 { grid-area: a; }
.photo-03 { grid-area: b; }
.photo-02 { grid-area: c; }
.photo-05 { grid-area: d; }
.photo-06 { grid-area: e; }
.photo-07 { grid-area: f; }
.photo-08 { grid-area: g; }
.photo-09 { grid-area: h; }
.photo-04 { grid-area: i; }

.photo-01 img { object-position: center 48%; }
.photo-02 img { object-position: center 38%; }
.photo-03 img { object-position: center 28%; }
.photo-05 img { object-position: center 42%; }
.photo-06 img { object-position: center 22%; }
.photo-07 img { object-position: center 35%; }
.photo-08 img { object-position: center 34%; }
.photo-09 img { object-position: center 36%; }
.photo-04 img { object-position: center 48%; }

.set02-photo-07 { grid-area: a; }
.set02-photo-01 { grid-area: b; }
.set02-photo-02 { grid-area: c; }
.set02-photo-03 { grid-area: d; }
.set02-photo-04 { grid-area: e; }
.set02-photo-06 { grid-area: f; }
.set02-photo-09 { grid-area: g; }
.set02-photo-05 { grid-area: h; }
.set02-photo-08 { grid-area: i; }

.set02-photo-07 img { object-position: center 51%; }
.set02-photo-01 img { object-position: center 48%; }
.set02-photo-02 img { object-position: center 35%; }
.set02-photo-03 img { object-position: center 35%; }
.set02-photo-04 img { object-position: center 34%; }
.set02-photo-06 img { object-position: center 38%; }
.set02-photo-09 img { object-position: center 32%; }
.set02-photo-05 img { object-position: center 52%; }
.set02-photo-08 img { object-position: center 50%; }

.set03-photo-03 { grid-area: a; }
.set03-photo-04 { grid-area: b; }
.set03-photo-01 { grid-area: c; }
.set03-photo-05 { grid-area: d; }
.set03-photo-07 { grid-area: e; }
.set03-photo-02 { grid-area: f; }
.set03-photo-06 { grid-area: g; }
.set03-photo-08 { grid-area: h; }
.set03-photo-09 { grid-area: i; }

.set03-photo-03 img { object-position: center 50%; }
.set03-photo-04 img { object-position: center 34%; }
.set03-photo-01 img { object-position: center 55%; }
.set03-photo-05 img { object-position: center 35%; }
.set03-photo-07 img { object-position: center 40%; }
.set03-photo-02 img { object-position: center 48%; }
.set03-photo-06 img { object-position: center 40%; }
.set03-photo-08 img { object-position: center 43%; }
.set03-photo-09 img { object-position: center 52%; }

/* === set-04 =========================================================
   On the live page emerald.css overrides the collage to an even 3x3 grid
   (grid-template-areas:none; .participant-photo{grid-area:auto}), so the
   grid-area rules below are only a fallback for the 4-row layout.
   Real positioning comes from DOM order in index.html; head framing is
   controlled solely by object-position (object-fit is cover).
   set-04 = batch-03 "งาน บคด" (ฟาง) = ชุดที่ 4 (เพิ่ม 18 ก.ย. 2569)
   ================================================================== */
.set04-photo-01 { grid-area: a; }
.set04-photo-04 { grid-area: i; }
.set04-photo-09 { grid-area: f; }
.set04-photo-05 { grid-area: b; }
.set04-photo-07 { grid-area: c; }
.set04-photo-06 { grid-area: d; }
.set04-photo-03 { grid-area: e; }
.set04-photo-08 { grid-area: g; }
.set04-photo-02 { grid-area: h; }

.set04-photo-01 img { object-position: 64% 40%; }
.set04-photo-05 img { object-position: 48% 25%; }
.set04-photo-07 img { object-position: 45% 0%; }
.set04-photo-04 img { object-position: 48% 45%; }
.set04-photo-09 img { object-position: 56% 33%; }
.set04-photo-06 img { object-position: 65% 32%; }
.set04-photo-03 img { object-position: 50% 80%; }
.set04-photo-08 img { object-position: 50% 38%; }
.set04-photo-02 img { object-position: 62% 6%; }

/* === set-05 (batch-02 "bas 001") — same note as the set-04 header above === */
.set05-photo-02 { grid-area: a; }
.set05-photo-03 { grid-area: i; }
.set05-photo-09 { grid-area: f; }
.set05-photo-07 { grid-area: b; }
.set05-photo-04 { grid-area: c; }
.set05-photo-06 { grid-area: d; }
.set05-photo-05 { grid-area: e; }
.set05-photo-08 { grid-area: g; }
.set05-photo-01 { grid-area: h; }

.set05-photo-09 img { object-position: 38% 52%; }
.set05-photo-07 img { object-position: 49% 22%; }
.set05-photo-04 img { object-position: 44% 24%; }
.set05-photo-06 img { object-position: 62% 0%; }
.set05-photo-05 img { object-position: 50% 16%; }
.set05-photo-08 img { object-position: 81% 48%; }
.set05-photo-01 img { object-position: 22% 34%; }
.set05-photo-02 img { object-position: 76% 22%; }
.set05-photo-03 img { object-position: 50% 50%; }

/* === set-06 (batch-01 "chuan 003") — เดิมเป็น set-04 ย้ายเลขชุดเมื่อ 18 ก.ย. 2569 ===
   On the live page emerald.css overrides the collage to an even 3x3 grid
   (grid-template-areas:none; .participant-photo{grid-area:auto}), so the
   grid-area rules below are only a fallback for the 4-row layout.
   Real positioning comes from DOM order in index.html; head framing is
   controlled solely by object-position (object-fit is cover).
   ================================================================== */
.set06-photo-09 { grid-area: a; }
.set06-photo-07 { grid-area: b; }
.set06-photo-05 { grid-area: f; }
.set06-photo-01 { grid-area: c; }
.set06-photo-04 { grid-area: d; }
.set06-photo-03 { grid-area: e; }
.set06-photo-08 { grid-area: g; }
.set06-photo-02 { grid-area: h; }
.set06-photo-06 { grid-area: i; }

.set06-photo-01 img { object-position: 54% 44%; }
.set06-photo-04 img { object-position: 52% 30%; }
.set06-photo-03 img { object-position: 46% 50%; }
.set06-photo-08 img { object-position: 52% 48%; }
.set06-photo-07 img { object-position: 52% 48%; }
.set06-photo-05 img { object-position: 51% 30%; }
.set06-photo-09 img { object-position: 43% 42%; }
.set06-photo-02 img { object-position: 48% 34%; }
.set06-photo-06 img { object-position: 49% 20%; }



.participant-carousel-controls {
  display: grid;
  grid-template-columns: 34px auto 1fr 34px;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 0;
  color: #dce7d8;
}

.participant-carousel-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  border: 1px solid rgba(220, 231, 216, .38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.participant-carousel-arrow:hover {
  background: rgba(255, 255, 255, .17);
}

.participant-carousel-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.participant-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(220, 231, 216, .38);
  transition: width .35s ease, background .35s ease;
}

.participant-carousel-dots button.is-active {
  width: 25px;
  background: #f3ae7c;
}

.participant-carousel-status {
  justify-self: end;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(220, 231, 216, .75);
}

.participant-carousel-status strong {
  color: #fff;
}

.wellness-art:hover .participant-photo img {
  transform: scale(1.025);
}

@media (max-width: 700px) {
  .participant-collage { gap: 5px; }
  .wellness-art:hover .participant-photo img { transform: none; }
  .participant-carousel-controls { padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .participant-photo img { transition: none; }
  .participant-carousel-track { transition: none; }
  .participant-carousel-dots button { transition: none; }
}

/* === set-07 — ชุดที่ 7 ปรับใหม่ 20 ก.ย. 2569: ชุดรวม 3 คน (กฎ 039 batch-04 ×3 · Noky batch-12 ×3 · โฟลเดอร์อร ×3; slot 03 = F70 ตั้งแต่ 21 ก.ย.) ===
   Replaces the 9-photo solo set of กฎ (owner's decision 20 Sep 2026: gallery stays at 11 sets,
   new submissions are folded into set 7 as a 3-person mix). Files are named by slot (01–09 =
   DOM order), not by original number — see photo-submissions-20260918/processed/set-07-recut/.
   Latin-square layout so the same person is never side-by-side or stacked:
     row 1: กฎ · Noky · อร  |  row 2: อร · กฎ · Noky  |  row 3: Noky · อร · กฎ
   On the live page emerald.css overrides the collage to an even 3x3 grid
   (grid-template-areas:none; .participant-photo{grid-area:auto}), so the
   grid-area rules below are only a fallback for the 4-row layout.
   Real positioning comes from DOM order in index.html; head framing is
   controlled solely by object-position (object-fit is cover). All 9 photos are
   portrait (0.56–0.83), narrower than every cell ratio (1.061 / 1.205 / 0.897),
   so only the Y value has a visible effect; X is kept at the face centre.
   ================================================================== */
.set07-photo-01 { grid-area: a; }
.set07-photo-02 { grid-area: b; }
.set07-photo-03 { grid-area: c; }
.set07-photo-04 { grid-area: d; }
.set07-photo-05 { grid-area: e; }
.set07-photo-06 { grid-area: f; }
.set07-photo-07 { grid-area: g; }
.set07-photo-08 { grid-area: h; }
.set07-photo-09 { grid-area: i; }

.set07-photo-01 img { object-position: 50% 10%; }  /* กฎ batch-04/08 ดึงข้อยกเข่า — หัว y 12–24%, x 38–52% */
.set07-photo-02 img { object-position: 50% 40%; }  /* Noky batch-12/04 ต่อยมวย — หัว y 28–42%, x 46–60% (กำปั้น y 40–52%) */
.set07-photo-03 img { object-position: 50% 40%; }  /* อร S__37822562 (F70) เซลฟี่กระจกในยิม 1311×1600 — หัว y 22–40%, x 32–50% (แทน N54 ตามคำสั่งเจ้าของ 21 ก.ย.) */
.set07-photo-04 img { object-position: 50% 25%; }  /* อร N62 เสื้อส้ม (720×1280) — หัว y 20–32%, x 38–52% */
.set07-photo-05 img { object-position: 50% 60%; }  /* กฎ batch-04/02 วิดพื้น — หัว y 30–58%, x 35–65% */
.set07-photo-06 img { object-position: 50% 10%; }  /* Noky batch-12/06 ยางยืดเหนือหัว — หัว y 19–29%, x 40–52% (มือ y 8%) */
.set07-photo-07 img { object-position: 50% 55%; }  /* Noky batch-12/02 kettlebell — หัว y 40–52%, x 42–56% */
.set07-photo-08 img { object-position: 50% 45%; }  /* อร N58 เซลฟี่กลางคืน (1164×1406) — หัว y 28–65%, x 45–75% */
.set07-photo-09 img { object-position: 50% 45%; }  /* กฎ batch-04/03 ลู่วิ่ง — หัว y 25–68%, x 5–40% */

/* === set-08 (batch-06 "ฟิตๆ" / หนึ่ง ID 002) — ชุดที่ 8 (เพิ่ม 20 ก.ย. 2569) ===
   Same rules as set-07: the live grid is an even 3x3 (emerald.css), DOM order
   sets the position, and head framing comes only from object-position.
   Three photos (05, 08, 09) are landscape and wider than every cell ratio, so
   for those only the X value has a visible effect; the six portrait photos are
   narrower than every cell, so only Y matters.
   ================================================================== */
.set08-photo-03 { grid-area: a; }
.set08-photo-08 { grid-area: b; }
.set08-photo-01 { grid-area: c; }
.set08-photo-05 { grid-area: d; }
.set08-photo-02 { grid-area: e; }
.set08-photo-09 { grid-area: f; }
.set08-photo-06 { grid-area: g; }
.set08-photo-07 { grid-area: h; }
.set08-photo-04 { grid-area: i; }

.set08-photo-03 img { object-position: 52% 0%; }   /* หัว/ใบหน้าอยู่ y 13–26% จากบน, x 46–58% */
.set08-photo-08 img { object-position: 54% 37%; }  /* แนวนอน — หัว x 45–58%, y 24–50% */
.set08-photo-01 img { object-position: 52% 0%; }   /* หัว/ใบหน้าอยู่ y 19–37% จากบน, x 43–61% */
.set08-photo-05 img { object-position: 54% 22%; }  /* แนวนอน — หัว x 45–58%, y 7–37% */
.set08-photo-02 img { object-position: 53% 0%; }   /* หัว/ใบหน้าอยู่ y 11–35% จากบน, x 43–63% */
.set08-photo-09 img { object-position: 72% 46%; }  /* แนวนอน — หัว x 49–61%, y 38–53% · X 72% ให้เห็นตัวครบบนมือถือ */
.set08-photo-06 img { object-position: 69% 0%; }   /* หัว/ใบหน้าอยู่ y 8–24% จากบน, x 62–76% */
.set08-photo-07 img { object-position: 49% 0%; }   /* หัว/ใบหน้าอยู่ y 5–17% จากบน, x 42–56% */
.set08-photo-04 img { object-position: 52% 0%; }   /* หัว/ใบหน้าอยู่ y 12–26% จากบน, x 45–58% */

/* === set-09 (โย่ง ID 040 / แม็ค ID 062 / เส ID 060 — คนละ 3 ภาพ) — ชุดที่ 9 (เพิ่ม 20 ก.ย. 2569) ===
   File numbers here are grid slots 1–9, not the sender's photo numbers
   (mapping in photo-submissions-20260918/processed/layout-proposal.md).
   Slots 06 and 07 are 722x1600 (ratio 0.451): the tablet cell shows only 37 %
   of the height, so their Y values are the only ones that keep the head inside.
   ================================================================== */
.set09-photo-01 { grid-area: a; }
.set09-photo-02 { grid-area: b; }
.set09-photo-03 { grid-area: c; }
.set09-photo-04 { grid-area: d; }
.set09-photo-05 { grid-area: e; }
.set09-photo-06 { grid-area: f; }
.set09-photo-07 { grid-area: g; }
.set09-photo-08 { grid-area: h; }
.set09-photo-09 { grid-area: i; }

.set09-photo-01 img { object-position: 49% 6%; }   /* แม็ค batch-07/04 — หัว y 20–40%, x 35–63% */
.set09-photo-02 img { object-position: 46% 47%; }  /* เส batch-09/09 — หัว y 33–65%, x 33–60% */
.set09-photo-03 img { object-position: 45% 30%; }  /* โย่ง batch-08/05 — หัว y 21–58%, x 22–68% */
.set09-photo-04 img { object-position: 54% 68%; }  /* โย่ง batch-08/08 — หัว y 47–62%, x 45–62% */
.set09-photo-05 img { object-position: 51% 9%; }   /* แม็ค batch-07/07 — หัว y 30–39%, x 44–58% */
.set09-photo-06 img { object-position: 26% 49%; }  /* เส batch-09/01 — หัว y 33–66%, x 0–52% (ช่วงใช้ได้ 49–50%) */
.set09-photo-07 img { object-position: 44% 43%; }  /* เส batch-09/04 — หัว y 29–62%, x 15–72% (ช่วงใช้ได้ 42–43%) */
.set09-photo-08 img { object-position: 48% 5%; }   /* โย่ง batch-08/02 — หัว y 14–44%, x 25–70% (ไฟล์ 312×484) */
.set09-photo-09 img { object-position: 46% 1%; }   /* แม็ค batch-07/08 — หัว y 27–36%, x 40–52% */

/* === set-10 (หน่อย ID 059 / หญิง A / หญิง U·K·F — 3 กลุ่ม กลุ่มละ 3 ภาพ) — ชุดที่ 10 (เพิ่ม 20 ก.ย. 2569) ===
   File numbers here are grid slots 1–9, not the sender's photo numbers
   (mapping in photo-submissions-20260918/processed/layout-proposal.md, set-10).
   Latin square: rows ก·ข·ค / ค·ก·ข / ข·ค·ก. Slots 1, 5, 9 are หน่อย's photos
   03, 07, 08 in her requested order. Slot 09 is the only landscape frame
   (1440x943): the mobile cell shows 58.7 % of its width while the eight
   faces span 54 %, so its X value is the only one that keeps them inside.
   ================================================================== */
.set10-photo-01 { grid-area: a; }
.set10-photo-02 { grid-area: b; }
.set10-photo-03 { grid-area: c; }
.set10-photo-04 { grid-area: d; }
.set10-photo-05 { grid-area: e; }
.set10-photo-06 { grid-area: f; }
.set10-photo-07 { grid-area: g; }
.set10-photo-08 { grid-area: h; }
.set10-photo-09 { grid-area: i; }

.set10-photo-01 img { object-position: 50% 50%; }  /* หน่อย batch-05/03 — ภาพหมู่ 4 หน้า y 30–70%, x 5–90% (ช่วงใช้ได้ tablet 48–52%) */
.set10-photo-02 img { object-position: 50% 84%; }  /* หญิง A N100 — หัว y 55–64%, x 62–76% */
.set10-photo-03 img { object-position: 50% 75%; }  /* หญิง F N29 — หัว y 45–56%, x 44–58% */
.set10-photo-04 img { object-position: 50% 40%; }  /* หญิง K เรือ อากาศ_17 — หัว y 25–35%, x 29–49% (ไฟล์ 640×1136) */
.set10-photo-05 img { object-position: 50% 20%; }  /* หน่อย batch-05/07 — ภาพหมู่ 5 หน้า y 23–47%, x 20–85% */
.set10-photo-06 img { object-position: 50% 85%; }  /* หญิง A N38 — หัว y 59–67%, x 44–57% */
.set10-photo-07 img { object-position: 50% 66%; }  /* หญิง A N71 — หัว y 38–47%, x 26–43% */
.set10-photo-08 img { object-position: 50% 60%; }  /* หญิง U S__37822563 — หัว y 29–43%, x 45–59% */
.set10-photo-09 img { object-position: 69% 40%; }  /* หน่อย batch-05/08 — แนวนอน 8 หน้า x 31–85%, y 27–51% (ช่วงใช้ได้ mobile 68–70%) */

/* === set-11 (หญิง G · R · Q · N · P · D · J · T · O — 9 คน 9 ภาพ จากโฟลเดอร์อร) — ชุดที่ 11 (เพิ่ม 20 ก.ย. 2569) ===
   File numbers here are grid slots 1–9, not the source photo numbers
   (mapping in photo-submissions-20260918/processed/layout-proposal.md, set-11).
   Checkerboard: full-body / activity frames on 1, 3, 5, 7, 9; close selfies on
   2, 4, 6, 8 so no two close-ups touch. All nine are portrait, so only the
   Y value matters; slots 2 and 4 have a face that fills 55 % of the frame and
   the tablet cell (1.205) shows 62 %, hence their narrow safe ranges.
   ================================================================== */
.set11-photo-01 { grid-area: a; }
.set11-photo-02 { grid-area: b; }
.set11-photo-03 { grid-area: c; }
.set11-photo-04 { grid-area: d; }
.set11-photo-05 { grid-area: e; }
.set11-photo-06 { grid-area: f; }
.set11-photo-07 { grid-area: g; }
.set11-photo-08 { grid-area: h; }
.set11-photo-09 { grid-area: i; }

.set11-photo-01 img { object-position: 50% 55%; }  /* หญิง G N37 — U-Tapao Run หัว y 51–60%, x 45–55% */
.set11-photo-02 img { object-position: 50% 55%; }  /* หญิง R เรือ อากาศ_15 — เซลฟี่ใกล้ หน้า y 24–80% (ช่วงใช้ได้ tablet 54–57%) */
.set11-photo-03 img { object-position: 50% 33%; }  /* หญิง Q เรือ อากาศ_11 — จูงสุนัข หัว y 15–27%, x 41–51% */
.set11-photo-04 img { object-position: 50% 60%; }  /* หญิง N ธุรการ_2 — เซลฟี่ใกล้ หน้า y 27–82% (ช่วงใช้ได้ tablet 59–65%) */
.set11-photo-05 img { object-position: 50% 2%; }  /* หญิง P บคด_5 — หัวชิดขอบบน y 4–38% (ช่วงใช้ได้ 0–3%) */
.set11-photo-06 img { object-position: 50% 33%; }  /* หญิง D N20 — หมวก+หน้า y 22–60% (ช่วงใช้ได้ tablet 30–37%) */
.set11-photo-07 img { object-position: 50% 50%; }  /* หญิง J N50 — หัว y 42–55%, x 42–57% (ไฟล์ 640×1136) */
.set11-photo-08 img { object-position: 50% 70%; }  /* หญิง T เรือ อากาศ_9 — หัว y 40–66%, x 26–55% */
.set11-photo-09 img { object-position: 50% 60%; }  /* หญิง O บคด_3 — หัว y 30–42%, x 43–57% */

/* === Ten/eleven sets: wrap the dot row on phones (20 ก.ย. 2569, widened for set 11) ===
   With 10+ sets the one-row dot strip (8 px dots, 25 px active pill, 7 px gaps)
   squeezed the status column at 375/360 px so "ชุดที่ 10 / 10" broke onto two
   lines. Wrapping the dots into two rows gives the status its width back.
   With 11 dots, max-width 110 px always yields 6 + 5: six plain dots need
   83 px, five dots + the 25 px pill need 100 px, while a seventh item needs
   at least 98 + 15 = 113 px (7 plain) so it never fits — the first row is six
   whichever dot is active. (93 px, the ten-set value, gave 5 + 5 + 1.)
   Scoped to the same <=760 px breakpoint as the mobile cell ratio.
   ================================================================== */
@media (max-width: 760px) {
  .participant-carousel-dots {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 110px;
    row-gap: 6px;
  }
}