/* ============================================================
   INFO STRIP — BASE SECTION
============================================================ */

.info-strip {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    text-align: center;
}

/* Container uses the global system */
.info-strip .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

/* ============================================================
   BACKGROUND VARIANTS (matches ACF output)
============================================================ */

.info-strip--purple {
    background: var(--color-purple);
    color: var(--color-white);
}

.info-strip--gold {
    background: var(--color-gold);
    color: var(--color-white);
}

.info-strip--white {
    background: var(--color-white);
    color: var(--color-black);
}

/* ============================================================
   INNER LAYOUT — ALWAYS STACKED, CENTERED
============================================================ */

.info-strip__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* ============================================================
   LOGO
============================================================ */

.info-strip__logo {
    width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================================================
   TEXT COLUMN
============================================================ */

.info-strip__col--right {
    max-width: 700px;
    margin: 0 auto;
}

/* ============================================================
   EYEBROW TITLE — GOLD, OPEN SANS, CUSTOM SIZE
============================================================ */

.info-strip__title {
    font-family: var(--font-body-family); /* Open Sans */
    font-size: 25px;                      /* per request */
    line-height: 56px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: var(--space-xs);
    color: var(--color-gold);
    text-align: center;
}

/* Change title colour automatically depending on background */
.info-strip--white .info-strip__title {
    color: var(--color-gold);
}

.info-strip--purple .info-strip__title,
.info-strip--gold .info-strip__title {
    color: var(--color-gold); /* stays gold on all backgrounds */
}

/* ============================================================
   BODY TEXT
============================================================ */

.info-strip__text p {
    font-family: var(--font-body-family);
    font-size: var(--font-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-xs);
    text-align: center;
}

/* Text colour adapts to variant */
.info-strip--purple .info-strip__text p,
.info-strip--gold .info-strip__text p {
    color: var(--color-white);
}

.info-strip--white .info-strip__text p {
    color: var(--color-black);
}

.info-strip__text p em {
    font-style: italic;
}

/* ============================================================
   RESPONSIVE (no major changes needed)
============================================================ */

@media (max-width: 1024px) {
    .info-strip__inner {
        gap: var(--space-sm);
    }
}

/* ============================================================
   INFO STRIP — BASE SECTION
   (must override global `section {}` rule)
============================================================ */

section.info-strip {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    background: transparent; /* default, modified by variants */
    text-align: center;
}

/* Background variants (from ACF field) */
.info-strip--purple { background: var(--color-purple); color: var(--color-white); }
.info-strip--gold   { background: var(--color-gold);   color: var(--color-white); }
.info-strip--white  { background: var(--color-white);  color: var(--color-black); }

/* ============================================================
   LAYOUT
============================================================ */

.info-strip__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* Logo */
.info-strip__logo {
    width: 260px;
    height: auto;
    margin: 0 auto;
}

/* Text column */
.info-strip__col--right {
    max-width: 700px;
    margin: 0 auto;
}

/* ============================================================
   EYEBROW/TITLE FIX — MUST OVERRIDE `h3 {}` GLOBAL RULE
============================================================ */

.info-strip__title {
    font-family: var(--font-body-family) !important; /* force Open Sans */
    font-size: 20px !important;                      /* override var(--font-h3) */
    line-height: 56px !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    margin-bottom: var(--space-xs);
    color: var(--color-gold) !important;             /* override h3 purple */
    text-align: center;
}

/* FIX: Restore background variants properly */
section.info-strip.info-strip--purple {
    background: var(--color-purple) !important;
    color: var(--color-white) !important;
}

section.info-strip.info-strip--gold {
    background: var(--color-gold) !important;
    color: var(--color-white) !important;
}

section.info-strip.info-strip--white {
    background: var(--color-white) !important;
    color: var(--color-black) !important;
}