/* template-insights.php only (docs/PLAN.md §8/§12), ported from the prototype's own
   layout/insights.css. The hero's own ring suppression is tt360/hero's real "Background
   accent: None" control now, not a CSS override — the prototype's own .insights-hero::before
   suppression and its padding-bottom/eyebrow-size overrides are the only pieces still needed
   here, added via the Hero block's own "Additional CSS Class(es)" field. .insights-archive,
   .insights-articles, .insights-newsletter, and .insights-support are tt360/section instances
   with their own matching Additional CSS Class, which is how this file's own selectors reach
   them (each one's base background/padding still comes from tt360/section itself; only the
   real one-off differences from that default live here). */

.insights-hero {
    padding-bottom: 48px;
}

.insights-hero .eyebrow {
    font-size: 16px;
}

/* tt360/section's own default is a flat 96px all around; this page's archive row sits flush
   under the hero with no top padding of its own (tt360/section's flushTop attribute handles
   this, no override needed here) but needs its bottom gap kept at exactly 96px, same as the
   shared default — no insights-specific override needed for padding at all, this comment is
   just confirming it was checked, not assumed. */

/* These post-cards are real links to article-detail.html (or, on the real site, the actual
   Article permalink), a shortcut since there's no real article data yet to click through from
   when this was first prototyped — the whole-card <a> needs its own reset: default link
   color/underline would otherwise leak into .excerpt, the one piece of text inside the card
   with no color of its own. Thought Leadership's own post-cards (built from core/query +
   tt360/card-post the same way) stay unaffected either way, this selector only ever matches
   a real anchor. */
a.post-card {
    color: inherit;
    text-decoration: none;
}

.insights-articles .view-all {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.insights-newsletter .container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.insights-newsletter .newsletter-latest {
    flex: 1 1 400px;
}

.insights-newsletter .newsletter-latest .eyebrow {
    margin: 0;
    font-size: 16px;
}

.insights-newsletter .newsletter-latest .issue-meta {
    margin: 16px 0 0;
    font-size: 14px;
    color: rgba(var(--warm-gray-dark), 1);
}

.insights-newsletter .newsletter-latest .title {
    margin: 16px 0 0;
    font-size: 32px;
}

.insights-newsletter .newsletter-latest .summary {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
}

.insights-newsletter .newsletter-latest .read-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--terra-green), 1);
    text-decoration: none;
}

.insights-newsletter .newsletter-latest .read-link:hover,
.insights-newsletter .newsletter-latest .read-link:focus {
    text-decoration: underline;
}

.insights-newsletter .newsletter-subscribe {
    flex: 1 1 360px;
    padding: 40px;
    background-color: rgba(var(--white), 1);
    border-radius: 4px;
}

.insights-newsletter .newsletter-subscribe .title {
    margin: 0;
    font-size: 32px;
}

.insights-newsletter .newsletter-subscribe .intro {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.insights-newsletter .subscribe-form {
    margin-top: 20px;
}

/* Only the email field and Submit button live inside this iframe. */
.insights-newsletter .newsletter-subscribe .fine-print {
    margin: 12px 0 0;
    font-size: 13px;
    color: rgba(var(--warm-gray), 1);
}

.insights-support .container {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.insights-support .headline {
    margin: 0;
    font-size: 48px;
    line-height: 1.15;
}

.insights-support .description {
    margin: 16px 0 0;
    font-size: 16px;
}

/* The real flex row is core/buttons' own .wp-block-buttons wrapper, one level inside
   .support-actions (a plain core/group used only as a semantic outer wrapper here) — found
   after the sm stacking override below had no visible effect, since .support-actions itself
   was never actually a flex container to begin with. */
.insights-support .support-actions {
    margin-top: 24px;
}

.insights-support .support-actions .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* md */
@media (max-width: 767.98px) {
    /* flex: 1 1 400px on .newsletter-latest sets a preferred WIDTH for the desktop row layout;
       once the container switches to flex-direction: column, that same 400px becomes a
       preferred HEIGHT instead (the main axis rotates with the container), forcing a
       400px-tall block regardless of content. Reset to auto so the block sizes to its content.
       Gap also drops to 24px (Figma), not the desktop 40px (the horizontal column gap). */
    .insights-newsletter .container {
        flex-direction: column;
        gap: 24px;
    }

    .insights-newsletter .newsletter-latest {
        flex-basis: auto;
    }
}

/* sm */
@media (max-width: 575.98px) {
    .insights-hero {
        padding-bottom: 24px;
    }

    /* core/buttons' own .wp-block-buttons wrapper is shrink-to-fit by default (a block-level
       flex container sized to its own content, not its parent), so width:100% on just the
       .wp-block-button grandchild alone only ever resolved against that same shrink-wrapped
       parent — still content-width, not full width. Every nesting level down to the real
       visible link needs it. */
    .insights-articles .view-all .wp-block-buttons,
    .insights-articles .view-all .wp-block-button,
    .insights-articles .view-all .wp-block-button__link {
        width: 100%;
    }

    .insights-newsletter .newsletter-subscribe {
        padding: 16px;
    }

    .insights-support .support-actions .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .insights-support .support-actions .wp-block-button {
        width: 100%;
    }
}