/* ==========================================================================
   Section À propos (court) - split inverse 1fr / 1.4fr.
   Reproduction de A_About (design_handoff_museaux/direction-a.jsx).
   Dépend de watercolor-photo.css (la photo Mena utilise --soft).
   ========================================================================== */

.mdm-about {
    padding: 90px var(--m-page-padding);
}

.mdm-about__inner {
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: center;
}

/* - Colonne gauche : photo polaroid de Mena à l'atelier - */
.mdm-about__photo-frame {
    background: #fff;
    padding: 18px;
    border-radius: 6px;
    box-shadow: var(--m-paper-shadow);
    transform: rotate(-2deg);
    margin: 0;
}

.mdm-about__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 3px;
}

.mdm-about__photo-caption {
    text-align: center;
    font-family: var(--m-font-hand);
    font-size: 24px;
    margin-top: 10px;
    color: var(--m-ink);
    display: block;
    line-height: 1;
}

/* - Colonne droite : copy - */
.mdm-about__copy { }

.mdm-about__eyebrow {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 22px;
    color: var(--m-gold);
    margin-bottom: 6px;
}

.mdm-about__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 3vw + 1rem, 3.125rem); /* 32 → 50px */
    color: var(--m-ink);
    margin: 0 0 24px;
    line-height: 1.05;
}

.mdm-about__lead {
    font-family: var(--m-font-body);
    font-size: 17px;
    color: var(--m-ink-2);
    line-height: 1.7;
    margin: 0 0 18px;
}

.mdm-about__lead--last {
    margin: 0 0 28px;
}

.mdm-about__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid var(--m-ink);
    padding: 14px 24px;
    border-radius: var(--m-radius-pill);
    font-family: var(--m-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--m-ink);
    text-decoration: none;
    transition: background var(--m-fast) var(--m-ease),
                color var(--m-fast) var(--m-ease),
                transform var(--m-fast) var(--m-ease);
}

.mdm-about__cta:hover {
    background: var(--m-ink);
    color: var(--m-cream);
    transform: translateY(-1px);
}

/* - Responsive - */
@media (max-width: 900px) {
    .mdm-about { padding: var(--m-space-xl) var(--m-space); }
    .mdm-about__inner { grid-template-columns: 1fr; gap: 40px; }
    .mdm-about__photo-frame { max-width: 320px; margin: 0 auto; }
}