/* =====================================================================
   About page overrides
   Only minimal rules needed to make About hero match Home hero UX.
   Scoped to .page--about to avoid side effects.
   ===================================================================== */

/* Make About hero behave like the Home hero (flush under header). */
.page--about .hero {
    padding: 0;
}

.page--about .hero__wrap {
    display: flex;
    align-items: center;
    height: 90vh;
    border-bottom: 0;
    box-shadow: none;
}

/* Desktop hero background image (About uses its own image). */
.page--about .hero__wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/about-page/גילי-סיני-בק.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/* Same readability overlay as Home/Contact. */
.page--about .hero__wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    background-position: bottom;
    /* background: linear-gradient(
        90deg,
        rgba(247, 233, 235, 0) 0%,
        color-mix(in srgb, var(--c-surface) 40%, transparent) 35%,
        color-mix(in srgb, var(--c-surface) 75%, transparent) 70%,
        color-mix(in srgb, var(--c-surface) 75%, transparent) 75%,
        var(--c-surface) 100%
    ); */
    pointer-events: none;
    z-index: 0;
}

/* Keep content & photo above the background pseudo-elements. */
/* Desktop: show Gili portrait as a layered side visual (like the reference). */
.page--about .hero__media {
    display: block;
    position: absolute;

    /* Keep the full portrait visible (avoid clipping by .hero__wrap overflow:hidden) */
    inset-block-end: 0;
    /* Nudge toward the screen center (RTL: inline-start is right) */
    inset-inline-start: clamp(16px, 6vw, 120px);
    /* Keep it under the wave, above the background */
    z-index: 1;
    pointer-events: none;
}

/* About: keep the portrait clean (no white overlay wash). */
.page--about .hero__media::after {
    content: none;
}

/* Desktop portrait: no card frame; let it sit on the background. */
.page--about .hero__photo {
    width: 40vw;
    max-width: none;
    height: auto;

    aspect-ratio: auto;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    background: none;
    display: block;
}

.page--about .hero__inner {
    margin-top: auto;
    position: relative;
    z-index: 2;
    /* Move the content card to the opposite side on desktop (RTL aware) */
    justify-content: flex-end;
    align-items: center;
}

/* Make sure the content column stays on the right (RTL safe). */
.page--about .hero__wrap > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Home-like content card. */
.page--about .hero__content {
    display: inline-flex;
    align-self: flex-start;
    flex: 0 1 auto;
    width: fit-content;
    max-width: 62ch;
    border-radius: var(--r-lg);
    padding: clamp(var(--sp-16), 2vw, var(--sp-24));
}

.page--about .hero__title {
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--c-rose-400);
    margin-bottom: var(--sp-12);
}

.page--about .hero__title span {
    margin-top: var(--sp-8);
}

/* Wave (desktop): use the wrap-attached wave like Home. */
.page--about .hero__wrap > .section-wave {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(56px, 7vw, 120px);
    display: block;
    /* Keep the wave above the portrait so it looks like it's coming from below */
    z-index: 2;
    pointer-events: none;
    bottom: -2px;
}

.page--about .section-wave path {
    position: relative;
    z-index: 1;
    fill: var(--c-surface);
    stroke: var(--c-gold-400);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

/* Hide the media-attached wave on desktop (it is used on mobile). */
.page--about .hero__media .section-wave {
    display: none;
}
.page--about .hero__lead {
    color: var(--c-text-2);
    font-size: var(--fs-24);
    line-height: 1.6;
    margin-bottom: var(--sp-20);
}

@media (max-width: 1300px) {
    .page--about .hero__wrap::before {
        background-image: url("/images/about-page/גילי-סיני-בק.png");
        background-position: bottom;
    }
}

/* Tablet/mobile: stack like the reference (image on top, text below). */
@media (max-width: 1000px) {
    .page--about .hero__wrap {
        flex-direction: column-reverse;
        height: auto;
        align-items: stretch;
        margin-top: -3px;
    }

    /* Mobile/tablet: use the wave attached to the top visual; hide the desktop wave */
    .page--about .hero__wrap > .section-wave {
        display: none;
    }

    /* Like Home: on smaller widths the visual sits on top as its own block,
       so the content naturally flows below it. */
    .page--about .hero__wrap::before,
    .page--about .hero__wrap::after {
        content: none;
    }

    /* Override global .hero__media { order: 2; } from style.css */
    .page--about .hero__media {
        order: 2;
        display: block;
        position: relative;
        inset: auto;
        width: 100%;
        padding: 0;
        pointer-events: none;
        background-image: url("/images/about-page/2גילי-סיני-בק.png");
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
        min-height: clamp(280px, 38vw, 520px);
    }

    .page--about .hero__wrap > .container {
        order: 0;
        width: 100%;
    }

    .page--about {
        --home-wave-h: clamp(48px, 9vw, 96px);
    }

    /* Prevent shared mobile rules from pulling the content over the image. */
    .page--about .hero__inner {
        margin-top: 0;
        padding: var(--sp-20);
        align-items: stretch;
    }

    .page--about .hero__content {
        margin-top: 0;
        width: 100%;
        max-width: none;
    }

    .page--about .hero__photo {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        background: none;
        display: block;
    }
    .page--about .hero__media {
        background-position: bottom;
    }
    .page--about .hero__media .section-wave {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: var(--home-wave-h);
        display: block;
        z-index: 1;
        pointer-events: none;
    }

    .page--about .hero__media .section-wave path {
        fill: var(--c-surface);
        stroke: var(--c-gold-400);
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        stroke-linecap: round;
        stroke-linejoin: round;
        paint-order: stroke fill;
    }

    /* Match Home: disable desktop background image/overlay on mobile. */
    /* .page--about .hero__wrap::before,
    .page--about .hero__wrap::after {
        content: none;
    } */
    .page--about .hero__lead {
        color: var(--c-text);
        font-size: var(--fs-16);
        line-height: 1.6;
        margin-bottom: var(--sp-20);
    }
}

/* About service image styling (safe defaults) */
.aboutIntro__logo {
    border-radius: 999px !important;
}
.aboutTeaser__logo {
    width: 100%;
    height: auto;
    border-radius: 40px;
    object-fit: cover;
}

/* CTA row */
.aboutService__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    flex-wrap: wrap;
    margin-top: var(--sp-10);
}

/* Responsive: keep natural stacking on mobile */
@media (max-width: 860px) {
    .aboutTeaser__inner--reverse {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    /* Global mobile styles set a fixed hero height; About must grow with content
       to avoid overlapping the next section. */
    .page--about .hero {
        height: auto;
    }

    .page--about .hero__media {
        order: 2;
        display: block;
        position: relative;
        inset: auto;
        width: 100%;
        padding: 0;
        pointer-events: none;
        background-image: url("/images/about-page/3גילי-סיני-בק.png");
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        min-height: clamp(280px, 38vw, 520px);
    }
    .page--about {
        --home-wave-h: clamp(80px, 25vw, 92px);
    }
}
/* ================= About – readability only (no text changes) ================= */

.page--about .aboutTeaser__content {
    max-width: 68ch; /* комфортная ширина чтения */
}

.page--about .aboutCopy {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12); /* ровные интервалы между абзацами */
}

.page--about .aboutCopy p {
    margin: 0; /* gap управляет отступами */
    line-height: 1.9; /* легче читается */
    color: var(--c-text-2);
    text-wrap: pretty; /* аккуратные переносы */
}

.page--about .aboutCopy p {
    position: relative;
    padding-inline-start: 18px; /* место под кружок */
}

.page--about .aboutCopy p::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; /* в RTL станет справа, в LTR — слева */
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--c-rose-400);
    box-shadow: 0 0 0 4px var(--c-rose-100);
}

.page--about .aboutCopy p:last-child {
    margin-bottom: 0;
}

/* Чуть больше акцента на “note” строках, но без нового текста */
.page--about .aboutService__note {
    font-weight: 600;
    color: var(--c-rose-400) !important;
}

/* ===== Rishayon section (center + gold frame) ===== */
#rishayon-sohenet {
    padding-block: var(--sp-24, 24px);
    text-align: center;
}

#rishayon-sohenet .rishayon-sohenet-inner {
    display: grid;
    place-items: center;
    margin: var(--sp-14, 14px);
}

#rishayon-sohenet .rishayon-sohenet__image {
    width: min(720px, 100%);
    height: auto;
    display: block;
    border-radius: 18px;
    border: 1px solid rgba(214, 177, 91, 0.55); /* gold тонкая обводка */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); /* небольшая тень */
    background: #fff;
}

/* На узких экранах чуть шире блок, чтобы не было “узкой колонки” */
@media (max-width: 860px) {
    .page--about .aboutTeaser__content {
        max-width: 72ch;
    }
}

.page--about .section__title {
    margin-bottom: var(--sp-20);

    /* ключевое: линия становится частью заголовка */
    display: flex;
    justify-content: center;
    align-items: stretch; /* линия растягивается по высоте заголовка */
    gap: 14px;

    text-align: center;
    padding-block: 6px; /* чтобы линия не прилипала к краям */
}

.page--about .section__title::before {
    content: "";
    flex: 0 0 2px; /* толщина линии */
    border-radius: 999px;
    background: var(--c-gold-300);
    opacity: 0.95;
}

/* Мобилка: чуть тоньше и ближе */
@media (max-width: 560px) {
    .page--about .section__title {
        gap: 12px;
        padding-block: 4px;
    }
    .page--about .section__title::before {
        flex-basis: 1px;
    }
}