/* ================================ */
/* About page                       */
/* ================================ */

/* Pull the hero up under the fixed header */
body.page-template-template-about .site-content { padding-block-start: 0; }

/* ---------- 1. Hero (100vh, featured image bg) ---------- */
.page-hero {
    position: relative;
    min-height: 100vh;
    background: var(--color-bg-dark) center/cover no-repeat;
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,20,40,0.35) 0%, rgba(15,20,40,0.65) 100%);
}
.page-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.page-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--color-text-inverse);
    margin: 0;
    line-height: var(--lh-tight);
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

/* ---------- 2. About section (image + WYSIWYG text) ---------- */
.about-section {
    padding-block: var(--space-20);
    background: var(--color-bg);
}
.about-section__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
}
.about-section__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}
.about-section__body .breadcrumb {
    margin-bottom: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.about-section__body .breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.about-section__body .breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.about-section__text {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    color: var(--color-text);
}
.about-section__text > * + * { margin-block-start: var(--space-4); }
.about-section__text h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: var(--color-heading);
    margin-block: var(--space-8) var(--space-4);
    line-height: var(--lh-tight);
}
.about-section__text h3 {
    font-size: var(--fs-xl);
    color: var(--color-heading);
    margin-block: var(--space-6) var(--space-3);
}
.about-section__text p   { margin: 0; }
.about-section__text strong { color: var(--color-heading); }
.about-section__text ul,
.about-section__text ol  { padding-inline-start: 1.5em; margin: 0; }
.about-section__text li  { margin-block-end: var(--space-2); }
.about-section__text a   { color: var(--color-primary); text-decoration: underline; }

/* Desktop: image on the visual LEFT (logical end in RTL) — text starts side */
@media (min-width: 1024px) {
    .about-section__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }
    html[dir="rtl"] .about-section__media { order: 2; }
    html[dir="rtl"] .about-section__body  { order: 1; }
}