/* ============================================================
   event-single.css  — ioann-presnya template
   BEM block: .event-single
   ============================================================ */

.event-single {
    max-width: var(--ip-content-max-text);
    margin: 0 auto;
    padding: 0 var(--ip-side-padding);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── Title ─────────────────────────────────────────────────── */

.event-single__title {
    font-family: var(--ip-font-title);
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.026em;
    color: var(--ip-text);
    margin: 0;
    font-feature-settings: 'lnum', 'tnum';
    word-break: break-word;
}

/* ── Date ──────────────────────────────────────────────────── */

.event-single__date {
    font-family: var(--ip-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.011em;
    color: #a4a4a4;
    display: block;
}

/* ── Hero image ────────────────────────────────────────────── */

.event-single__hero {
    margin: 0;
    width: 100%;
}

.event-single__hero-img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* ── Hero carousel (reused material_hero_carousel) ─────────────
   The included .material-hero brings its own max-width/side-padding;
   inside .event-single that wrapper is redundant, so neutralise it and let
   the carousel span the article content box like every other child. */

.event-single .material-hero {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ── Gallery ───────────────────────────────────────────────── */

.event-single__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.event-single__gallery-item {
    margin: 0;
}

.event-single__gallery-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* ── Body content ──────────────────────────────────────────── */

.event-single__content {
    font-family: var(--ip-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
}

/* Prose defaults for seed-authored HTML inside the content wrapper */

.event-single__content p {
    margin: 0 0 1em;
}

.event-single__content h2 {
    font-family: var(--ip-font-title);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    margin: 1.5em 0 0.5em;
    color: var(--ip-text);
}

.event-single__content h3 {
    font-family: var(--ip-font-title);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    margin: 1.25em 0 0.5em;
    color: var(--ip-text);
}

.event-single__content ul {
    list-style: disc;
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.event-single__content ol {
    list-style: decimal;
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.event-single__content li {
    display: list-item;
}

.event-single__content li + li {
    margin-top: 4px;
}

.event-single__content li::marker {
    color: #555;
}

/* Blockquotes match the material_quote block: terracotta italic serif with
   thin top/bottom rules (no left bar). */
.event-single__content blockquote {
    margin: 1.5em 0;
    padding: 20px 0;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    border-left: 0;
    font-family: var(--ip-font-title);
    font-weight: 600;
    font-style: italic;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.011em;
    color: #a33d25;
    font-feature-settings: 'lnum', 'pnum';
}

.event-single__content blockquote p {
    margin: 0;
}

.event-single__content a {
    color: #af4409;
    text-decoration: underline;
}

.event-single__content a:hover {
    text-decoration: none;
}

.event-single__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
}

/* Figures match the material_photo_caption block: image on the left, muted
   caption in a narrow column on the right. */
.event-single__content figure {
    margin: 1.5em 0;
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.event-single__content figure img {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}

.event-single__content figcaption {
    flex: 0 0 186px;
    margin-top: 0;
    font-family: var(--ip-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #a4a4a4;
}

/* Narrow landscape figure (Figma photo_1: 320×213 image + caption to the right).
   The generic figure rule lets the image flex-grow to fill ~640px; .is-narrow pins
   it to the designed size so it does not stretch to the full content width. */
.event-single__content figure.is-narrow img {
    flex: 0 0 320px;
    width: 320px;
    height: 213px;
}

/* ── Portrait quote (.event-quote) ─────────────────────────────
   Figma node 1:1548: round 172px avatar + an italic author line and a
   bold quote, terracotta, between thin top/bottom rules. Reuses the base
   blockquote's border + 20px padding and overrides it to a two-column flex. */
.event-single__content .event-quote {
    display: flex;
    align-items: center;
    gap: 22px;
    font-style: normal;        /* base blockquote is italic; children set their own */
}

.event-quote__avatar {
    flex: 0 0 172px;
    width: 172px;
    height: 172px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

.event-quote__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    color: #a33d25;
}

.event-quote__author {
    font-family: var(--ip-font-title);
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.011em;
    color: #a33d25;
}

.event-quote__text {
    display: block;
    font-family: var(--ip-font-title);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    color: #a33d25;
    word-break: break-word;
}

/* ── Tables ─────────────────────────────────────────────────────
   Generic prose-table defaults for seed-/CMS-authored HTML, plus the
   .schedule layout used by the Воскресная школа material page (Figma
   node 1:1766). Continuous full-width row dividers come from collapsed
   borders; the 36px inter-column gutter from symmetric cell padding. */

.event-single__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ip-text);
}

.event-single__content table th,
.event-single__content table td {
    padding: 4px 18px;        /* 18 + 18 = 36px gutter between columns */
    text-align: left;
    vertical-align: top;
    font-weight: 400;         /* group/lesson labels are regular weight (Figma) */
}

/* First/last column sit flush with the article content box (no outer gutter). */
.event-single__content table tr > :first-child { padding-left: 0; }
.event-single__content table tr > :last-child  { padding-right: 0; }

/* Bold cells: subjects (<strong>) and the section header <th>. */
.event-single__content table strong { font-weight: 700; }

/* Two schedule tables stacked (1-3 недели / 2-4 недели), 36px apart. */
.event-single__content .schedule {
    table-layout: fixed;      /* four equal 25% columns, matching Figma's 4×183 grid */
    margin: 0;
}
.event-single__content .schedule-scroll + .schedule-scroll { margin-top: 36px; }

/* Full-width divider after every block (section / head / lesson / full row):
   border-collapse merges the four cells' bottom borders into one line. */
.schedule tbody > tr:last-child > th,
.schedule tbody > tr:last-child > td {
    border-bottom: 1px solid #cecece;
}

/* 8px breathing room at the top and bottom of each block (Figma py-8 + gap-8). */
.schedule tbody > tr:first-child > th,
.schedule tbody > tr:first-child > td { padding-top: 8px; }
.schedule tbody > tr:last-child  > th,
.schedule tbody > tr:last-child  > td { padding-bottom: 8px; }

/* Section header (1-3 недели / Факультативы): bold, full width. */
.schedule__section th { font-weight: 700; }

/* Whitespace before the footer, matching the material pages (material.css
   node 1:1471): the shared .content wrapper has no bottom padding and the
   footer no top margin, so add the gap on the trailing article block. */
.content > .event-single:last-child {
    margin-bottom: 180px;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 767.99px) {
    .content > .event-single:last-child {
        margin-bottom: 64px;
    }

    /* Drop the block's own side padding at mobile: .content already supplies the
       16px gutter (task 146 --ip-side-padding); avoids a doubled 32px inset and
       lets the hero/body span the full content box.
       min-width: 0 lets flex children shrink below their intrinsic width so long
       content cannot force horizontal overflow on the root block. */
    .event-single {
        padding: 0;
        gap: 24px; /* tighten the 32px desktop stack gap for mobile rhythm */
        min-width: 0;
    }

    .event-single__title {
        font-size: 32px;
    }

    .event-single__hero-img {
        height: 320px;
    }

    .event-single__gallery {
        grid-template-columns: 1fr;
    }

    .event-single__gallery-img {
        height: 240px;
    }

    /* Photo-caption figures stack on mobile (image over caption), matching
       the material_photo_caption mobile behaviour. */
    .event-single__content figure {
        flex-direction: column;
        gap: 12px;
    }

    .event-single__content figure img {
        width: 100%;
    }

    /* Narrow figure goes fluid like the others (override the fixed 320×213). */
    .event-single__content figure.is-narrow img {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
    }

    .event-single__content figcaption {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Portrait quote: shrink the avatar and type so it fits a phone column. */
    .event-single__content .event-quote {
        gap: 16px;
    }
    .event-quote__avatar {
        flex-basis: 96px;
        width: 96px;
        height: 96px;
    }
    .event-quote__author,
    .event-quote__text {
        font-size: 20px;
    }

    /* Defensive content-overflow rules for seed-/CMS-authored HTML.
       These prevent wide rich-text elements from pushing the page width
       past the viewport at 360 px / 390 px / 767 px. */

    /* Long unbroken words or URLs */
    .event-single__content {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Wide tables: scroll horizontally inside their own box, not the page */
    .event-single__content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    /* The .schedule table keeps real table layout (4-column grid) and scrolls
       inside its .schedule-scroll wrapper instead of collapsing to a block. */
    .schedule-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .event-single__content .schedule {
        display: table;
        min-width: 560px;
    }
    .schedule__rowhead { white-space: nowrap; }

    /* Preformatted blocks: wrap long lines instead of extending sideways */
    .event-single__content pre {
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Embedded media: cap width so iframes/videos do not overflow the column */
    .event-single__content iframe,
    .event-single__content video {
        max-width: 100%;
    }
}