/* ─────────────────────────────────────────────────────────────
   About — "Ποιοί είμαστε"
   Full-bleed photograph with the postcard laid over its lower edge,
   the same composition v1 drew and the home page now uses.
   ───────────────────────────────────────────────────────────── */

.jm-about-intro {
    position: relative;
    background: var(--bg-white);
    /* No top padding: the seam panel above supplies the transition from
       the hero, and it needs the two photographs close enough together to
       lie across both. */
    padding-bottom: clamp(56px, 8vw, 112px);
}

.jm-about-intro__media {
    position: relative;
    height: clamp(340px, 44vw, 560px);
    overflow: hidden;
    background: var(--primary-dark);
}

.jm-about-intro__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    border-radius: 0;
}

/* Centred rather than pushed to one side: this card carries three
   paragraphs, so it is wider than the home page's and has no room to hang
   off to the right without crowding the edge of the screen. */
.jm-about-intro__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: clamp(-170px, -16vw, -90px);
    /* The panel gutter rather than the container's wider default, so the
       card lines up with the acquisitions panel further down the page —
       on a phone the two were inset by different amounts. */
    padding-inline: clamp(12px, 2.4vw, 28px);
}

.jm-about-intro__card {
    width: 100%;
    max-width: 780px;
}

.jm-about-intro__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.24;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.jm-about-intro__rule {
    margin: clamp(18px, 2.2vw, 26px) auto clamp(20px, 2.4vw, 28px);
}

.jm-about-intro__text {
    margin-inline: auto;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: 1.85;
}

.jm-about-intro__text p { margin: 0 0 var(--sp-5); }
.jm-about-intro__text p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
    .jm-about-intro__overlay { margin-top: clamp(-110px, -14vw, -64px); }
}