/* ==========================================================================
   STRUGGLE ROACH · 子页面组件（How It Works / Our Story / For Artists / Q&A）
   --------------------------------------------------------------------------
   结构依据子页面设计稿（子How it work / 子Our story / 子For artist / 子Q&A，1920px 宽）：
     ① 页面 Hero   深色底 + 左侧标题/正文/按钮 + 右侧满幅图
     ② 图文段      浅米/深棕交替底 + 左图右文（或右图左文）
     ③ 满幅图段    标题副标居中 + 满幅大图
   配色沿用首页：深棕 #552D0A / 米色 #ECD9CA / 近黑 #14100E
   ========================================================================== */

/* ===================== ① 页面 Hero ===================== */
.sr2-phero { background: var(--sr-ink); overflow: hidden; }
.sr2-phero-grid { display: grid; grid-template-columns: 1fr; }
.sr2-phero-text {
  order: 2; padding: 44px var(--sr-pad) 48px;
  max-width: var(--sr-maxw); margin: 0 auto; width: 100%;
}
.sr2-phero-media { order: 1; position: relative; overflow: hidden; background: #0E0E0E; aspect-ratio: 16 / 10; }
.sr2-phero-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; display: block; }
.sr2-phero-h1 {
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.02em;
  font-weight: 700; margin: 0 0 16px; color: var(--sr-white); max-width: 15ch;
}
.sr2-phero-text .sr2-lead { color: rgba(255,255,255,.82); margin-bottom: 26px; max-width: 44ch; }
.sr2-phero--light .sr2-phero-h1 { color: var(--sr-brown); }
.sr2-phero--light .sr2-phero-text .sr2-lead { color: rgba(85,45,10,.8); }
.sr2-phero--light { background: var(--sr-cream-2); }

@media (min-width: 900px) {
  .sr2-phero-grid { grid-template-columns: 44% 56%; align-items: stretch; min-height: 540px; }
  .sr2-phero-text {
    order: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 64px 48px 64px var(--sr-pad); max-width: none; margin: 0;
  }
  .sr2-phero-media { order: 2; aspect-ratio: auto; }
}

/* ===================== ② 图文段 ===================== */
.sr2-psplit { padding: var(--sr2-section) 0; }
.sr2-psplit--cream { background: var(--sr-cream); }
.sr2-psplit--brown { background: var(--sr-brown); }
.sr2-psplit--dark  { background: var(--sr-ink); }
.sr2-psplit--brown .sr2-h2, .sr2-psplit--brown .sr2-lead,
.sr2-psplit--dark  .sr2-h2, .sr2-psplit--dark  .sr2-lead { color: #fff; }
.sr2-psplit--brown .sr2-lead, .sr2-psplit--dark .sr2-lead { color: rgba(255,255,255,.82); }

.sr2-psplit__head { text-align: center; max-width: 1100px; margin: 0 auto 44px; padding: 0 var(--sr-pad); }
.sr2-psplit__head .sr2-h2 { font-size: clamp(24px, 2.8vw, 34px); }

.sr2-psplit-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 900px) {
  .sr2-psplit-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .sr2-psplit-grid--rev > .sr2-psplit-media { order: 2; }
}
.sr2-psplit-media { overflow: hidden; background: rgba(0,0,0,.06); }
.sr2-psplit-media img { width: 100%; height: auto; display: block; }
.sr2-psplit-text p { font-size: var(--sr-fs-body); line-height: 1.8; margin: 0 0 16px; color: inherit; opacity: .92; }
.sr2-psplit-text p:last-child { margin-bottom: 0; }
.sr2-psplit--cream .sr2-psplit-text p,
.sr2-psplit--light .sr2-psplit-text p { color: rgba(85,45,10,.86); }
.sr2-psplit-text strong { font-weight: 700; }

/* 手写体签名（Our Story 的 Our Story / Better Skin. Better Tattoo.） */
.sr2-sign {
  font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; color: var(--sr-ink);
  margin: 0 0 6px; font-weight: 400;
}
.sr2-sign--light { color: var(--sr-brown); }
.sr2-sign-rule { width: 84px; height: 3px; background: var(--sr-amber); margin: 0 0 22px; }

/* 成分小表（Our Story 右栏） */
.sr2-ing { margin-top: 22px; border-top: 1px solid rgba(85,45,10,.2); padding-top: 18px; }
.sr2-ing__row { display: grid; grid-template-columns: 78px 1fr; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(85,45,10,.12); }
.sr2-ing__k { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sr-amber-2); font-weight: 700; }
.sr2-ing__v { font-size: 12.5px; line-height: 1.6; color: rgba(85,45,10,.84); }

/* ===================== ③ DAY 1/7/15 对比组（How It Works） ===================== */
.sr2-days { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 900px) { .sr2-days { grid-template-columns: 1fr 1fr; gap: 48px; } }
.sr2-day__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.sr2-day__shot { position: relative; overflow: hidden; background: rgba(255,255,255,.08); aspect-ratio: 3 / 4; }
.sr2-day__shot img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.sr2-day__tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--sr-ink); color: #fff; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; padding: 5px 11px;
}
.sr2-day__txt { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.86); margin: 0; }
.sr2-day__txt strong { display: block; color: #fff; font-weight: 700; margin-bottom: 4px; }
/* 缺图占位：仅描边，不伪造画面 */
.sr2-day__shot--empty {
  border: 1px dashed rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
}
.sr2-day__shot--empty::after {
  content: attr(data-ph); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}