/* Homepage-only styles. Loaded exclusively on / (see layout.php).
   Reads color tokens from theme.css so light/dark mode keeps working;
   everything else (spacing, type scale, motion) is defined locally. */

.home-v2 {
    --mh-space-1: 0.5rem;
    --mh-space-2: 1rem;
    --mh-space-3: 1.5rem;
    --mh-space-4: 2.5rem;
    --mh-space-5: 4rem;
    --mh-space-6: 6rem;

    --mh-h1-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
    --mh-h2-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
    --mh-body-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);

    --mh-radius: 1.75rem;
    --mh-max: 40rem;

    display: block;
}

.home-v2 section {
    max-width: 64rem;
    margin-inline: auto;
    padding-inline: var(--mh-space-2);
}

/* Full-bleed sections manage their own width (100vw breakout) — the
   generic max-width/margin/padding above would otherwise clamp them
   back down to 64rem and break the breakout math on wide viewports. */
.home-v2 section.mh-hero {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* mh-cta-mid is an inset rounded panel (not full-bleed), but still gets
   generous side margin so it reads as a "card" against the page. */
.home-v2 section.mh-cta-mid {
    margin-block: var(--mh-space-5);
}

/* ---------------- Hero ---------------- */
/* A saturated .panel-dark block dropped full-bleed at the top of the page
   (100vw breakout) with rounded bottom corners, so the very first thing a
   visitor sees is color-on-white rather than a flat hero photo. The photo
   sits as a true background layer, hidden under solid panel color for the
   left half (where the text lives) and only fading into view past the
   halfway point, so it reads as an accent rather than competing with the
   headline. The dot-pattern texture (from .panel-dark) layers on top of it. */

.mh-hero {
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(-1 * var(--mh-space-4));
    min-height: clamp(26rem, 52vw, 34rem);
    display: flex;
    align-items: center;
    border-radius: 0 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
    background-image:
        linear-gradient(to right, var(--color-panel-dark) 0%, var(--color-panel-dark) 50%, transparent 100%),
        url('/images/HomeFindsClub-Hero.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center, right center;
    background-size: cover, cover;
}

/* On narrow/portrait viewports "right center" crops the wide source photo
   down to a sliver of wall/chair — shift the crop so the teal sofa and
   pillows (the photo's focal point) stay in frame. */
@media (max-width: 640px) {
    .mh-hero {
        background-position: center, 75% center;
    }
}

.mh-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
    padding: clamp(4.5rem, 10vw, 7rem) var(--mh-space-2) clamp(4rem, 9vw, 6rem);
}

.mh-hero-content {
    max-width: 30rem;
}

.mh-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-panel-dark-text);
    background: color-mix(in srgb, var(--color-panel-dark-text) 12%, transparent);
    border: 1px solid var(--color-panel-dark-border);
    border-radius: 9999px;
    padding: 0.35rem 0.9rem;
    margin-bottom: var(--mh-space-3);
}

.mh-h1 {
    font-size: var(--mh-h1-size);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.mh-underline {
    font-style: italic;
    color: var(--color-panel-dark-accent);
}

.mh-hero-sub {
    font-size: var(--mh-body-size);
    color: var(--color-panel-dark-text-muted);
    max-width: var(--mh-max);
    margin-top: var(--mh-space-3);
    line-height: 1.6;
}

.mh-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mh-space-2);
    margin-top: var(--mh-space-4);
}

.mh-btn-lg {
    font-size: 1rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.9rem 1.75rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.mh-btn-lg:hover {
    transform: translateY(-1px);
}

.mh-hero .btn-primary {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mh-btn-ghost {
    font-weight: 600;
    color: var(--color-panel-dark-text-muted);
    text-decoration: none;
    padding: 0.9rem 0.5rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mh-btn-ghost:hover {
    color: var(--color-panel-dark-text);
    border-color: var(--color-panel-dark-accent);
}

.mh-hero-note {
    margin-top: var(--mh-space-3);
    font-size: 0.8125rem;
    color: var(--color-panel-dark-text-muted);
    opacity: 0.85;
}

/* ---------------- Depth bands ----------------
   Full-bleed background panels behind constrained content, using the
   same breakout trick as the hero. Each band steps to a slightly
   different surface token, so the page reads as layered depth rather
   than a flat white sheet as the user scrolls down. */

.mh-band {
    position: relative;
    z-index: 0;
}

.mh-band::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--mh-band-color, transparent);
    z-index: -1;
}

/* ---------------- Explanation ---------------- */

.mh-explain {
    --mh-band-color: var(--color-bg-page);
    padding-block: var(--mh-space-5);
}

.mh-explain p {
    max-width: 62ch;
    margin-inline: auto;
    font-size: var(--mh-body-size);
    line-height: 1.75;
    color: var(--color-text-secondary);
    text-align: center;
}

/* ---------------- Leaks ---------------- */

.mh-leaks {
    --mh-band-color: var(--color-bg-muted);
    padding-block: var(--mh-space-5);
    text-align: center;
    box-shadow: inset 0 1px 0 var(--color-border-light);
}

.mh-h2 {
    font-size: var(--mh-h2-size);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-heading);
}

.mh-section-sub {
    color: var(--color-text-secondary);
    max-width: var(--mh-max);
    margin: var(--mh-space-1) auto 0;
}

.mh-pipe {
    width: 2px;
    height: var(--mh-space-4);
    margin: var(--mh-space-3) auto 0;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    opacity: 0.5;
}

.mh-leak-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mh-space-3);
    margin-top: var(--mh-space-3);
    text-align: left;
}

@media (min-width: 640px) {
    .mh-leak-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .mh-leak-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mh-leak {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--mh-radius);
    padding: var(--mh-space-3);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.mh-leak:hover,
.mh-leak:focus-visible {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--color-primary);
}

.mh-drop {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    margin-bottom: var(--mh-space-2);
    background: var(--color-primary);
    border-radius: 0 60% 60% 60%;
    transform: rotate(45deg);
    animation: mh-drip 3.6s ease-in-out infinite;
}

@keyframes mh-drip {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }
    50% { transform: rotate(45deg) translateY(3px); opacity: 0.7; }
}

.mh-leak h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 0.35rem;
}

.mh-leak p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* ---------------- What this site does ---------------- */

.mh-does {
    --mh-band-color: var(--color-bg-page);
    padding-block: var(--mh-space-5);
    text-align: center;
}

.mh-does-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mh-space-3);
    margin-top: var(--mh-space-4);
    text-align: left;
}

@media (min-width: 768px) {
    .mh-does-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Dark panels dropped inside an otherwise white/muted section — this is
   the "color on top of white" contrast the homepage leads with. */
.mh-does-card {
    border-radius: var(--mh-radius);
    padding: var(--mh-space-3);
    box-shadow: var(--shadow-lg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mh-does-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.mh-does-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-panel-dark-text) 14%, transparent);
    color: var(--color-panel-dark-accent);
    margin-bottom: var(--mh-space-2);
}

.mh-does-icon svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mh-does-card h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.mh-does-card p {
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ---------------- Mid-page CTA reinforcement ---------------- */

.mh-cta-mid {
    text-align: center;
    padding: var(--mh-space-5) var(--mh-space-2);
    border-radius: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-xl);
}

.mh-cta-mid-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-panel-dark-text);
    opacity: 0.8;
    margin-bottom: var(--mh-space-1);
}

.mh-cta-mid-h2 {
    font-size: var(--mh-h2-size);
    font-weight: 600;
    letter-spacing: -0.01em;
    max-width: 28ch;
    margin: 0 auto var(--mh-space-3);
}

.mh-cta-mid .btn-primary {
    background: var(--color-panel-dark-text);
    color: var(--color-panel-dark-strong);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.mh-cta-mid .btn-primary:hover {
    background: var(--color-panel-dark-accent);
}

/* ---------------- Final CTA ---------------- */

.mh-cta-final {
    text-align: center;
    background: var(--color-bg-accent);
    border: 1px solid var(--color-primary);
    border-radius: var(--mh-radius);
    padding: var(--mh-space-4) var(--mh-space-3);
    margin-block: var(--mh-space-5);
    box-shadow: var(--shadow-lg);
}

.mh-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 26rem;
    margin: var(--mh-space-3) auto 0;
}

.mh-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mh-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-size: 1rem;
}

.mh-form .mh-btn-lg {
    width: 100%;
}

.mh-form-message {
    margin-top: var(--mh-space-1);
    font-size: 0.875rem;
}

@media (min-width: 480px) {
    .mh-form-row {
        flex-direction: row;
    }
}

.mh-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mh-space-1) var(--mh-space-3);
    margin-top: var(--mh-space-3);
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.mh-trust-row li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mh-trust-row li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: var(--color-primary);
    flex-shrink: 0;
}

/* ---------------- Latest posts ---------------- */

.mh-latest {
    --mh-band-color: var(--color-bg-muted);
    padding-block: var(--mh-space-5);
    text-align: center;
    box-shadow: inset 0 1px 0 var(--color-border-light);
}

.mh-latest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mh-space-3);
    margin-top: var(--mh-space-3);
    text-align: left;
}

@media (min-width: 640px) {
    .mh-latest-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* .mh-btn-ghost is styled for dark panels; this band is a light surface,
   so swap to the page's link colors to keep the text readable. */
.mh-latest-link {
    display: inline-block;
    margin-top: var(--mh-space-3);
    color: var(--color-primary);
}

.mh-latest-link:hover {
    color: var(--color-primary-hover);
    border-color: var(--color-primary);
}

.mh-latest-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--mh-space-3);
}

.mh-youtube-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* ---------------- Closing trust ---------------- */

.mh-closing {
    text-align: center;
    padding-block: var(--mh-space-5) var(--mh-space-6);
}

.mh-closing-text {
    max-width: 52ch;
    margin-inline: auto;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .mh-drop {
        animation: none;
    }
    .mh-btn-lg:hover {
        transform: none;
    }
}