/* Health Tip — Main Zone, designed as a clipboard.
 *
 * Layered visual model:
 *   .health-main-wrap   — the brown wood "board" (full slide area)
 *   .health-main-paper  — the cream paper pinned to the board (centered)
 *   .health-main-banner-block — the silver binder clip at the top of the
 *                               paper, overhanging slightly (positioned
 *                               absolute so it doesn't take grid space)
 *   .health-main-paper-block — content area of the paper (headline + body)
 *   .health-main-footer-block — bottom of the paper (disclaimer)
 *
 * The JS auto-fit (fitHealthText) reads .health-main-paper-block's
 * client area and sizes .health-main-body to fill it; the clip's text
 * is sized via _fitAPODBody on .health-main-banner-fit. */

.health-main-wrap {
    width: 100cqw;
    height: 100cqh;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: visible;
    background: transparent;
    color: #2a1f12;
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
}

/* The cream paper is now the main box (no wooden board around it).
 * Paper is sized so the clip+paper group totals 80% of the slide height:
 * paper 74% + clip overhang above (~6.5cqh) ≈ 80%.
 * margin-top equal to clip overhang shifts paper down so the full
 * group (clip + chipboard) is vertically centered, not just the paper. */
.health-main-paper {
    position: relative;
    width: 80%;
    height: 74%;
    margin-top: 6.5cqh;
    box-sizing: border-box;
    /* Chipboard frame (same outer size as before). */
    background: url("../img/chipboard.76bcddc62b07.svg") center / 100% 100% no-repeat,
                #a87439;
    border-radius: 4.5cqmin;
    /* isolate so the ::before cream sheet (z-index:-1) stays scoped to
     * paper's own stacking context — it paints above the chipboard
     * background but stays behind the grid children. */
    isolation: isolate;
    padding: 5.5cqmin;
    display: grid;
    grid-template-rows: 7% 1fr 8%;
    grid-template-areas:
        "banner"
        "paper"
        "footer";
    overflow: visible;
    box-shadow: 0 1.2cqmin 2.4cqmin rgba(0, 0, 0, 0.32);
}

/* Cream paper sheet sitting on top of the chipboard. Real drop shadow
 * makes it look like a separate sheet resting on the wood. */
/* Cream paper sheet, with the bottom-right corner cut off so it looks
 * like the corner has been folded over. filter:drop-shadow follows the
 * clip-path silhouette (unlike box-shadow), giving a proper soft shadow
 * along the diagonal fold edge as well as below the sheet. */
/* Cream paper sheet sitting on top of the chipboard. */
.health-main-paper::before {
    content: "";
    position: absolute;
    inset: 5.5cqmin;
    background: #fbf7ec;
    box-shadow:
        0 0.8cqmin 1.6cqmin rgba(0, 0, 0, 0.7),
        0 0.3cqmin 0.6cqmin rgba(0, 0, 0, 0.45);
}

/* Silver binder clip. Positioned absolute so it overhangs the paper's top
 * edge — the visual cue that "this paper is clipped on". Two pseudo
 * rivets are pinned to its sides. z-index keeps the clip above the paper. */
.health-main-banner-block {
    position: absolute;
    /* Pushed down so the clip sits lower than the paper's top edge —
     * more of the clip rests on the cream rather than on the chipboard. */
    top: 3cqh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48%;
    height: 19cqh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(to bottom,
            #f1f3f5 0%,
            #d4d8dd 30%,
            #abb0b6 65%,
            #7e8388 100%);
    border-radius: 0.5cqmin;
    box-shadow:
        0 0.7cqmin 1.4cqmin rgba(0, 0, 0, 0.38),
        inset 0 0.12cqmin 0 rgba(255, 255, 255, 0.7),
        inset 0 0 0 0.1cqmin rgba(70, 72, 76, 0.45);
    z-index: 3;
    /* Reserve horizontal space for the absolute rivets so the auto-fit
     * sees a realistic content-area width. */
    padding: 0 7cqw;
    box-sizing: border-box;
}

/* Two rivets on the left/right of the clip. */
.health-main-banner-block::before,
.health-main-banner-block::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1.8cqmin;
    height: 1.8cqmin;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(
        circle at 35% 35%,
        #ffffff 0%,
        #9a9ea3 35%,
        #4f5256 80%,
        #2c2e30 100%
    );
    box-shadow:
        0 0.12cqmin 0.3cqmin rgba(0, 0, 0, 0.55),
        inset 0 0 0 0.08cqmin rgba(40, 42, 44, 0.7);
}
.health-main-banner-block::before { left: 8%; }
.health-main-banner-block::after  { right: 8%; }

/* Inner sizing-target — the binary-search fit (fitHealthText) sets a
 * font-size on this in cqmin so the clip text fills the clip cleanly. */
.health-main-banner-fit {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 3.5cqmin;
    /* width: max-content shrinks to the (nowrap) header's intrinsic width,
     * even when _fitAPODBody forces display:block during measurement —
     * otherwise scrollWidth would stay pinned at the parent's full width
     * and the binary-search would collapse to its floor. */
    width: max-content;
    max-width: 100%;
}

/* The "HEALTH TIP" label engraved on the clip. nowrap so the auto-fit
 * shrinks the font when the text would otherwise overflow the clip's
 * content-area (padding reserves rivet space on either side). */
.health-main-wrap .health-main-header {
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #3b3d40;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 0.05cqmin 0 rgba(255, 255, 255, 0.55);
}

/* Paper content area. The fit measures clientHeight - padding here, so
 * the padding values directly control the visual margin around text. */
.health-main-paper-block {
    grid-area: paper;
    padding: 6cqh 7cqw 3cqh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #2a1f12;
    overflow: hidden;
    /* position:relative keeps text content above the cream ::before sheet
     * (which is now at z-index:0 instead of -1 so the drop-shadow paints
     * properly above the chipboard background). */
    position: relative;
    z-index: 2;
}

/* Body wrapper — the binary-search fit sizes this in cqmin so the
 * headline + category + body + source all scale together. */
.health-main-wrap .health-main-body {
    font-size: inherit;
    line-height: 1.35;
    font-family: 'Georgia', serif;
    text-align: start;
}

.health-main-wrap .health-main-headline {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-size: 1.45em;
    font-weight: 700;
    line-height: 1.08;
    color: #2a1f12;
    letter-spacing: -0.005em;
    margin-bottom: 0.25em;
}

.health-main-wrap .health-main-headline-icon {
    color: #c0392b;
    font-size: 0.85em;
    margin-right: 0.4em;
    vertical-align: baseline;
}

.health-main-wrap .health-main-category {
    font-family: 'Georgia', serif;
    font-size: 0.62em;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #6b4d2a;
    opacity: 0.85;
    margin-bottom: 0.9em;
    font-style: normal;
    line-height: 1;
}

.health-main-wrap .health-main-text {
    font-family: 'Georgia', serif;
    font-size: 1em;
    line-height: 1.4;
    color: #2a1f12;
}

.health-main-wrap .health-main-source {
    font-family: 'Georgia', serif;
    font-size: 0.7em;
    line-height: 1.35;
    margin-top: 0.7em;
    color: #2a1f12;
    opacity: 0.7;
    text-align: start;
}

/* Disclaimer footer — small uppercase line at the very bottom of the
 * paper, centered. Kept tiny so it reads as a footnote. */
.health-main-footer-block {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4cqw 0;
    position: relative;
    z-index: 2;
}

.health-main-wrap .health-main-disclaimer {
    font-family: 'Geist Mono', 'Roboto Mono', monospace;
    font-size: 1.9cqmin;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #6b4d2a;
    opacity: 0.7;
    line-height: 1;
    text-align: center;
}