/* ==========================================================================
   BLOCK: FRONTEND PAGES - shared anatomy for the public editorial pages
   (about, congresses, congress articles, regulation, sustainability,
   contact). One scope, composable classes:
   - fe-head / fe-lede / fe-prose / fe-list : editorial rhythm
   - fe-cards      : lime-edged fact cards (3-up on wide containers)
   - fe-media-cards: image-topped cards, subgridded rows
   - logo-wall     : sponsor tiers
   - year-roll     : the congress heritage timeline, subgridded columns
   - gallery-row   : simple 3-up image strip
   - contact-*     : the enquiry form (server-rendered states, no JS)
   ========================================================================== */

@scope (.block-frontend) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: fe;
    }

    .fe-head { max-width: 70ch; margin-block-end: var(--space-sm); }
    .fe-head h2 {
        font-weight: 100;
        font-size: var(--fs-h2);
        letter-spacing: -0.03em;
        margin-block-start: 12px;
    }
    .fe-head h2 strong { font-weight: 900; }

    .fe-lede {
        max-width: 76ch;
        font-weight: 300;
        font-size: clamp(1.05rem, 1.3cqw, 1.25rem);
        line-height: 1.8;
        color: var(--text-secondary);
    }
    .fe-lede strong, .fe-prose strong { color: var(--text-primary); font-weight: 700; }

    .fe-prose { max-width: 76ch; display: grid; gap: 18px; }
    .fe-prose p {
        font-weight: 300;
        font-size: clamp(1rem, 1.15cqw, 1.15rem);
        line-height: 1.8;
        color: var(--text-secondary);
    }
    .fe-prose a { color: var(--accent-ink); font-weight: 700; }
    .fe-head + .fe-prose, .fe-lede + .fe-prose { margin-block-start: 8px; }

    .fe-list { max-width: 76ch; display: grid; gap: 12px; margin-block: 20px; }
    .fe-list li {
        position: relative;
        padding-inline-start: 22px;
        font-weight: 400;
        font-size: clamp(1rem, 1.1cqw, 1.1rem);
        line-height: 1.7;
        color: var(--text-secondary);
    }
    .fe-list li::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0.62em;
        inline-size: 8px;
        block-size: 8px;
        background: var(--accent-lime);
    }
    .fe-list strong { color: var(--text-primary); }

    /* ------------------------------------------ FACT CARDS (lime rule) -- */
    .fe-cards {
        display: grid;
        gap: clamp(16px, 2cqw, 26px);
        margin-block: clamp(28px, 4cqw, 56px);
    }
    @container fe (width >= 820px) {
        .fe-cards { grid-template-columns: repeat(3, 1fr); }
        .fe-cards.is-two { grid-template-columns: repeat(2, 1fr); }
    }
    .fe-cards article, .fe-cards a {
        background: light-dark(#f7f7f7, #101010);
        border: 1px solid transparent;
        border-inline-start: 3px solid var(--accent-lime);
        padding: clamp(22px, 3cqw, 40px);
        display: grid;
        gap: 12px;
        align-content: start;
    }
    .fe-cards h3 {
        color: var(--text-primary);
        font-size: clamp(0.98rem, 1.1cqw, 1.1rem);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .fe-cards p {
        font-weight: 400;
        font-size: clamp(0.98rem, 1.05cqw, 1.08rem);
        color: var(--text-secondary);
        line-height: 1.75;
    }
    .fe-cards .fc-meta {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--accent-ink);
    }
    a.fe-card-link { transition: translate 0.35s var(--ease-lux); }
    a.fe-card-link:hover { translate: 0 -6px; }

    /* on the alt band, cards lift back to the page surface */
    :scope.is-alt .fe-cards article,
    :scope.is-alt .fe-cards a,
    :scope.is-alt .fe-media-card,
    :scope.is-alt .form-note {
        background: #fff;
        border-color: var(--border-light);
    }
    @supports (color: light-dark(#000, #fff)) {
        :scope.is-alt .fe-cards article,
        :scope.is-alt .fe-cards a,
        :scope.is-alt .fe-media-card,
        :scope.is-alt .form-note {
            background: light-dark(#fff, #161616);
        }
    }

    /* --------------------------------- MEDIA CARDS (image + subgrid) --- */
    .fe-media-cards {
        display: grid;
        gap: clamp(24px, 3cqw, 48px);
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
        margin-block: clamp(28px, 4cqw, 56px);
    }
    /* dated listings (news) breathe wider still: 3-up on most screens */
    .fe-media-cards.has-meta {
        grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    }
    .fe-media-card {
        border: 1px solid var(--border-light);
        display: grid;
        align-content: start;
        gap: 14px;
        padding-block-end: clamp(24px, 2.6cqw, 36px);
    }
    .fe-media-card img {
        inline-size: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
        filter: grayscale(20%);
        transition: filter 0.4s;
    }
    .fe-media-card:hover img { filter: grayscale(0%); }
    .fe-media-card h3 {
        padding-inline: clamp(22px, 2.4cqw, 32px);
        font-weight: 800;
        font-size: clamp(1.15rem, 1.5cqw, 1.4rem);
        line-height: 1.35;
    }
    .fe-media-card p {
        padding-inline: clamp(22px, 2.4cqw, 32px);
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.75;
        color: var(--text-secondary);
    }
    .fe-media-card .fc-meta { padding-inline: clamp(22px, 2.4cqw, 32px); }
    .fe-media-card .fc-act { padding-inline: clamp(22px, 2.4cqw, 32px); }
    @supports (grid-template-rows: subgrid) {
        .fe-media-card { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
        .fe-media-cards.has-meta .fe-media-card { grid-row: span 4; }
        .fe-media-cards.has-act .fe-media-card,
        .fe-media-cards.has-meta.has-act .fe-media-card { grid-row: span 5; }
        .fe-media-card .fc-act { align-self: end; }
    }

    /* ------------------------------------------------ GALLERY ROW ------ */
    .gallery-row {
        display: grid;
        gap: clamp(14px, 1.8cqw, 24px);
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
        margin-block: clamp(28px, 4cqw, 56px);
    }
    .gallery-row img {
        inline-size: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        display: block;
    }

    /* -------------------------------------------------- LOGO WALL ------ */
    .logo-tier { margin-block-start: clamp(28px, 3.4cqw, 48px); }
    .logo-wall {
        display: grid;
        gap: clamp(12px, 1.6cqw, 20px);
        grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
        margin-block-start: 16px;
    }
    .logo-wall a, .logo-wall span {
        display: grid;
        place-items: center;
        background: #fff;                 /* logos are print assets - keep
                                             a white plate in both themes */
        border: 1px solid var(--border-light);
        padding: clamp(16px, 1.8cqw, 26px);
        min-block-size: 110px;
        transition: translate 0.3s var(--ease-lux), box-shadow 0.3s;
    }
    .logo-wall a:hover { translate: 0 -5px; box-shadow: var(--shadow-hover); }
    .logo-wall img {
        max-inline-size: 100%;
        max-block-size: 72px;
        inline-size: auto;
        block-size: auto;
        object-fit: contain;
        display: block;
    }

    /* --------------------------------------------------- YEAR ROLL ----- */
    .year-roll { display: grid; margin-block-start: var(--space-sm); }
    .year-item {
        display: grid;
        gap: clamp(14px, 2.4cqw, 44px);
        align-items: baseline;
        padding-block: clamp(14px, 1.6cqw, 22px);
        border-block-start: 1px solid var(--border-light);
        grid-template-columns: 1fr;
    }
    @container fe (width >= 620px) {
        .year-roll { grid-template-columns: minmax(88px, auto) 1fr auto; }
        .year-item { grid-column: 1 / -1; }
        @supports (grid-template-columns: subgrid) {
            .year-item { grid-template-columns: subgrid; }
        }
    }
    .year-item .y-year {
        font-weight: 100;
        font-size: clamp(1.6rem, 2.6cqw, 2.4rem);
        letter-spacing: -0.02em;
        line-height: 1;
    }
    .year-item h3 {
        font-weight: 700;
        font-size: clamp(1rem, 1.3cqw, 1.2rem);
        line-height: 1.5;
    }
    /* World Congress milestones carry the lime mark */
    .year-item.is-world h3::before {
        content: "";
        display: inline-block;
        inline-size: 9px;
        block-size: 9px;
        background: var(--accent-lime);
        margin-inline-end: 12px;
    }
    .year-item .y-link {
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-ink);
        white-space: nowrap;
    }
    a.year-item:hover h3 { color: var(--accent-ink); }

    /* ------------------------------------------------- GLOBAL LEAD -----
       The pillar-lead feature: portrait beside kicker, name, role and
       bio. Portraits are 4:5; the name follows the thin/strong pattern. */
    .fe-lead {
        display: grid;
        gap: clamp(20px, 3cqw, 44px);
        align-items: center;
        margin-block: clamp(32px, 4.4cqw, 64px);
        max-width: 900px;
    }
    @container fe (width >= 700px) {
        .fe-lead { grid-template-columns: minmax(200px, 280px) 1fr; }
    }
    .fe-lead img {
        inline-size: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        display: block;
    }
    .fe-lead > div { display: grid; gap: 10px; align-content: center; }
    .fe-lead h3 {
        font-weight: 100;
        font-size: clamp(1.7rem, 3cqw, 2.6rem);
        letter-spacing: -0.03em;
        line-height: 1.1;
    }
    .fe-lead h3 strong { font-weight: 900; }
    .fe-lead .lead-role {
        font-size: 0.74rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--accent-ink);
    }
    .fe-lead .lead-bio { display: grid; gap: 12px; margin-block-start: 8px; }
    .fe-lead .lead-bio p {
        font-weight: 300;
        font-size: clamp(0.98rem, 1.1cqw, 1.08rem);
        line-height: 1.75;
        color: var(--text-secondary);
    }

    /* ------------------------------------------------- PULL QUOTE ------
       Attributed quotations lifted out of the prose. The oversized mark
       sits in its own grid column (no absolute positioning); the glyph is
       a CSS escape so source files stay pure-ASCII. */
    .fe-quote {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: clamp(18px, 2.4cqw, 32px);
        row-gap: 16px;
        align-items: start;
        max-width: 62ch;
        margin-block: clamp(36px, 5cqw, 72px);
    }
    .fe-quote::before {
        content: "\201C" / "";
        grid-row: 1 / span 2;
        font-size: clamp(4rem, 8cqw, 6.5rem);
        font-weight: 900;
        line-height: 0.62;
        color: var(--accent-lime);
    }
    .fe-quote p {
        font-weight: 200;
        font-size: clamp(1.35rem, 2.4cqw, 2rem);
        letter-spacing: -0.02em;
        line-height: 1.45;
        color: var(--text-primary);
    }
    .fe-quote p strong { font-weight: 700; }
    .fe-quote footer {
        grid-column: 2;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--accent-ink);
    }

    /* ------------------------------------------------- CLOSE / CTA ----- */
    .fe-close {
        margin-block-start: var(--space-md);
        display: grid;
        gap: 20px;
        justify-items: start;
    }
    .fe-close p {
        font-weight: 100;
        font-size: clamp(1.5rem, 2.8cqw, 2.2rem);
        letter-spacing: -0.02em;
        max-width: 30ch;
    }
    .fe-close p strong { font-weight: 900; }
    .fe-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    /* --------------------------------------------------- WITH-ASIDE ----
       The members-area sidebar convention: main column + aside capped
       at 340px, matching block-library and block-country-data so every
       sidebar in the estate carries the same weight. */
    .with-aside {
        display: grid;
        gap: clamp(28px, 4cqw, 64px);
        align-items: start;
    }
    @container fe (width >= 900px) {
        .with-aside { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
    }

    /* ------------------------------------------------ CONTACT FORM ----- */
    .contact-grid { display: grid; gap: clamp(32px, 4cqw, 72px); }
    @container fe (width >= 900px) {
        .contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
    }

    .contact-form { display: grid; gap: clamp(18px, 2cqw, 26px); align-content: start; }
    .field { display: grid; gap: 8px; }
    .field label {
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--text-secondary);
    }
    .field input,
    .field select,
    .field textarea {
        font: inherit;
        font-weight: 400;
        color: var(--text-primary);
        background: transparent;
        border: 1px solid var(--border-light);
        padding: 14px 16px;
        transition: border-color 0.25s;
    }
    .field textarea { min-block-size: 160px; resize: vertical; }
    .field input:focus-visible,
    .field select:focus-visible,
    .field textarea:focus-visible {
        outline: none;
        border-color: var(--accent-lime);
    }
    .field-row { display: grid; gap: clamp(18px, 2cqw, 26px); }
    @container fe (width >= 640px) {
        .field-row { grid-template-columns: 1fr 1fr; }
    }
    /* honeypot - invisible to people, present for bots */
    .field-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

    .form-consent {
        display: flex;
        gap: 12px;
        align-items: start;
        font-size: 0.9rem;
        font-weight: 300;
        color: var(--text-secondary);
        line-height: 1.6;
    }
    .form-consent input { accent-color: var(--accent-lime); margin-block-start: 4px; }
    .contact-form button { justify-self: start; cursor: pointer; border: 0; }

    .form-note {
        border-inline-start: 3px solid var(--accent-lime);
        background: light-dark(#f7f7f7, #101010);
        padding: 18px 22px;
        font-weight: 600;
    }
    .form-note.is-error { border-inline-start-color: #c0392b; }

    .contact-aside {
        display: grid;
        gap: clamp(22px, 2.6cqw, 36px);
        align-content: start;
        align-self: start;
        background: var(--surface-band, #f1f1ee);
        padding: clamp(24px, 3cqw, 44px);
    }
    .contact-aside section {
        border-block-start: 2px solid var(--text-primary);
        padding-block-start: 18px;
        display: grid;
        gap: 10px;
    }
    .contact-aside h3 {
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.18em;
    }
    .contact-aside p, .contact-aside address {
        font-style: normal;
        font-weight: 300;
        font-size: 0.98rem;
        line-height: 1.75;
        color: var(--text-secondary);
    }
    .contact-aside a { color: var(--accent-ink); font-weight: 700; }
}