/* ============================================================
   BEINC — Insight Detail Page Content (Section CSS)
   The article body. In production this will be the WordPress
   `the_content()` output, so the styles target plain semantic
   tags (h2, p, figure, .alignright wrapper) rather than custom
   classes — that way an editor's Gutenberg blocks get the
   right look automatically.

   Layout: centered column, max-width 60vw on desktop, with the
   global pad-x respected. Tablet doubles the side padding.
   Phone uses the standard pad-x.

   Depends on: global.css
   ============================================================ */


.idp-content {
    position: relative;
    background: var(--color-white);
    color: var(--color-black2);
    padding: var(--space-10) 0;
}

/* Centered reading column */
.idp-content__inner {
    width: 100%;
    max-width: 60vw;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
}

/* Cap on ultra-wide so paragraphs stay readable */
@media (min-width: 1600px) {
    .idp-content__inner { max-width: 900px; }
}

/* Heading + paragraph stacks for each editor block */
.idp-content__inner h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-black2);
    margin: 0 0 var(--space-5) 0;
}

.idp-content__inner p {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-black2);
    margin: 0 0 var(--space-4) 0;
}

.idp-content__inner p:last-child { margin-bottom: 0; }

/* A "block" is one of the editor units (h2 + paragraphs) */
.idp-content__block {
    display: block;
}

/* Two-column block: text on the left, figure on the right.
   Mirrors a Gutenberg "Media & Text" block. */
.idp-content__block--media-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: start;
}

.idp-content__block--media-right .idp-content__col h2,
.idp-content__block--media-right .idp-content__col p {
    /* heading + paragraph share the left column */
}

.idp-content__figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--color-darkgreyish);
}

.idp-content__figure img,
.idp-content__figure video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}


/* ============================================================
   TABLET (≤1023px)
   "Insight content can grow all the way to the edges of the
   screen but respecting the padding of the global sides and
   also adding an extra duplicated global paddings". The frame
   already gives one --pad-x via the edge dashed lines; the
   inner adds another --pad-x on top → effectively pad × 2 from
   the screen edges.
   ============================================================ */
@media (max-width: 1023px) {
    .idp-content__inner {
        max-width: 100%;
        padding: 0 calc(var(--pad-x) * 2);
    }
}


/* ============================================================
   MOBILE (≤767px)
   Single-column padding, single global pad-x (not doubled).
   Two-column blocks collapse to stacked: figure under text.
   ============================================================ */
@media (max-width: 767px) {
    .idp-content__inner {
        max-width: 100%;
        padding: 0 var(--pad-x);
        gap: var(--space-7);
    }

    .idp-content__block--media-right {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .idp-content__figure { aspect-ratio: 4 / 3; }
}