/* ── About Us page — body content layout ────────────────────────────────────
 * Renders inside .fz-page-body-inner (the brand-blue body section provided
 * by page-shell, now with the page-bg-beams SVG background — same as FAQ
 * and T&C). The page-shell hero + cyan glow edge + global footer all
 * apply automatically via page-about-us.php.
 *
 * Single dark-glass panel hosts a 2-column grid: text on the left, a
 * neon-bordered photo on the right (capped so it never gets oversized).
 * Same glass recipe as .fz-faq-panel for visual unity across pages.
 */

.fz-about {
    width: 100%;
}

/* ── Glass panel — matches .fz-faq-panel for visual continuity ──────────── */

.fz-about-panel {
    position: relative;
    background: rgba(20, 20, 22, 0.28);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: clamp(28px, 4vw, 56px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .fz-about-panel {
        background: rgba(20, 20, 22, 0.78);
    }
}

/* ── 2-column grid — text + image ───────────────────────────────────────── */

.fz-about-grid {
    display: grid;
    /* Text gets a bit more room than the image so the photo never
       dominates and the paragraphs read at a comfortable measure. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

/* When the photo is missing the text column owns the full width so the
   page still reads as a complete About Us, not a half-broken layout. */
.fz-about-grid--text-only {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
}

/* ── Left column — copy ─────────────────────────────────────────────────── */

.fz-about-copy {
    min-width: 0;
}

.fz-about-copy p {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(0.98rem, 1.15vw, 1.1rem);
    line-height: 1.65;
    margin: 0 0 1.15rem;
}

.fz-about-copy strong {
    color: #ffffff;
    font-weight: 800;
}

.fz-about-tag {
    margin-top: 1.5rem;
    color: #ffffff;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    font-weight: 800;
    letter-spacing: 0.03em;
}

/* ── Right column — neon-glow photo ─────────────────────────────────────── */

.fz-about-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fz-about-image {
    display: block;
    /* Hard cap on the rendered size — the source asset can be larger,
       but at any viewport the image won't overflow this width. Prevents
       the "stupidly big" feel on wide screens. */
    max-width: 340px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 3px solid rgba(0, 240, 255, 0.88);
    box-shadow:
        0 0 0 1px rgba(0, 240, 255, 0.4),
        0 0 24px 6px rgba(0, 240, 255, 0.55),
        0 0 60px 18px rgba(0, 240, 255, 0.3);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .fz-about-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    /* Photo lands UNDER the text on tablet/mobile so reading order
       (Welcome → details → image) is preserved. */
    .fz-about-image-wrap { order: 2; }
    .fz-about-copy       { order: 1; }
    .fz-about-image {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .fz-about-panel {
        padding: 22px 18px;
    }
    .fz-about-image {
        max-width: 280px;
        box-shadow:
            0 0 0 1px rgba(0, 240, 255, 0.4),
            0 0 16px 4px rgba(0, 240, 255, 0.5),
            0 0 36px 12px rgba(0, 240, 255, 0.28);
    }
}

/* ── Contact form section — sits below the About Us panel, above the
   global location strip + footer. The .wpcf7-form card carries its own
   dark-glass styling from css/contact-form.css; this just provides the
   wrapping section + heading rhythm. */

.fz-contact-block {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.fz-contact-block-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.fz-contact-block-title {
    color: #ffffff;
    /* Standardised with the Family Fun Awaits + Activities desktop
       scale so every section title reads at the same visual weight. */
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
    line-height: 1.1;
    /* Heading sits over the lightest part of the SVG bg-beam crossing
       point. Stacked shadow (close + wide drop) ~1.5× the original
       intensity so the white text stays legible against the bright
       cyan-blue under it. */
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 4px 24px rgba(0, 0, 0, 0.35);
}

.fz-contact-block-intro {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 560px;
}

@media (max-width: 600px) {
    .fz-contact-block {
        margin-top: 2rem;
    }
}