/* ------------------------------------------------------------
   synappro design system — homepage
   Requires tokens.css, chrome.css, components.css.
   ------------------------------------------------------------ */

/* ===== Hero ===== */

.hero-section {
    position: relative;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 180px var(--side-pad) 96px;
}
.hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 64px;
    align-items: start;
}
.hero-eyebrow { margin-bottom: 24px; }
.hero-section .t-h1 { margin-bottom: 24px; }
.hero-lead { max-width: 56ch; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }

.hero-stats {
    gap: 8px;
    border-top: 1px solid var(--border-hairline);
    padding-top: 28px;
    max-width: 600px;
}
.hero-stats .t-numeral-sm { font-size: var(--fs-33); margin: 0 0 6px; }
.hero-stats p:last-child { font-size: 15px; color: var(--ink-700); margin: 0; line-height: 1.45; }

.hero-media {
    position: relative;
    border-radius: var(--r-band);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-xl);
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .media-well-grain { opacity: 0.10; }
.hero-media .capsule-dark { position: absolute; left: 20px; right: 20px; bottom: 20px; }

@media (max-width: 1039px) {
    .hero-section { padding-top: 132px; }
    /* .grid-2's own mobile stacking gap (32px, !important) reads as a
       touch tight above the hero photo specifically — nudged up here. */
    .hero-grid { gap: 64px !important; }
}

/* ===== Workshops ===== */

.workshops-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 24px; align-items: stretch; }

.workshop-card { display: flex; flex-direction: column; }
.workshop-card .seg-track { margin-bottom: 32px; }
.workshop-card .seg-panels { margin-bottom: 32px; }
.workshop-panel .t-metadata { margin-bottom: 12px; }
.workshop-panel .t-h3 { margin-bottom: 16px; }
.workshop-panel .t-body { margin-bottom: 28px; max-width: 52ch; }
.workshop-includes { display: flex; flex-direction: column; }
.workshop-includes p {
    font-size: 16px;
    color: var(--ink-900);
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--neutral-100);
}
.workshop-card-footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-hairline);
    padding-top: 28px;
}
.workshop-card-footer p { font-size: 15px; line-height: 1.5; color: var(--ink-500); margin: 0; max-width: 36ch; }
.workshop-card-footer-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.workshop-side { display: flex; flex-direction: column; gap: 24px; }
.workshop-side .media-well { flex: 1; min-height: 280px; }
.workshop-side .panel-neu .t-metadata { margin-bottom: 14px; }
.workshop-side .panel-neu .t-h4 { margin-bottom: 10px; }
.workshop-side .panel-neu .t-small { margin-bottom: 18px; }
.workshop-side .panel-neu .link-inline { display: inline-block; margin-bottom: 18px; }
.workshop-side-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== About band ===== */

.about-band-grid { position: relative; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.about-band-grid .t-eyebrow { margin-bottom: 20px; }
.about-band-grid .t-h2 { margin-bottom: 28px; }
.about-band-clients { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 8px; }
.about-band-clients img { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: 0.75; }

.about-band-copy { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.about-band-stats {
    gap: 20px;
    padding-top: 28px;
}
.about-band-stats .band-numeral { font-family: var(--font-mono); font-size: var(--fs-21); margin: 0 0 8px; }
.about-band-stats p:last-child { font-size: 15px; line-height: 1.5; color: rgba(250, 251, 252, 0.7); margin: 0; }

/* ===== Breathe ===== */

.breathe-grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.breathe-card { display: flex; flex-direction: column; }
.breathe-card .t-eyebrow { margin-bottom: 20px; }
.breathe-card .t-h2 { margin-bottom: 20px; }
.breathe-card .t-lead { max-width: 46ch; margin-bottom: 32px; }

.breathe-cycles { display: flex; flex-direction: column; margin-bottom: 36px; }
.breathe-cycle-row { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--neutral-100); }
.breathe-cycles .breathe-cycle-row:last-child { border-bottom: 1px solid var(--neutral-100); }
.breathe-cycle-row .data-pill { width: 88px; flex-shrink: 0; }
.breathe-cycle-row .cycle-label { font-family: var(--font-heading); font-size: var(--fs-21); color: var(--ink-900); width: 88px; flex-shrink: 0; }

.breathe-card-footer { margin-top: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.breathe-card-footer .app-store-badge { display: inline-block; line-height: 0; }
.breathe-card-footer .app-store-badge img { height: 48px; width: auto; }
.breathe-card-footer .t-metadata { letter-spacing: 0.06em; }

.breathe-media {
    position: relative;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.breathe-media img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 28px 72px hsl(220 18% 55% / 0.28));
}

@media (max-width: 767px) {
    /* Same contain-fit behaviour, just smaller and anchored to the
       bottom of the box instead of floating centred in it. */
    .breathe-media { align-items: flex-end; }
    .breathe-media img {
        width: 82%;
        height: 82%;
    }
}

/* ===== Why it works ===== */

.why-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px; }
.why-media { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 420px; box-shadow: var(--shadow-lg); }
/* Every other photo-with-overlay component on the site fills its box via
   position:absolute + object-fit:cover, decoupling the box's height from
   the image's own intrinsic size. This one was missing that — the image
   just sat at its natural (near-square) size in normal flow, leaving
   invisible slack below it whenever the box was taller (grid-stretch on
   desktop, min-height on mobile). The capsule text was quietly growing
   into that slack — over blank canvas, not the photo — instead of the
   box visibly extending to fit it. */
.why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-media .media-well-grain { opacity: 0.10; }
.why-media .capsule-light { position: absolute; left: 24px; right: 24px; bottom: 24px; }
.why-media .capsule-light .t-metadata { margin-bottom: 8px; }
.why-media .capsule-light p:last-child { font-size: 18px; line-height: 1.5; color: var(--ink-900); }

@media (max-width: 767px) {
    /* Tall enough for the full, un-clamped bio text at 18px plus a
       comfortable amount of photo still showing above it. */
    .why-media { min-height: 620px; }
    .why-media .capsule-light { padding: 14px 16px; }
    .why-media .capsule-light .t-metadata { margin-bottom: 4px; }
    .why-media .capsule-light p:last-child { font-size: 18px; line-height: 1.5; }
}

.why-card { display: flex; flex-direction: column; }
.why-card .t-eyebrow { margin-bottom: 20px; }
.why-card .t-h3 { margin-bottom: 20px; }
.why-card .t-body { margin-bottom: 20px; }
.why-card .t-body:last-of-type { margin-bottom: 32px; }
.why-card-footer { margin-top: auto; display: flex; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--border-hairline); padding-top: 28px; }

/* ===== Responsive ===== */

@media (max-width: 1039px) {
    .hero-section { padding-left: var(--side-pad-mobile); padding-right: var(--side-pad-mobile); }
}