/* Stories group: blog, blog detail, events, event detail, media, gallery.
   Composes tokens and components from ../sewainternational.css. Tokens only, mobile first. */

/* ---------- Shared ---------- */
.story-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-small);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* Meta line inside the page header: small print, not lede-sized. */
.page-hero > .story-meta {
    margin-top: var(--space-4);
    max-width: none;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-muted);
}

.page-hero .story-meta .tag:not(.tag--important, .tag--urgent) { background: var(--navy-100); }

/* An h2 that sits in an empty state reads at h3 size. */
.empty-state__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-text);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

/* Lead photo on a post or event: never cropped, never upscaled past its own size.
   A photo narrower than the column sits at its natural width, left-aligned, with no mat around it. */
.story__figure { margin: 0 0 var(--space-7); }

.story__figure img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(75vh, 640px);
    margin: 0;
    border-radius: var(--radius);
}

/* ---------- Blog listing ---------- */
.story-feature {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.story-feature__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--navy-100);
}

.story-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: opacity var(--dur) var(--ease);
}

.story-feature__media:hover img { opacity: 0.92; }

.story-feature__body .story-meta { margin-bottom: var(--space-3); }

.story-feature__title {
    margin-bottom: var(--space-4);
    font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.375rem);
    line-height: 1.2; /* room for Devanagari matras */
}

.story-feature__title a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.story-feature__title a:hover { color: var(--navy-700); text-decoration-color: currentColor; }

.story-feature__excerpt {
    max-width: 60ch;
    margin-bottom: var(--space-6);
    color: var(--ink-muted);
}

@media (min-width: 900px) {
    .story-feature {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-8);
    }
}

.story-grid { --grid-min: 300px; }
.story-grid > .empty-state { grid-column: 1 / -1; }
.story-grid .media-card__title { line-height: 1.4; }

/* ---------- Blog post ---------- */
/* The article column shares its left edge with the page header above it. */
.story__body-col { max-width: 760px; }

.story__title { line-height: 1.2; } /* Devanagari titles need more leading than 1.08 */

.story__body { font-size: var(--text-body); }

/* CKEditor writes justified paragraphs; ragged-right reads better at every width. */
.story__body [style*="justify"] { text-align: start !important; }

.story__body img[style*="float:right"],
.story__body img[style*="float: right"] { margin: var(--space-1) 0 var(--space-4) var(--space-5); }

.story__body img[style*="float:left"],
.story__body img[style*="float: left"] { margin: var(--space-1) var(--space-5) var(--space-4) 0; }

@media (max-width: 640px) {
    .story__body img[style*="float"] {
        float: none !important;
        width: 100% !important;
        margin: 0 0 var(--space-4);
    }
}

.story__footer {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

/* ---------- Events ---------- */
/* Event listing: an agenda of rows, so any number of events lays out cleanly.
   Every row leads with a compact date tile; a photo joins the row only where one exists. */
.event-list { display: grid; gap: var(--space-6); }
.event-list > li + li { padding-top: var(--space-6); border-top: 1px solid var(--line); }

.event-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.event-item__date {
    display: grid;
    justify-items: center;
    padding-block: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--navy-50);
    color: var(--navy-800);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.event-item__day {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
}

.event-item__month {
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-align: center;
}

/* On phones the photo leads the row, full width. */
.event-item__media {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--navy-50);
}

.event-item__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 720px) {
    .event-item { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-6); }
    .event-item--photo { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 280px); }
    .event-item__day { font-size: 2.25rem; }
    .event-item__media { grid-column: 3; grid-row: 1; }
}

.event-item__body { display: grid; gap: var(--space-2); justify-items: start; }

.event-item__title {
    margin: 0;
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    line-height: 1.25;
}

.event-item__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* The whole row is the link target. */
.event-item__link::after { content: ""; position: absolute; inset: 0; }
.event-item:hover .event-item__link { color: var(--navy-700); text-decoration-color: currentColor; }
.event-item__link:focus-visible { outline: none; }
.event-item:has(.event-item__link:focus-visible) {
    outline: 2px solid var(--navy-800);
    outline-offset: 6px;
    border-radius: var(--radius);
}

.event-item__place { margin: 0; color: var(--ink-muted); }
.event-item__place .fa-location-dot { margin-right: var(--space-1); color: var(--ink-subtle); }

.event-item__more {
    margin: var(--space-2) 0 0;
    font-weight: 600;
    color: var(--navy-800);
}

.event-item__more i { margin-left: var(--space-1); font-size: 0.8em; }

/* Event detail */
.event-layout {
    display: grid;
    gap: var(--space-7);
    align-items: start;
}

.event-layout__footer { margin-top: 0; }

@media (min-width: 900px) {
    .event-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7) var(--space-8); }
    .event-facts { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
    .event-layout__footer { grid-column: 1; }
}

.event-facts__title {
    margin-bottom: var(--space-3);
    font-family: var(--font-text);
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.event-facts dl { margin: 0 0 var(--space-5); }

.event-facts__row {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-top: 1px solid var(--line);
}

.event-facts dt {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ink-muted);
}

.event-facts dt i { width: 1.1em; margin-right: var(--space-1); color: var(--ink-subtle); }

.event-facts dd {
    margin: 0;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.event-rows { display: grid; gap: var(--space-3); }

.event-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: inherit;
    transition: border-color var(--dur) var(--ease);
}

.event-row:hover { border-color: var(--line-input); }
.event-row:hover .event-row__name { text-decoration-color: currentColor; }

.event-row__date {
    display: grid;
    justify-items: center;
    padding-block: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--navy-50);
    color: var(--navy-800);
    line-height: 1.1;
}

.event-row__day { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.event-row__month { font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); }

.event-row__body { display: grid; gap: 2px; }

.event-row__name {
    font-weight: 600;
    color: var(--navy-800);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--dur) var(--ease);
}

.event-row__place { font-size: var(--text-small); color: var(--ink-muted); }
.event-row__arrow { color: var(--ink-subtle); font-size: 0.875rem; }

/* ---------- Media (videos) ---------- */
.video-grid > .empty-state { grid-column: 1 / -1; }

.video-card { display: flex; flex-direction: column; }

.video-card__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--navy-900);
}

.video-card__frame :is(iframe, video) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card__body { padding-top: var(--space-4); }

.video-card__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-text);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}

.video-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-5);
    margin: 0;
    font-size: var(--text-small);
    color: var(--ink-muted);
}

.video-card__source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--navy-800);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.video-card__source:hover { color: var(--navy-700); }
.video-card__source i { font-size: 0.75em; }

/* ---------- Gallery ---------- */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

/* 2 then 4 columns (same steps as .grid--4), so a 4-photo album never leaves one photo alone. */
@media (min-width: 640px) {
    .photo-grid { gap: var(--space-4); }
}

@media (min-width: 1000px) {
    .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.photo-grid__item {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--navy-100);
    cursor: zoom-in;
}

.photo-grid__item:focus-visible { outline-offset: 3px; }

.photo-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--dur) var(--ease);
}

.photo-grid__item:hover img { opacity: 0.88; }

.photo-grid__empty { grid-column: 1 / -1; color: var(--ink-muted); }

/* Lightbox (native <dialog>) */
html.is-lightbox-open { overflow: hidden; }

.lightbox {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--navy-900);
    color: var(--on-navy);
    overscroll-behavior: contain;
    /* Let horizontal drags reach the swipe handlers instead of becoming a browser pan. */
    touch-action: pan-y pinch-zoom;
}

.lightbox[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.lightbox::backdrop { background: var(--navy-900); }

.lightbox :focus-visible { outline-color: var(--saffron-500); }

.lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
}

.lightbox__counter {
    margin: 0;
    font-size: var(--text-small);
    color: var(--on-navy-muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin: 0;
    padding: 0 var(--space-4) calc(48px + var(--space-6));
}

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox__caption {
    margin-top: var(--space-3);
    max-width: 60ch;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--on-navy-muted);
}

.lightbox__btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--line-on-navy);
    border-radius: var(--radius-btn);
    background: var(--navy-800);
    color: var(--on-navy);
    font-size: 1.125rem;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.lightbox__btn:hover { background: var(--navy-700); border-color: var(--on-navy-subtle); }

.lightbox__nav { position: absolute; bottom: var(--space-5); }
.lightbox__nav--prev { left: var(--space-4); }
.lightbox__nav--next { right: var(--space-4); }

@media (min-width: 760px) {
    .lightbox__stage { padding: 0 96px var(--space-7); }
    .lightbox__nav { top: 50%; bottom: auto; margin-top: -24px; }
    .lightbox__nav--prev { left: var(--space-5); }
    .lightbox__nav--next { right: var(--space-5); }
}

@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] { animation: stories-fade var(--dur) var(--ease); }
}

@keyframes stories-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* A video hosted somewhere other than YouTube: a plain link out instead of a broken embed. */
.video-card__external {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-3);
    color: var(--on-navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--dur) var(--ease);
}

.video-card__external i {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-on-navy);
    border-radius: 50%;
    font-size: 1.125rem;
}

.video-card__external:hover { text-decoration-color: currentColor; }
.video-card__external:focus-visible { outline-color: var(--saffron-500); outline-offset: -6px; }