/* ---------------------------------------------------------------------------
   audio_card — ioann-presnya template
   Task 37: Blade partial audio_card with custom audio player controls.
   --------------------------------------------------------------------------- */

.audio-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 36px;
    align-items: stretch;
    padding: 28px 36px;
    background: #ffffff;
    border-top: 1px solid #cecece;
    max-width: var(--ip-content-max);
    margin: 0 auto;
}

.audio-card:last-child {
    border-bottom: 1px solid #cecece;
}

/* Thumbnail */
.audio-card__thumb {
    display: block;
    width: 320px;
    height: 212px;
    overflow: hidden;
    background: #e6e6e6;
    flex-shrink: 0;
}

.audio-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body */
.audio-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    align-self: stretch;
    justify-content: flex-start;
}

/* Date */
.audio-card__date {
    font: 400 14px/1 var(--ip-font-body, 'Golos Text', sans-serif);
    color: #a4a4a4;
}

/* Title */
.audio-card__title {
    margin: 0;
    font: 700 36px/1 var(--ip-font-title, 'Cormorant Garamond', 'Cormorant', serif);
    color: #1b1b1b;
    letter-spacing: -0.396px;
}

/* Annotation */
.audio-card__annotation {
    margin: 0;
    font: 400 16px/1.1 var(--ip-font-body, 'Golos Text', sans-serif);
    color: #1b1b1b;
    letter-spacing: -0.176px;
}

/* Annotation is TinyMCE rich text: strip stray margins from wrapping elements
   so a leading/trailing <p> keeps the card layout tight. */
.audio-card__annotation > :first-child { margin-top: 0; }
.audio-card__annotation > :last-child { margin-bottom: 0; }

/* Player row */
.audio-card__player {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
}

/* Play button */
.audio-card__play {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #af4409;
    color: #ffffff;
    font-size: 14px;
    line-height: 36px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.audio-card__play:hover,
.audio-card__play:focus {
    background: #8e360a;
    outline: none;
}

/* Progress range */
.audio-card__progress {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.audio-card__progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #af4409;
    cursor: pointer;
}

.audio-card__progress::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #af4409;
    cursor: pointer;
}

/* Duration text */
.audio-card__duration {
    font: 400 13px/1 var(--ip-font-body, 'Golos Text', sans-serif);
    color: #999;
    min-width: 42px;
    text-align: right;
    flex-shrink: 0;
}

/* Hidden native audio element */
.audio-card__player audio[data-audio] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Responsive: stack to column at < 768px
   --------------------------------------------------------------------------- */
@media (max-width: 767.99px) {
    .audio-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 16px;
    }

    .audio-card__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 320 / 212;
    }

    .audio-card__title {
        font-size: 20px;
    }

    /* ---------------------------------------------------------------------------
       audio_list mobile: full-width rows, aligned player, title wraps.
       Task 170: @media (max-width: 767.99px) overrides scoped to .audio-list /
       .audio-list__items to avoid touching the photo card (.audio-card--photo).
       --------------------------------------------------------------------------- */

    /* List row: remove horizontal padding so content aligns with page gutter
       supplied by .content (var(--ip-side-padding) = 16px). Vertical padding
       kept for row separation. */
    .audio-list__items .audio-card {
        padding: 20px 0;
    }

    /* Player pill: full available width within the row, play + progress +
       duration all on one line. max-width and box-sizing guard clipping. */
    .audio-list__items .audio-card__player {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Title: wrap long unbroken strings instead of overflowing horizontally. */
    .audio-list__items .audio-card__title {
        font-size: 20px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Annotation: same overflow guard. */
    .audio-list__items .audio-card__annotation {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* "Load more" button: defensive max-width in the narrow column. */
    .audio-list__more {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ---------------------------------------------------------------------------
   audio_list — ioann-presnya template
   Task 38: audio_list block wrapping the audio_card partials.
   --------------------------------------------------------------------------- */

.audio-list {
    width: 100%;
    max-width: var(--ip-content-max);
    margin: 0 auto 80px;
}

.audio-list__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Every list card fills the full list width so all rows share one left edge
   and identical width. Overrides the base .audio-card max-width/margin:0 auto,
   which only the audio_main photo card relies on (and that card has its own
   width override). Same fix as task 98 for news cards. */
.audio-list__items .audio-card {
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: stretch;
}

/* List player pill — mirrors the home page audio-card--photo player:
   light pill, dark circular play button, thin gradient-filled track and a
   visible dark duration label. (Was a fat 14px grey track that clipped the
   duration behind overflow:hidden.) */
.audio-list__items .audio-card__player {
    width: 331px;
    max-width: 100%;
    height: 46px;
    padding: 0 14px 0 6px;
    background: #cecece;
    border-radius: 30px;
    gap: 10px;
    box-sizing: border-box;
}

/* Play button — dark circle, white triangle (matches photo card) */
.audio-list__items .audio-card__play {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-left: 0;
    border-radius: 50%;
    background: #312521;
    color: #ffffff;
    font-size: 12px;
}

.audio-list__items .audio-card__play:hover,
.audio-list__items .audio-card__play:focus {
    background: #1a100d;
}

/* Thin rounded filled track — matches the photo card player */
.audio-list__items .audio-card__progress {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        #312521 0%,
        #312521 var(--audio-progress, 0%),
        #d9d9d9 var(--audio-progress, 0%),
        #d9d9d9 100%
    );
}

/* Hide the knob/thumb — keep range interactive for seeking */
.audio-list__items .audio-card__progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
}

.audio-list__items .audio-card__progress::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
    opacity: 0;
}

/* Webkit track override for gradient fill */
.audio-list__items .audio-card__progress::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        #312521 0%,
        #312521 var(--audio-progress, 0%),
        #d9d9d9 var(--audio-progress, 0%),
        #d9d9d9 100%
    );
}

/* Moz track override for gradient fill */
.audio-list__items .audio-card__progress::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #d9d9d9;
}

.audio-list__items .audio-card__progress::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: #312521;
}

.audio-list__items .audio-card__duration {
    font: 700 12px/1 var(--ip-font-body, 'Golos Text', sans-serif);
    color: #312521;
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.audio-list__empty {
    text-align: center;
    font: 400 16px/1.5 var(--ip-font-body, 'Golos Text', sans-serif);
    color: #a4a4a4;
    padding: 80px 0;
}

.audio-list__more-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0;
}

.audio-list__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 177px;
    height: 35px;
    border: 1px solid #ddb6a6;
    color: #af4409;
    border-radius: 5px;
    font: 400 14px/1 var(--ip-font-body, 'Golos Text', sans-serif);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.audio-list__more:hover,
.audio-list__more:focus {
    background: #ddb6a6;
    color: #fff;
    outline: none;
}

/* ---------------------------------------------------------------------------
   audio_main — ioann-presnya template
   Task 66: 2-card audio teaser row on the home page (mirrors news_main).
   --------------------------------------------------------------------------- */

.audio-main {
    width: 100%;
}

.audio-main__inner {
    display: flex;
    flex-direction: row;
    gap: 58px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   audio-card--photo: full-bleed photo card used on home page (audio_main).
   Task 92: replaces old split thumb+body override; Figma node 1-166.
   --------------------------------------------------------------------------- */

/* Full-bleed photo card container */
.audio-card--photo {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    height: 275px;
    width: 100%;
    max-width: 690px;
    background: #312521;
    border-top: none;
    border-bottom: none;
    display: block;
}

/* Photo — fitted into the RIGHT side of the card and pinned to top/right/bottom.
   height:100% + width:auto preserves the image's aspect ratio so nothing is
   cropped; it sits flush against the right edge while the left of the card shows
   the dark background beneath the text and gradient. */
.audio-card--photo .audio-card__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    z-index: 0;
}

/* Horizontal dark-brown gradient overlay (Figma: left #312521 49% → transparent 76%) */
.audio-card--photo .audio-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgb(49, 37, 33) 49.66%, rgba(49, 37, 33, 0) 76.3%);
    pointer-events: none;
}

/* Clickable link covering the upper portion (above the player pill) */
.audio-card--photo .audio-card__link {
    position: absolute;
    inset: 0;
    bottom: 74px; /* leave room for player pill */
    z-index: 2;
    display: flex;
    flex-direction: column;
    /* Anchor the text to the top so a long title grows downward (clipped at the
       bottom) instead of upward off the card top, which used to hide the date. */
    justify-content: flex-start;
    text-decoration: none;
}

/* Text block inside the link */
.audio-card--photo .audio-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 36px;
    /* content-box so max-width is the text width (420px), with the 36px side
       padding added on top — not subtracted from the 420px. */
    box-sizing: content-box;
    max-width: 420px;
}

/* Date — small, muted white */
.audio-card--photo .audio-card__date {
    font: 400 14px/1 var(--ip-font-body, 'Golos Text', sans-serif);
    color: rgba(255, 255, 255, 0.6);
}

/* Serif title — Figma: Cormorant Garamond 700 36px. Capped at 3 lines. */
.audio-card--photo .audio-card__title {
    margin: 0;
    font: 700 36px/1 var(--ip-font-title, 'Cormorant Garamond', 'Cormorant', serif);
    color: #ffffff;
    letter-spacing: -0.396px;
    max-width: 420px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Subtitle / annotation — small muted white. Single line, ellipsised. */
.audio-card--photo .audio-card__annotation {
    margin: 0;
    font: 400 16px/1.4 var(--ip-font-body, 'Golos Text', sans-serif);
    color: rgba(255, 255, 255, 0.6);
    max-width: 420px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* Audio player pill — bottom-left of the card */
.audio-card--photo .audio-card__player {
    position: absolute;
    left: 36px;
    bottom: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 331px;
    height: 46px;
    padding: 0 14px 0 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-sizing: border-box;
}

/* Play button — dark circle, white triangle */
.audio-card--photo .audio-card__play {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: #312521;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.audio-card--photo .audio-card__play:hover,
.audio-card--photo .audio-card__play:focus {
    background: #1a100d;
    outline: none;
}

/* Thick rounded filled track — mirrors the list player (no waveform bars) */
.audio-card--photo .audio-card__progress {
    flex: 1 1 auto;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        #312521 0%,
        #312521 var(--audio-progress, 0%),
        #d9d9d9 var(--audio-progress, 0%),
        #d9d9d9 100%
    );
    outline: none;
    cursor: pointer;
}

/* Webkit track override for gradient fill */
.audio-card--photo .audio-card__progress::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        #312521 0%,
        #312521 var(--audio-progress, 0%),
        #d9d9d9 var(--audio-progress, 0%),
        #d9d9d9 100%
    );
}

/* Moz track override for gradient fill */
.audio-card--photo .audio-card__progress::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #d9d9d9;
}

.audio-card--photo .audio-card__progress::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: #312521;
}

/* Hide knob/thumb — keep range interactive for seeking */
.audio-card--photo .audio-card__progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
}

.audio-card--photo .audio-card__progress::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
    opacity: 0;
}

/* Duration text — small, dark (on light-ish pill) */
.audio-card--photo .audio-card__duration {
    font: 700 12px/1 var(--ip-font-body, 'Golos Text', sans-serif);
    color: #312521;
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Hidden native audio element */
.audio-card--photo .audio-card__player audio[data-audio] {
    display: none;
}

/* Optional "Все аудио" CTA pill — defensive, hidden when all_audio_url is null. */
.audio-main__more {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin: 32px auto 0;
    padding: 10px 20px;
    border: 1px solid #ddb6a6;
    border-radius: 5px;
    color: #af4409;
    background: transparent;
    font-family: var(--ip-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.05;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.audio-main__more:hover,
.audio-main__more:focus {
    background: #ddb6a6;
    color: #fff;
    outline: none;
}

/* Responsive: stack cards vertically below 1100px */
@media (max-width: 1099.99px) {
    .audio-main__inner {
        flex-direction: column;
        gap: 24px;
    }

    .audio-card--photo {
        max-width: 100%;
        height: auto;
        min-height: 220px;
        padding-bottom: 74px; /* space for the absolute player pill */
    }

    .audio-card--photo .audio-card__text {
        padding: 20px 20px 0;
    }

    .audio-card--photo .audio-card__title {
        font-size: 26px;
    }

    .audio-card--photo .audio-card__link {
        /* keep absolute; shrink bottom offset so link occupies full card minus pill */
        bottom: 74px;
    }

    .audio-card--photo .audio-card__player {
        left: 16px;
        bottom: 14px;
        width: calc(100% - 32px);
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   audio_main — mobile portrait card — Figma node 2747:4316 (375×550).
   Photo fills the top; a vertical dark gradient covers the lower ~65%; the
   text block and rounded player pill are anchored at the bottom, flowing in a
   flex column (no absolute positioning). Overrides the desktop right-fit image
   and the older wide-card overrides above.
   --------------------------------------------------------------------------- */
@media (max-width: 767.99px) {
    /* Tighten the gap between stacked featured cards */
    .audio-main__inner {
        gap: 16px;
    }

    .audio-card--photo {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        aspect-ratio: 375 / 550;
        height: auto;
        min-height: 0;
        max-width: 100%;
        padding: 28px 36px;
    }

    /* Photo occupies the top ~65% of the card (Figma ≈63%); the solid dark card
       background fills the rest and the gradient blends the seam. object-position
       center keeps the subject in frame. Overrides the desktop right-fitted image. */
    .audio-card--photo .audio-card__bg {
        inset: 0 0 auto 0;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 65%;
        object-fit: cover;
        object-position: center;
    }

    /* Vertical gradient: solid dark up to ~65%, fading to clear by ~82%. */
    .audio-card--photo .audio-card__overlay {
        background: linear-gradient(0deg, #312521 65%, rgba(49, 37, 33, 0) 82%);
    }

    /* Text block flows in-column at the bottom (no longer absolute). */
    .audio-card--photo .audio-card__link {
        position: static;
        inset: auto;
        bottom: auto;
        z-index: 2;
        display: flex;
        flex-direction: column;
    }

    .audio-card--photo .audio-card__text {
        padding: 0;
        max-width: 100%;
        box-sizing: border-box;
        gap: 8px;
    }

    /* Serif title — Figma 36px, up to 3 lines */
    .audio-card--photo .audio-card__title {
        font-size: 36px;
        line-height: 1;
        overflow-wrap: anywhere;
    }

    .audio-card--photo .audio-card__annotation {
        font-size: 16px;
        line-height: 1.1;
        -webkit-line-clamp: 2;
    }

    /* Player pill: in-flow at the bottom, rounded, full content width. */
    .audio-card--photo .audio-card__player {
        position: static;
        inset: auto;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 24px;
        width: 100%;
        max-width: 100%;
        height: 46px;
        min-height: 46px;
        padding: 0 14px 0 6px;
        border-radius: 30px;
        box-sizing: border-box;
    }

    .audio-card--photo .audio-card__play {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

    .audio-card--photo .audio-card__progress {
        flex: 1 1 auto;
    }

    /* CTA pill: defensive max-width in case it is ever shown */
    .audio-main__more {
        max-width: 100%;
        box-sizing: border-box;
    }
}