/* coach-story.extra.css — v0.2-visual: NEW shared components (loaded AFTER coach-story.css and additions.css).
 * coach-story.css / .js / additions.css are NOT modified. Components: hero SNS, 3-column steps, powers cards,
 * stage question, vertical (Shorts) video + split, photo trio (never upscaled), long duo. */

/* ---- Hero: SNS to the right of the name (PC) / directly below (mobile) */
.rc-cs-hero__idrow{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
.rc-cs-hero__idrow .rc-cs-hero__who{margin-top:0}
@media (min-width:768px){.rc-cs-hero__idrow{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 28px}}
.rc-cs-sns{display:flex;gap:6px}
.rc-cs-sns__link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:50%;color:#fff;transition:background-color .25s,color .25s,border-color .25s}
.rc-cs-sns__link svg{width:20px;height:20px}
.rc-cs-sns__link:hover{background:#fff;color:var(--rc-navy);border-color:#fff}
.rc-cs-sns__t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Ch1: 3 steps */
@media (min-width:768px){.rc-cs-steps--three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Ch7: three powers as cards */
.rc-cs-steps--powers{gap:14px}
.rc-cs-steps.rc-cs-steps--powers li,.rc-cs-steps.rc-cs-steps--powers li:last-child{padding:24px 22px 28px;border:1px solid var(--rc-line);border-top:3px solid var(--rc-navy);border-radius:6px;background:var(--rc-mist)}
.rc-cs-steps--powers li::before{display:none}
.rc-cs-steps--powers .rc-cs-steps__k{font-size:40px;line-height:1.1;color:var(--rc-pin)}
.rc-cs-steps--powers .rc-cs-steps__t{margin-top:6px;font-size:20px}
.rc-cs-steps--powers .rc-cs-steps__d{margin-top:6px}
@media (min-width:768px){.rc-cs-steps--powers{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* ---- Ch3: question on a dark stage */
.rc-cs-question--stage{position:relative;margin-top:72px;padding:clamp(36px,6vw,72px) clamp(24px,5vw,64px);border:0;border-radius:8px;background:radial-gradient(120% 150% at 90% 0%,#1d3a63 0%,#0a1320 62%);color:#fff;overflow:hidden}
.rc-cs-question--stage::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rc-pin)}
.rc-cs-question--stage .rc-cs-eyebrow,.rc-cs-question--stage .rc-cs-question__pre{color:var(--rc-on-dark-soft)}
.rc-cs-question--stage .rc-cs-question__q{max-width:16em;font-size:clamp(26px,4vw,52px)}

/* ---- Ch4: long duo words */
.rc-cs-duo--long{font-size:clamp(44px,9.5vw,112px)}

/* ---- Photo trio: each image is capped at its native width (inline max-width), so nothing is upscaled */
.rc-cs-trio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:48px}
.rc-cs-trio__item{margin:0}
.rc-cs-trio__item:first-child{grid-column:1/-1}
.rc-cs-trio__item .rc-cs-photo{width:100%;aspect-ratio:4/5}
.rc-cs-trio__item:first-child .rc-cs-photo{aspect-ratio:1/1}
@media (min-width:640px){.rc-cs-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.rc-cs-trio__item:first-child{grid-column:auto}.rc-cs-trio__item:first-child .rc-cs-photo{aspect-ratio:4/5}}
.rc-cs-trio .rc-cs-figcap{margin-top:8px}

/* ---- Vertical (Shorts) video, reusable. Same facade JS as the 16:9 section (data-youtube-id + data-rc-video-trigger) */
.rc-cs-split--video{margin-top:44px}
.rc-cs-split--video .rc-cs-split__main>.rc-cs-body:first-child,.rc-cs-split--video .rc-cs-split__main>.rc-cs-prose:first-child{margin-top:0}
.rc-cs-split__side{order:-1}
.rc-cs-vshort{width:100%;max-width:280px}
.rc-cs-vshort .rc-cs-vshort__btn{aspect-ratio:9/16;background:#0a1320}
.rc-cs-vshort__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-cs-vshort .rc-cs-video__play{width:68px;height:68px;margin:-34px 0 0 -34px}
.rc-cs-vshort .rc-cs-video__play svg{width:24px;height:24px;margin-left:3px}
.rc-cs-vshort .rc-cs-video__iframe{aspect-ratio:9/16;border-radius:8px}
.rc-cs-vshort .rc-cs-figcap b{flex-basis:100%;font-weight:600;letter-spacing:.16em}
.rc-cs-vshort__chk{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
@media (min-width:768px){
.rc-cs-split--video{grid-template-columns:minmax(0,1fr) 280px;gap:56px}
.rc-cs-split--video .rc-cs-split__side{order:0;position:sticky;top:96px}}

/* ---- Hero photo below 800px wide (e.g. Hirasada 500px square): from tablet up, show it square at <=500px (no upscaling). Opt-in via .rc-cs-photo--lowres */
@media (min-width:768px){.rc-cs-hero__media .rc-cs-photo--hero.rc-cs-photo--lowres{aspect-ratio:1/1;max-width:500px;max-height:none}}
.rc-cs-steps--three{margin-top:72px}

/* ---- Approved photo plan (2026-10-18): photo variants, image label, photo beside text */
.rc-cs-photo--portrait{aspect-ratio:475/633}
.rc-cs-photo--square{aspect-ratio:1/1}
.rc-cs-photo--doc{aspect-ratio:852/396;background:#fff}
.rc-cs-photo--doc img{object-fit:contain}
.rc-cs-figcap__kind{display:inline-flex;align-items:center;padding:1px 8px;border:1px solid currentColor;border-radius:999px;font-size:11px;line-height:1.6;letter-spacing:.08em;opacity:.8}
.rc-cs-dark .rc-cs-figcap{color:var(--rc-on-dark-soft)}
.rc-cs-split--photo{margin-top:44px}
.rc-cs-split--photo .rc-cs-split__main>.rc-cs-body:first-child{margin-top:0}
.rc-cs-split__side>.rc-cs-figure{margin-top:0}
@media (min-width:768px){.rc-cs-split--photo{grid-template-columns:minmax(0,1fr) 280px;gap:56px}.rc-cs-split--photo .rc-cs-split__side{order:0}}
.rc-cs-photo--doc-mfca{aspect-ratio:785/543;background:#fff}
.rc-cs-photo--doc,.rc-cs-photo--doc-mfca{border:1px solid var(--rc-line)}
.rc-cs-dark .rc-cs-photo--doc,.rc-cs-dark .rc-cs-photo--doc-mfca{border-color:rgba(255,255,255,.18)}
.rc-cs-steps+.rc-cs-figure{margin-top:56px}

/* ---- Stats (big numbers with a simple bar comparison). First used: Hoshino Ch1 (3,000 hours / 8→38 points) */
.rc-cs-stats{display:grid;gap:12px;margin-top:48px}
@media (min-width:768px){.rc-cs-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.rc-cs-stat{padding:22px 22px 24px;border:1px solid var(--rc-line);border-top:3px solid var(--rc-navy);border-radius:6px;background:var(--rc-mist)}
.rc-cs-stat__k{font-size:14px;font-weight:700;line-height:1.6;color:var(--rc-ink-soft)}
.rc-cs-stat__v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .12em;margin-top:8px;font-weight:900;line-height:1}
.rc-cs-stat__v .rc-cs-num{font-size:clamp(48px,6vw,72px);letter-spacing:.02em;color:var(--rc-navy)}
.rc-cs-stat__v .rc-cs-stat__from{color:var(--rc-ink-soft)}
.rc-cs-stat__pre,.rc-cs-stat__u{font-size:18px;font-weight:700}
.rc-cs-stat__arrow{margin:0 .25em;font-size:28px;color:var(--rc-pin)}
.rc-cs-stat__bars{display:grid;gap:6px;margin-top:18px}
.rc-cs-stat__bar{position:relative;display:block;height:24px;border-radius:3px;background:#fff;overflow:hidden}
.rc-cs-stat__bar::before{content:'';position:absolute;top:0;bottom:0;left:0;width:calc(var(--v) * 100%);background:var(--rc-line-strong);transform-origin:left;transition:transform 1.2s var(--rc-ease) .35s}
.rc-cs-stat__bar.is-goal::before{background:var(--rc-navy)}
.rc-cs-stat__bar b{position:relative;padding-left:8px;font-size:12px;line-height:24px;color:var(--rc-ink)}
.rc-cs-stat__bar.is-goal b{color:#fff}
.rc-cs-story.ready:not(.reduce) .cs-rv-block:not(.is-in) .rc-cs-stat__bar::before{transform:scaleX(0)}

/* ---- Two photos side by side (stacked on mobile). First used: Hoshino Ch1 (notebook / pass notice) */
.rc-cs-pair{display:grid;gap:16px;margin-top:40px}
@media (min-width:640px){.rc-cs-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rc-cs-pair__item{margin:0}

/* ---- Hero SNS stays to the right of the name on PC even with 4+ links: the romanised name wraps under the name instead */
@media (min-width:768px){.rc-cs-hero__idrow{flex-wrap:nowrap}.rc-cs-hero__idrow .rc-cs-hero__who{flex:0 1 auto;min-width:0}.rc-cs-hero__idrow .rc-cs-sns{flex:none}}
.rc-cs-pair+.rc-cs-steps{margin-top:72px}

/* Local WP integration: lists, focus and empty optional sidebars stay scoped. */
.rc-cs-story .rc-cs-split{display:grid;align-items:start;gap:32px}
.rc-cs-story .rc-cs-split__main,.rc-cs-story .rc-cs-split__side{min-width:0}
.rc-cs-story .rc-cs-pair>.rc-cs-figure{margin:0}
@media(min-width:768px){.rc-cs-story .rc-cs-split{gap:56px}}
.rc-cs-story .rc-cs-sns{list-style:none;padding:0;margin:0}
.rc-cs-story .rc-cs-sns__link{min-width:44px;min-height:44px}
.rc-cs-story .rc-cs-sns__link:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.rc-cs-story .rc-cs-split--single{display:block}
@media(prefers-reduced-motion:reduce){.rc-cs-story .rc-cs-sns__link{transition:none}}