/* ioann-presnya material blocks */

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

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

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

@media (max-width: 767.99px) {
    .material-header {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 24px;   /* was 32px (desktop) — tighter on mobile */
        gap: 10px;             /* was 15px (desktop) — tighter on mobile */
    }
    .material-header__title {
        /* fluid: ~26px at 360px → ~32px cap; never exceeds desktop 42px */
        font-size: clamp(26px, 4vw + 12px, 32px);
    }
    .material-header__date {
        /* fluid: ~14px at 360px → ~16px cap */
        font-size: clamp(14px, 1.5vw + 8px, 16px);
    }
}

/* ioann-presnya material_hero_carousel */

.material-hero {
    max-width: var(--ip-content-max-text);
    margin: 0 auto 40px;
    padding: 0 var(--ip-side-padding);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Gap between the big image and the thumbnail strip below it. */
    gap: 17px;
    position: relative;
}

/* Hidden radio inputs */
.material-hero__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Stage — main image stack */
.material-hero__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 848 / 565;
    overflow: hidden;
    background: transparent;
}

.material-hero__main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Show the whole photo (not cropped) — portrait images are letterboxed
       on the stage background instead of being cut off. */
    object-fit: contain;
    opacity: 0;
    transition: opacity .25s ease;
    cursor: zoom-in;
    /* Only the visible slide receives clicks (others sit stacked with opacity 0). */
    pointer-events: none;
}

/* Single-image fallback: the lone slide is always visible */
.material-hero--single .material-hero__main {
    opacity: 1;
}

/* JS-driven active state — supports any number of photos (the per-index
   :checked rules below are a no-JS fallback capped at 10). */
.material-hero__main.is-active {
    opacity: 1;
}
.material-hero__main.is-active,
.material-hero--single .material-hero__main {
    pointer-events: auto;
}

/* Active slide rules (one per index) — show only the image
   whose paired radio is currently :checked. */
.material-hero__radio--0:checked ~ .material-hero__stage .material-hero__main--0,
.material-hero__radio--1:checked ~ .material-hero__stage .material-hero__main--1,
.material-hero__radio--2:checked ~ .material-hero__stage .material-hero__main--2,
.material-hero__radio--3:checked ~ .material-hero__stage .material-hero__main--3,
.material-hero__radio--4:checked ~ .material-hero__stage .material-hero__main--4,
.material-hero__radio--5:checked ~ .material-hero__stage .material-hero__main--5,
.material-hero__radio--6:checked ~ .material-hero__stage .material-hero__main--6,
.material-hero__radio--7:checked ~ .material-hero__stage .material-hero__main--7,
.material-hero__radio--8:checked ~ .material-hero__stage .material-hero__main--8,
.material-hero__radio--9:checked ~ .material-hero__stage .material-hero__main--9 {
    opacity: 1;
}

/* Controls row (arrows + thumbs) */
.material-hero__controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Arrows overlay — spans the stage; individual arrows pin to its left/right
   edges, vertically centered over the image. Container ignores pointer events
   so only the arrow circles are clickable (image zoom stays intact). */
.material-hero__arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.material-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--ip-text);
    /* translucent white backdrop so the dark arrow reads over any photo */
    background: rgba(255, 255, 255, 0.7) center no-repeat;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color .2s ease;
}

.material-hero__arrow--prev {
    left: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'><path d='M6.5 1L1.5 6L6.5 11' stroke='%231b1b1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.material-hero__arrow--next {
    right: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'><path d='M1.5 1L6.5 6L1.5 11' stroke='%231b1b1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.material-hero__arrow:hover {
    background-color: rgba(255, 255, 255, 0.95);
}

/* Reveal only the prev/next pair paired with the currently :checked slide */
.material-hero__radio--0:checked ~ .material-hero__stage .material-hero__arrow--for-0,
.material-hero__radio--1:checked ~ .material-hero__stage .material-hero__arrow--for-1,
.material-hero__radio--2:checked ~ .material-hero__stage .material-hero__arrow--for-2,
.material-hero__radio--3:checked ~ .material-hero__stage .material-hero__arrow--for-3,
.material-hero__radio--4:checked ~ .material-hero__stage .material-hero__arrow--for-4,
.material-hero__radio--5:checked ~ .material-hero__stage .material-hero__arrow--for-5,
.material-hero__radio--6:checked ~ .material-hero__stage .material-hero__arrow--for-6,
.material-hero__radio--7:checked ~ .material-hero__stage .material-hero__arrow--for-7,
.material-hero__radio--8:checked ~ .material-hero__stage .material-hero__arrow--for-8,
.material-hero__radio--9:checked ~ .material-hero__stage .material-hero__arrow--for-9 {
    display: inline-block;
}

/* JS-driven active arrow pair — supports any number of photos. */
.material-hero__arrow.is-active {
    display: inline-block;
}

/* Thumbnail strip */
.material-hero__thumbs {
    display: flex;
    gap: 17px;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    /* With many photos the strip scrolls horizontally instead of overflowing. */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.material-hero__thumb {
    flex: 0 0 auto;
}

.material-hero__thumb-label {
    display: block;
    width: 93px;
    height: 72.86px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease;
    background: transparent;
}

.material-hero__thumb-label img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.material-hero__thumb-label:hover {
    transform: translateY(-1px);
}


/* Responsive: collapse thumbs and shrink stage on small screens */
@media (max-width: 767.99px) {
    .material-hero {
        gap: 20px;
        margin-bottom: 28px;
    }

    /* Tappable arrows: expand hit area to >=44px while keeping edge placement */
    .material-hero__arrow {
        width: 44px;
        height: 44px;
    }
    .material-hero__arrow--prev {
        left: 8px;
    }
    .material-hero__arrow--next {
        right: 8px;
    }

    /* Thumbnail strip: scroll horizontally instead of overflowing the page */
    .material-hero__thumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .material-hero__thumbs::-webkit-scrollbar {
        display: none;
    }

    .material-hero__thumb-label {
        width: 72px;
        height: 56px;
    }
}

/* ioann-presnya material_paragraph */

.material-paragraph {
    max-width: var(--ip-content-max-text);
    margin: 0 auto 20px;
    padding: 0 var(--ip-side-padding);
    font-family: var(--ip-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ip-text);
    word-break: break-word;
}

.material-paragraph:last-child {
    margin-bottom: 0;
}

/* Whitespace before the footer on material/text pages.
   The shared .content wrapper has no bottom padding and the footer has no
   top margin, so the last article block butts against the dark footer.
   Match Figma node 1:1471 (~184px gap between content end and footer). */
.content > .material-header:last-child,
.content > .material-hero:last-child,
.content > .material-paragraph:last-child,
.content > .material-subheading:last-child,
.content > .material-quote:last-child,
.content > .material-photo-caption:last-child {
    margin-bottom: 180px;
}

@media (max-width: 767.99px) {
    .material-paragraph {
        padding-left: 0;
        padding-right: 0;
        font-size: 15px;
    }
    .content > .material-header:last-child,
    .content > .material-hero:last-child,
    .content > .material-paragraph:last-child,
    .content > .material-subheading:last-child,
    .content > .material-quote:last-child,
    .content > .material-photo-caption:last-child {
        margin-bottom: 64px;
    }
}

/* ioann-presnya material_subheading */

.material-subheading {
    max-width: var(--ip-content-max-text);
    margin: 0 auto 28px;
    padding: 0 var(--ip-side-padding);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--ip-text);
}

.material-subheading__title {
    margin: 0;
    font-family: var(--ip-font-title);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    font-feature-settings: 'lnum', 'tnum';
    word-break: break-word;
}

.material-subheading__body {
    margin: 0;
    font-family: var(--ip-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    word-break: break-word;
}

@media (max-width: 767.99px) {
    .material-subheading {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
        gap: 10px;
    }
    .material-subheading__title {
        /* fluid: ~22px at 360px → 26px cap; stays below header title (32px cap) */
        font-size: clamp(22px, 3.2vw + 10px, 26px);
    }
    .material-subheading__body {
        font-size: clamp(14px, 1vw + 11px, 15px);
    }
}

/* ioann-presnya material_quote */

.material-quote {
    max-width: var(--ip-content-max-text);
    margin: 0 auto 28px;
    padding: 20px var(--ip-side-padding);
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.material-quote__text {
    margin: 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';
    word-break: break-word;
}

.material-quote__cite {
    font-family: var(--ip-font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    color: #a4a4a4;
}

@media (max-width: 767.99px) {
    .material-quote {
        margin-bottom: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 0;
        padding-right: 0;
    }
    .material-quote__text {
        font-size: 20px;
    }
}

/* ioann-presnya material_photo_caption */

.material-photo-caption {
    max-width: var(--ip-content-max-text);
    margin: 0 auto 28px;
    padding: 0 var(--ip-side-padding);
    display: flex;
    align-items: flex-start;
    color: var(--ip-text);
}

.material-photo-caption__image {
    flex: 0 0 auto;
    display: block;
    object-fit: cover;
}

.material-photo-caption__caption {
    flex: 0 0 186px;
    font-family: var(--ip-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #a4a4a4;
    word-break: break-word;
}

/* Small variant — Figma node 1:1501 */
.material-photo-caption--small {
    gap: 17px;
}
.material-photo-caption--small .material-photo-caption__image {
    width: 213px;
    height: 320px;
}

/* Wide variant — Figma node 1:1508 */
.material-photo-caption--wide {
    gap: 22px;
}
.material-photo-caption--wide .material-photo-caption__image {
    width: 640px;
    height: 426.667px;
}

/* Caption-only fallback when image is missing */
.material-photo-caption__caption-only {
    max-width: var(--ip-content-max-text);
    margin: 0 auto 20px;
    padding: 0 var(--ip-side-padding);
    font-family: var(--ip-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #a4a4a4;
    word-break: break-word;
}

@media (max-width: 767.99px) {
    .material-photo-caption {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        padding-left: 0;
        padding-right: 0;
    }
    .material-photo-caption--small .material-photo-caption__image,
    .material-photo-caption--wide  .material-photo-caption__image {
        width: 100%;
        height: auto;
    }
    .material-photo-caption__caption {
        flex: 0 0 auto;
        width: 100%;
    }
    .material-photo-caption__caption-only {
        padding-left: 0;
        padding-right: 0;
    }
}