/* =============================================================
   ⚠️  DO NOT OVERWRITE THIS FILE  ⚠️
   ============================================================
   This is the LIVE production CSS for §2 Intro (v7a Classic) on
   post 333930 (https://...margot.../fec-hero-test-editorial/).
   David picked v7a Classic 2026-05-04. The v7a markup uses the
   .fec-intro-v7a-* class namespace. THIS file's rules are scoped
   to body.page-id-333930 + .fec-intro-v7a-* selectors.
   
   If you are an agent considering replacing this file with a new
   §2 design (e.g. the V8 "EU MAP ANCHORED" brief in
   Dokumentation/shape-introduction-2026-05-04.md): STOP. That brief
   needs to be coordinated as MARKUP + CSS together. Replacing only
   the CSS file leaves the v7a markup unstyled. Talk to David first.
   
   Restore source: staging/v7a-intro-2026-05-04/fec-intro-v7a-classic.final.css
   Page-id swap applied: 333956 → 333930
   ============================================================ */

/* =============================================================
   FEC §2 Introduction — V7A "CLASSIC MODERNIZED"
   Slug: fec-intro-v7a-classic   |   Post: 333956
   White bg · text left / photo right (60/40)
   EU-stars halo around photo · Fraunces italic on "leading"
   Locked Navy pill CTAs (live-site spec)
   Palette: #283582 Navy · #3ca3dd Cyan · #ffffff · #333333 + greys
   Fonts: Rubik (eyebrow/buttons) · Avenir (body) · Fraunces (1 word)
   ============================================================= */

/* -------------------------------------------------------------
   1. @font-face — Rubik + Avenir (mirror of editorial hero)
   ------------------------------------------------------------- */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-regular.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-500.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-500.woff') format('woff');
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-600.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-600.woff') format('woff');
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
         url('fonts/rubik-v26-latin-700.woff2') format('woff2'),
         url('fonts/rubik-v26-latin-700.woff') format('woff');
}
@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/Avenir-Light.woff2') format('woff2'),
         url('fonts/Avenir-Light.woff') format('woff');
}
@font-face {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
         url('fonts/Avenir-Black.woff2') format('woff2'),
         url('fonts/Avenir-Black.woff') format('woff');
}

/* Fraunces from Google Fonts — opsz 9..144, wght 100..900, italic */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap');

/* -------------------------------------------------------------
   2. Section root — pure white, generous spacing, soft bottom rhyme
   ------------------------------------------------------------- */
body.page-id-333930 #page-container,
body.page-id-333930 #et-main-area,
body.page-id-333930 #main-content {
    background-color: #ffffff;
}

body.page-id-333930 .fec-intro-v7a-section {
    position: relative;
    overflow: hidden;
    background-color: #ffffff !important;
}

/* subtle top hairline for editorial section-rhythm (very light grey) */
body.page-id-333930 .fec-intro-v7a-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 1240px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(40, 53, 130, 0) 0%,
        rgba(40, 53, 130, 0.10) 30%,
        rgba(40, 53, 130, 0.10) 70%,
        rgba(40, 53, 130, 0) 100%
    );
    pointer-events: none;
}

/* -------------------------------------------------------------
   3. Row + columns — 60/40, vertical center alignment
   ------------------------------------------------------------- */
body.page-id-333930 .fec-intro-v7a-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}

body.page-id-333930 .fec-intro-v7a-row .fec-intro-v7a-col-text {
    padding-right: 40px;
}

@media (max-width: 980px) {
    body.page-id-333930 .fec-intro-v7a-row {
        display: block !important;
    }
    body.page-id-333930 .fec-intro-v7a-row .fec-intro-v7a-col-text {
        padding-right: 0;
    }
}

/* -------------------------------------------------------------
   4. Eyebrow — system spec: Rubik 600 13px Cyan-light tracked uppercase.
       Plain "INTRODUCTION" (David removed the §-prefix experiment
       2026-05-04: too editorial for the calm intro register).
   ------------------------------------------------------------- */
body.page-id-333930 .fec-intro-v7a-eyebrow p {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #5fb8e8;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------
   5. Headline H2 — Fraunces Display (modernized 2026-05-04)
       Editorial display serif replaces Rubik 700; tighter line + tracking,
       larger size, mixed roman + WONK italic. Reads magazine, not SaaS.
   ------------------------------------------------------------- */
body.page-id-333930 .fec-intro-v7a-h2 {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: #283582;
    margin: 0;
    padding: 0;
    text-wrap: balance;
}

body.page-id-333930 .fec-intro-v7a-h2-italic {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: #3ca3dd;
    /* italic word reads slightly larger for display-headline contrast */
    font-size: 1.04em;
    letter-spacing: -0.012em;
    padding-right: 4px;
}

/* -------------------------------------------------------------
   6. Body — Avenir, generous line-height, restrained grey
   ------------------------------------------------------------- */
body.page-id-333930 .fec-intro-v7a-body .fec-intro-v7a-p {
    font-family: 'Avenir', 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.12vw, 18px);
    line-height: 1.78;
    color: #4a4a4a;
    margin: 0 0 22px 0;
    padding: 0;
    max-width: 60ch;
}

body.page-id-333930 .fec-intro-v7a-body .fec-intro-v7a-p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------
   7. CTA pair — locked Navy pill with arrow icon
       (matches feedback_fec_button_style.md spec)
   ------------------------------------------------------------- */
body.page-id-333930 .fec-intro-v7a-cta-buttons,
body.page-id-333930 .fec-intro-v7a-cta-buttons .et_pb_text_inner {
    /* mirror Hero: text-align:left, no top margin. The actual button-to-button
       gap is set by margin-right on each link below to match Hero exactly. */
    text-align: left;
    margin-top: 0;
}

body.page-id-333930 .fec-intro-v7a-cta-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Hero parity (2026-05-04 David): button-to-button spacing comes from
       margin-right:12px / margin-bottom:8px, matching .fec-hero-cta-link. */
    margin: 0 12px 8px 0;
    width: max-content;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    background-color: #283582;
    border: 0;
    border-radius: 35px;
    padding: 25px 35px;
    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease,
        background-color 0.32s ease;
    will-change: transform;
}

body.page-id-333930 .fec-intro-v7a-cta-link::before,
body.page-id-333930 .fec-intro-v7a-cta-link::after {
    display: none;
    content: none;
}

body.page-id-333930 .fec-intro-v7a-cta-arrow {
    display: inline-block;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    transform: translateX(0);
    transition: transform 0.32s ease;
}

body.page-id-333930 .fec-intro-v7a-cta-link:hover {
    /* §2-only override — keep the lock-spec scale, drop the cyan glow.
       Section is on white, so the hero's cyan halo would compete with
       the body palette here (2026-05-04 David). */
    box-shadow: none;
    transform: scale(1.03);
    color: #ffffff;
    background-color: #283582;
}

body.page-id-333930 .fec-intro-v7a-cta-link:hover .fec-intro-v7a-cta-arrow {
    transform: translateX(4px);
}

body.page-id-333930 .fec-intro-v7a-cta-link:focus-visible {
    outline: 2px solid #3ca3dd;
    outline-offset: 4px;
}

/* -------------------------------------------------------------
   8. Photo + EU-stars halo
       Modernized: stars positioned bottom-right (asymmetric),
       softer opacity, very slow counter-clockwise drift.
   ------------------------------------------------------------- */
body.page-id-333930 .fec-intro-v7a-col-photo {
    /* keep tight — column wraps the figure */
}

body.page-id-333930 .fec-intro-v7a-photo-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

body.page-id-333930 .fec-intro-v7a-figure {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* shrunk 520→400px so the rotating stars halo reads as a ring around
       the photo rather than a tight rim (2026-05-04 David). */
    max-width: 400px;
    margin-left: auto;
    margin-right: 0;
    isolation: isolate;
}

@media (max-width: 980px) {
    body.page-id-333930 .fec-intro-v7a-figure {
        max-width: 360px;
        margin: 48px auto 0 auto;
    }
}

/* The stars halo — sits BEHIND the photo. Inset pushed from -8% to -22%
   so the visible rotating ring beyond the photo edge is ~3× wider and the
   counter-clockwise drift actually reads. Opacity nudged 0.78→0.72 to
   keep it ambient, not competing with the portrait. */
body.page-id-333930 .fec-intro-v7a-stars {
    position: absolute;
    inset: -22% -22% -22% -22%;
    background-image: url('https://frequent-coachingzentrum-margot.aweos.dev/wp-content/uploads/2026/05/fec-stars-blue-grey.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    opacity: 0.72;
    z-index: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    animation: fec-intro-v7a-stars-drift 60s linear infinite;
    will-change: transform;
}

@keyframes fec-intro-v7a-stars-drift {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }  /* counter-clockwise, very slow */
}

@media (prefers-reduced-motion: reduce) {
    body.page-id-333930 .fec-intro-v7a-stars {
        animation: none;
    }
}

/* The photo itself — object-fit:contain lets the full source frame show
   inside the circle (was `cover` which cropped sides aggressively, hiding
   the edge attendees). Background nudged to Cool-white #f5f7fb so the thin
   letterbox above/below the group reads as a soft brand-tinted ring rather
   than blank white (2026-05-04 David). */
body.page-id-333930 .fec-intro-v7a-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    box-shadow:
        0 24px 60px rgba(40, 53, 130, 0.18),
        0 8px 20px rgba(40, 53, 130, 0.10);
    background-color: #f5f7fb;
}

/* -------------------------------------------------------------
   9. Mobile / tablet refinement
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    body.page-id-333930 .fec-intro-v7a-section {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
    body.page-id-333930 .fec-intro-v7a-cta-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    body.page-id-333930 .fec-intro-v7a-cta-link {
        width: 100%;
        justify-content: space-between;
        padding: 22px 28px;
        font-size: 16px;
    }
}

/* -------------------------------------------------------------
   10. Reset / safety overrides — Divi text-module body inherits
   ------------------------------------------------------------- */
body.page-id-333930 .fec-intro-v7a-section .et_pb_text {
    color: inherit;
}

body.page-id-333930 .fec-intro-v7a-section .et_pb_text_inner {
    line-height: inherit;
}