/**
 * Block content styles — applied to BOTH the Gutenberg editor (via
 * `add_editor_style()`) and the frontend (via wp_enqueue_style), so the
 * editing surface mirrors the rendered page (WYSIWYG).
 *
 * Mirrors react-src's index.css + style/media-text.scss + style/typography.scss
 * for Gutenberg blocks. theme.json carries the desktop typographic scale
 * (h1, h2, h3, h4); this file adds:
 *   - Mobile breakpoint overrides (theme.json doesn't support media queries).
 *   - Vertical rhythm: every h* / p starts with `margin-top: var(--page-gutter)`.
 *   - The `wp-block-media-text` 50/50 grid override, including the
 *     `has-media-on-the-right` / `is-stacked-on-mobile` variants.
 *   - Forces images inside `core/image` and `core/media-text` to fill
 *     their slot (react-src had a global `img { width: 100% }` — kept
 *     narrowed to block contexts to avoid hitting header/footer assets).
 *
 * Values use --page-gutter (also defined in site-base.css). Re-declared
 * here because the Gutenberg editor iframe only loads files registered
 * with add_editor_style(), so this file must stand on its own to match
 * the front. On the front it's just a harmless re-assertion — IF the
 * value matches site-base.css. Pure vw (no clamp) to keep the gutter
 * in lockstep with the .site-rail width (also pure vw); a clamp here
 * would cap the gutter on wide viewports while the rail keeps growing,
 * so content slips under the rail.
 *   desktop  3.02vw
 *   mobile   6.03vw
 * matching react-src `$vertical_margin` / `$mobile_margin`.
 */

:root {
    --page-gutter: 3.02vw;
}

@media (max-width: 768px) {
    :root {
        --page-gutter: 6.03vw;
    }
}

/* ---------- Vertical rhythm ---------- */

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    margin-top: var(--page-gutter);
}

/* ---------- Figure / hr resets ---------- */

figure {
    margin: 0;
    display: grid;
}

hr {
    border: none;
    border-top: 0.15vw solid #aaa;
}

/* ---------- Mobile heading + paragraph sizes ----------
 * theme.json carries the desktop sizes (h1 5.6vw, h2 3.5vw, h3 1.4vw,
 * h4 1.7vw, body 1.4vw). At <=768px we jump to the larger mobile scale
 * defined in react-src style/typography.scss.
 */

@media (max-width: 768px) {
    h1 { font-size: 9vw; }
    h2 { font-size: 10vw; }
    h3 { font-size: 5.4vw; }
    h4 { font-size: 6.5vw; }
    /* h5/h6 stay at the desktop 13px size — react-src renders them at
     * browser-default (~13px) regardless of viewport since its body
     * font-size is the browser default 16px, not a vw value. */
    p  { font-size: 5.4vw; }
}

/* ---------- Image block: fill the slot ----------
 * Gutenberg's core/image keeps the intrinsic dimensions by default;
 * react-src forced every content image to 100% width. Scoped to the
 * block class so we don't hit logos / icons rendered as <img> in the
 * site chrome.
 */

.wp-block-image img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* ---------- Cover block: no dark overlay ----------
 * Design choice for this site: Cover banners show the raw image, never the
 * dark "dim" veil core/cover adds by default (`has-background-dim`, ~50%).
 * The editor's Overlay control was eluding the client, so we kill the veil
 * theme-wide here. Loaded in the editor too (add_editor_style), so the
 * editor preview matches the front. Higher specificity than core's
 * `.has-background-dim{opacity:.5}`, so it wins without !important.
 *
 * To re-enable per-block dimming later, remove this rule (and use the
 * block's Styles → Color → Overlay opacity control).
 */
.wp-block-cover .wp-block-cover__background.has-background-dim {
    opacity: 0;
}

/* ---------- Media-Text: 50/50 grid override ----------
 * Default Gutenberg uses a flexible grid with a draggable splitter.
 * react-src locked it to 50/50 with column flip via `direction: rtl`
 * for `has-media-on-the-right`. We use explicit `grid-column` swaps
 * instead — clearer and lets text stay LTR.
 */

.wp-block-media-text {
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto;
}

.wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr 50%;
}

.wp-block-media-text .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.wp-block-media-text .wp-block-media-text__content {
    grid-column: 2;
    grid-row: 1;
    padding: 0 calc(2 * var(--page-gutter));
    word-break: break-word;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    grid-column: 2;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    grid-column: 1;
}

.wp-block-media-text,
.wp-block-media-text.is-vertically-aligned-center {
    align-items: center;
}

.wp-block-media-text.is-vertically-aligned-top {
    align-items: start;
}

.wp-block-media-text.is-vertically-aligned-bottom {
    align-items: end;
}

.wp-block-media-text__media img,
.wp-block-media-text__media video {
    max-width: unset;
    width: 100%;
    vertical-align: middle;
}

/* `is-image-fill`: media slot becomes a background-image, the actual
 * <img> is squashed to a hidden 1×1 (kept in DOM for screen readers /
 * lazy-load behavior). Mirror of react-src style/media-text.scss. */
.wp-block-media-text.is-image-fill figure.wp-block-media-text__media {
    height: 100%;
    min-height: 250px;
    background-size: cover;
}

.wp-block-media-text.is-image-fill figure.wp-block-media-text__media > img {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (max-width: 768px) {
    .wp-block-media-text {
        margin-top: calc(3 * var(--page-gutter));
    }

    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 100% !important;
    }

    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
        margin-top: calc(3 * var(--page-gutter));
    }

    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
        padding: 0;
    }
}

/* ---------- Columns ----------
 * react-src style/columns.scss. The default column gap comes from
 * theme.json `styles.spacing.blockGap` (= var(--page-gutter)), which
 * Gutenberg wires into `--wp--style--block-gap` and applies via the
 * `wp-container-*` inline rules. The variants below use gap overrides
 * (more specific selectors than `.wp-container-…`, so they win without
 * needing !important) plus padding for `intro-margin`.
 */

.wp-block-columns.are-vertically-aligned-top    { align-items: flex-start; }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; }

.wp-block-column {
    flex: 1;
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wp-block-column.is-vertically-aligned-top,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-bottom {
    width: 100%;
}

.wp-block-column.is-vertically-aligned-top    { align-self: flex-start; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }
.wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; }

.wp-block-columns.is-style-no-margin,
.wp-block-columns.no-margin {
    gap: 0;
}

/* WP defaults inject `:where(.wp-block-columns){margin-bottom:1.75em}` — em-
 * based against body. Our body is 1.4vw (theme.json) so this resolves to
 * 2.45vw, vs react-src's 28px (1.75 * 16px browser default). The extra
 * ~1vw cumulates above and below every columns block, throwing off the
 * vertical rhythm built around the explicit `.wp-block-spacer.is-style-x*`
 * blocks. Lock it to react-src's effective value across viewports. */
.wp-block-columns {
    margin-bottom: 28px;
}

@media (min-width: 769px) {
    /* react-src style/columns.scss uses `3 * $vertical_margin` for both
     * inset and gutter, with `$vertical_margin = 3.02vw` (in theme.scss).
     * That maps to --page-gutter here (also 3.02vw), NOT
     * --page-gutter-vertical (1.84vw, which is react-src JS's
     * unit.md.verticalMargin — different concept despite the name).
     * So: 3 * 3.02vw = 9.06vw each side, matching react-src exactly. */
    .wp-block-columns.is-style-intro-margin,
    .wp-block-columns.intro-margin {
        padding: 0 calc(3 * var(--page-gutter));
        gap: calc(3 * var(--page-gutter));
    }
}

@media (max-width: 768px) {
    .wp-block-columns.has-1-column-mobile {
        flex-wrap: wrap;
    }

    .wp-block-columns.has-1-column-mobile .wp-block-column {
        flex: 1 1 100%;
    }
}

/* ---------- Spacer ----------
 * Gutenberg lets editors set arbitrary heights in px; react-src ignored
 * those and forced a single rhythm value (matching --page-gutter) with
 * the option to multiply via the is-style-x{1..4} block styles.
 */

.wp-block-spacer {
    height: var(--page-gutter) !important;
}

.wp-block-spacer.is-style-x1 { height: var(--page-gutter) !important; }
.wp-block-spacer.is-style-x2 { height: calc(2 * var(--page-gutter)) !important; }
.wp-block-spacer.is-style-x3 { height: calc(3 * var(--page-gutter)) !important; }
.wp-block-spacer.is-style-x4 { height: calc(4 * var(--page-gutter)) !important; }

/* ---------- Video & Vimeo embed ----------
 * react-src forced videos full-width and Vimeo iframes to a 16:9 box.
 * Plain <video> in `.wp-block-video` carries explicit width/height
 * attributes (e.g. 1920×1080) which the browser treats as intrinsic
 * size — without `width: 100%` they don't fill the column.
 */

.wp-block-video video {
    width: 100%;
    height: auto;
    display: block;
    /* WP saves the original `width`/`height` HTML attributes plus an inline
     * `style="aspect-ratio: W/H"` on the <video> element, which sometimes
     * mis-matches the actual file content (e.g. when the source was re-
     * encoded portrait inside a landscape container, or when the metadata
     * is just wrong). Override to `auto !important` so the player frame
     * sizes to the file's true intrinsic ratio — same as the Gutenberg
     * editor preview, which reads the live file. !important is required
     * because WP writes the aspect-ratio as an inline style. */
    aspect-ratio: auto !important;
}

.wp-block-embed-vimeo {
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
}

.wp-block-embed-vimeo .wp-block-embed__wrapper,
.wp-block-embed-vimeo iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ---------- Inline paragraph links ----------
 * Re-introduce a thin underline (the global `a` reset in site-base.css
 * strips it for nav/UI chrome). On hover the underline slides down via
 * `text-underline-offset` — native, no pseudo-element, GPU-friendly —
 * and the text shifts to dark gray. Scoped to `p a` so block-style
 * links (buttons, eyed-link) stay untouched. */
p a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-underline-offset 0.3s ease, color 0.3s ease;
}

p a:hover,
p a:focus-visible {
    text-underline-offset: 0.35em;
    color: #333;
}

@media (prefers-reduced-motion: reduce) {
    p a {
        transition: none;
    }
}