/* ==========================================================================
   CHI SIAMO PAGE — Pink Vision Ottica
   Dipende da homepage.css per i token (:root custom properties).
   Layout misto: sezioni testo-only centrate + sezioni immagine+testo zigzag.
   ========================================================================== */


/* ── Sezione base ───────────────────────────────────────────────────────── */

.wp-block-group.about-section {
    padding-block: var(--space-16) !important;
    padding-inline: var(--space-4) !important;
}

.about-section--warm {
    background: var(--color-bg-warm) !important;
}

.about-section--white {
    background: var(--color-white) !important;
}


/* ── Sezione solo testo (centrata) ──────────────────────────────────────── */

.about-section .about-inner {
    max-width: 820px !important;
    margin-inline: auto !important;
}


/* ── Sezione con colonne immagine + testo ───────────────────────────────── */

.about-section .wp-block-columns.about-cols {
    max-width: 1200px !important;
    margin-inline: auto !important;
    gap: var(--space-8) !important;
    align-items: center !important;
}


/* ── Immagine ───────────────────────────────────────────────────────────── */

.about-col-img .wp-block-image img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    border-radius: 1rem !important;
    display: block !important;
}

/* Placeholder */
.about-col-img .wp-block-image img[src=""],
.about-col-img .wp-block-image img:not([src]) {
    background: var(--color-surface) !important;
    min-height: 380px !important;
}


/* ── Testo nelle colonne ────────────────────────────────────────────────── */

.about-col-text .about-title,
.about-inner .about-title {
    font-family: var(--font-primary) !important;
    font-size: var(--text-h2) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--leading-tight) !important;
    color: var(--color-text-dark) !important;
    margin-block-end: var(--space-6) !important;
}

.about-col-text .about-text,
.about-inner .about-text {
    font-family: var(--font-primary) !important;
    font-size: var(--text-body) !important;
    font-weight: var(--font-weight-light) !important;
    line-height: var(--leading-normal) !important;
    color: var(--color-text-body) !important;
    margin-block-end: var(--space-4) !important;
}

.about-col-text .about-text:last-child,
.about-inner .about-text:last-child {
    margin-block-end: 0 !important;
}

.about-col-text .about-text strong,
.about-inner .about-text strong {
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-dark) !important;
}


/* ── Link interni ───────────────────────────────────────────────────────── */

.about-section .about-text a {
    color: var(--color-primary-dark) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.about-section .about-text a:hover,
.about-section .about-text a:focus-visible {
    color: var(--color-primary) !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
    .about-section .wp-block-columns.about-cols {
        flex-direction: column !important;
    }

    /* Mobile: testo sempre prima, immagine dopo */
    .about-section .wp-block-column.about-col-text {
        order: 1 !important;
    }

    .about-section .wp-block-column.about-col-img {
        order: 2 !important;
    }

    .about-col-img .wp-block-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }
}

@media (max-width: 600px) {
    .wp-block-group.about-section {
        padding-block: var(--space-12) !important;
    }
}