/* ==========================================================================
   Life at the Ashram
   An editorial photo mosaic: one large frame, four supporting frames and a
   wide strip underneath. Photos are real course photography, so the layout
   gives the best one room to breathe instead of treating them all as equal
   thumbnails. Shares the --course-* tokens with the rest of the site.
   ========================================================================== */

.sya-life {
    --lf-earth: var(--course-earth, #7b6d61);
    --lf-earth-dark: var(--course-earth-dark, #62564d);
    --lf-gold: var(--course-gold, #c79c66);
    --lf-cream: var(--course-cream, #fbf7f1);
    --lf-ink: var(--course-ink, #3f3832);
    --lf-line: var(--course-line, rgba(123, 109, 97, 0.22));

    /* A deliberate dark band rather than another white or cream one. Two
       reasons: photographs read far better against a dark surround, and the
       page alternates white/cream, so dropping a third section into that chain
       would force every band after it to flip. A dark band never collides. */
    background: #332d28;
    padding: 76px 0 84px;
}

.sya-life.sya-band-cream {
    background: var(--lf-cream);
}

.sya-life.sya-band-white {
    background: var(--course-card, #fff);
}

.sya-life * {
    box-sizing: border-box;
}

.sya-life-inner {
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 16px;
}

/* ---------- Heading ---------- */
.sya-life-head {
    margin-bottom: 34px;
    text-align: center;
}

.sya-life-eyebrow {
    color: var(--lf-gold);
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* On the dark band the heading has to be light. site-ui.css forces heading
   colour with an important flag, so these need the same weight to win. */
body#bg .sya-life .sya-life-head h2,
.sya-life-head h2 {
    color: #fdfaf6 !important;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.2;
    margin: 0 0 12px;
}

body#bg .sya-life .sya-life-head h2 span,
.sya-life-head h2 span {
    color: var(--lf-gold) !important;
}

/* ---------- Heading ornament ---------- */
/* The site's calligraphic divider, same asset and proportions as every other
   section heading. Its rules live under `.section-full .container`, which this
   component is not, so it has to be stated here. Inverted because the artwork
   is dark ink for a light page and this band is dark. */
.sya-life-head h2::after {
    aspect-ratio: 4161 / 484;
    background-image: url("../images/decorative/retro-calligraphic-heading-divider.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    display: block;
    filter: invert(1);
    height: auto;
    margin: 18px auto 16px;
    opacity: 0.7;
    pointer-events: none;
    width: clamp(160px, 18vw, 220px);
}

.sya-life-sub {
    color: rgba(253, 250, 246, 0.78);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto;
    /* was 660px, which wrapped to a narrow column under a much wider heading.
       Other section intros on the site run the full container width. */
    max-width: none;
}

/* ---------- Mosaic ---------- */
.sya-life-grid {
    display: grid;
    gap: 14px;
    grid-auto-rows: 190px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* first frame is the hero of the set, last one is a full width strip */
.sya-life-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.sya-life-item:nth-child(6) {
    grid-column: span 4;
}

.sya-life-item {
    background: rgba(255, 255, 255, 0.06);
    border: 0;
    border-radius: 14px;
    cursor: zoom-in;
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

.sya-life-item img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
    width: 100%;
}

.sya-life-item:hover img,
.sya-life-item:focus-visible img {
    transform: scale(1.06);
}

/* ---------- Caption ---------- */
.sya-life-cap {
    background: linear-gradient(to top, rgba(35, 30, 26, 0.82) 0%, rgba(35, 30, 26, 0.45) 55%, rgba(35, 30, 26, 0) 100%);
    bottom: 0;
    color: #fff;
    font-size: 14px;
    left: 0;
    line-height: 1.4;
    opacity: 0;
    padding: 34px 16px 14px;
    position: absolute;
    right: 0;
    text-align: left;
    transform: translateY(8px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.sya-life-item:hover .sya-life-cap,
.sya-life-item:focus-visible .sya-life-cap {
    opacity: 1;
    transform: translateY(0);
}

.sya-life-item:nth-child(1) .sya-life-cap {
    font-size: 16px;
}

/* a soft focus ring for keyboard users */
.sya-life-item:focus-visible {
    outline: 3px solid var(--lf-gold);
    outline-offset: 3px;
}

/* ---------- Lightbox ---------- */
.sya-life-box {
    align-items: center;
    background: rgba(28, 24, 21, 0.9);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 99999;
}

.sya-life-box.is-open {
    display: flex;
}

.sya-life-box figure {
    margin: 0;
    max-height: 92vh;
    text-align: center;
}

.sya-life-box img {
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    max-height: 82vh;
    max-width: 92vw;
    object-fit: contain;
}

.sya-life-box figcaption {
    color: #f3ece4;
    font-size: 15px;
    margin-top: 14px;
}

.sya-life-box-close {
    background: #fff;
    border: 0;
    border-radius: 50%;
    color: var(--course-ink, #3f3832);
    cursor: pointer;
    font-size: 24px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 22px;
    top: 22px;
    width: 44px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .sya-life-grid {
        grid-auto-rows: 165px;
    }
}

@media (max-width: 767px) {
    .sya-life {
        padding: 52px 0 58px;
    }

    .sya-life-grid {
        gap: 10px;
        grid-auto-rows: 132px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sya-life-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .sya-life-item:nth-child(6) {
        grid-column: span 2;
    }

    /* no hover on touch, so the caption stays visible on the two big frames */
    .sya-life-item:nth-child(1) .sya-life-cap,
    .sya-life-item:nth-child(6) .sya-life-cap {
        opacity: 1;
        transform: none;
    }

    .sya-life-cap {
        font-size: 13px;
        padding: 26px 12px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sya-life-item img,
    .sya-life-cap {
        transition: none;
    }

    .sya-life-item:hover img {
        transform: none;
    }
}