/* ==========================================================================
   بنفسج — the phone and tablet pass (owner, 2026-10-06: «الرسبونسف كارثي وغير
   مرتب … التركيز على الصور في الجوال»).

   Loaded LAST, after main.css, pages.css and frames.css, so every rule here
   is the final word on small screens. Built from a section-by-section review
   at 360 / 390 / 768 in which every fix was measured on the live page.

   The one fact most of it rests on: almost every cover on this site is a
   1200×630 / 1600×845 share card (≈ 40:21) with its own category badge at
   the top and a caption strip at the bottom PRINTED INTO THE PICTURE. Any
   frame of another shape (16:9, 4:3, 1:1, 2.26:1) cuts those words in half.
   So on small screens a cover frame is 40:21, and the few frames that must
   keep another shape show the picture whole (contain) instead of cutting it.
   ========================================================================== */

:root {
    --bn-r-cover: 40 / 21;
    --bn-gutter-sm: 16px;
}

/* ── Section heads: title and «المزيد» on ONE line ───────────────────────
   main.css stacked them at ≤768, so every head was 114–131px tall plus a
   32px margin before the first card, and «المزيد» a 36px tap target. */
@media (max-width: 768px) {
    .sec-head {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 14px;
    }

    .sec-head__right {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sec-head__more,
    .bnr-band__tools {
        flex: 0 0 auto;
        align-self: flex-end;
    }

    .sec-head__more {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        white-space: nowrap;
    }

    .vs__head-count {
        display: none;
    }
}

/* ── One vertical rhythm for every band on a phone ─────────────────────── */
@media (max-width: 640px) {
    .sec,
    .bnfsj-spotlight,
    .women-voices,
    .series-showcase,
    .video-showcase,
    .pod-band {
        padding-block: 32px;
    }

    /* «فلسطينيات» had 32px margins too, leaving strips of page background
       between three solid bands. */
    .palest {
        margin-block: 0;
        padding-block: 32px;
    }

    .series-showcase {
        --container-pad: var(--bn-gutter-sm);
    }

    .palest__container {
        padding-inline: var(--bn-gutter-sm);
    }
}

/* ==========================================================================
   Hero slider (≤1024): picture on top at the covers' own shape, text in a
   dark panel under it, arrows and dots together in the panel's bottom row.
   Before: slides of different heights let the page show under short ones
   (the dots vanished on it), the arrows sat on the picture/text seam over
   the category pill, and at 768 the 2.38:1 frame cut the printed caption.
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-slider .hero-slide,
    .hero-slide {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--bg-dark, #1a1229);
    }

    .hero-slide__media {
        position: relative;
        inset: auto;
        aspect-ratio: var(--bn-r-cover);
        overflow: hidden;
    }

    .hero-slide__media img {
        position: absolute;
        inset: 0;
    }

    .hero-slide__overlay {
        display: none;
    }

    .hero-slide__content {
        position: static;
        flex: 1 1 auto;
        justify-content: flex-start;
        padding: 14px 16px 60px;
    }

    .hero-slide__title {
        max-width: none;
        text-wrap: balance;
    }

    .hero-slider__swiper .swiper-wrapper {
        align-items: stretch;
    }

    .hero-slider__swiper .swiper-slide {
        height: auto;
    }

    .hero-slider__nav {
        top: auto;
        bottom: 8px;
        transform: none;
        width: 40px;
        height: 40px;
    }

    .hero-slider__nav--prev {
        inset-inline-end: 24px;
    }

    .hero-slider__nav--next {
        inset-inline-start: 24px;
    }

    .hero-slider__pagination {
        bottom: 23px !important;
    }
}

/* ==========================================================================
   «حضور امرأة» · «سيدتي» · «أسرة» · «ديكور» boxes (spotlight)
   ========================================================================== */
@media (max-width: 760px) {
    /* A box inside a box: 20px padding inside the 16px gutter put pictures
       37px from the screen and 40px narrower than every other band. */
    .spotlight-box--double,
    .spotlight-box--single {
        padding: 16px 0 0;
        background: transparent;
    }

    .bnfsj-spotlight .spotlight-row {
        gap: 24px;
    }

    .spotlight-head__title {
        font-size: 20px;
    }

    /* Double and single boxes stack identically on a phone: one shape, the
       covers' own (172 vs 178px tall before, one above the other). */
    .spotlight-box--double .spotlight-card__media,
    .spotlight-box--single .spotlight-card__media {
        aspect-ratio: var(--bn-r-cover);
    }
}

/* The single box on a tablet: picture beside text, not one card at twice
   the size of the pair above it. */
@media (min-width: 641px) and (max-width: 1024px) {
    .spotlight-box--single .spotlight-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }

    .spotlight-box--single .spotlight-card__media {
        aspect-ratio: var(--bn-r-cover);
    }
}

/* ==========================================================================
   «حوارات» (women-voices): the side list as real cards with real pictures.
   Before: 115×63 stamps (the printed text unreadable), the byline broken
   over two lines, and a 46px sliver of the next card.
   ========================================================================== */
@media (max-width: 900px) {
    .wv-list {
        gap: 12px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
    }

    .wv-card {
        flex: 0 0 min(78%, 280px);
        scroll-snap-align: start;
    }

    .wv-card__link {
        flex-direction: column;
        gap: 10px;
        padding: 0 0 12px;
    }

    .wv-card__img {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        border-radius: 0;
        aspect-ratio: var(--bn-r-cover);
    }

    .wv-card__body {
        padding-inline: 12px;
        justify-content: flex-start;
    }

    .wv-card__meta {
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: 6px;
    }

    .wv-hero__title {
        text-wrap: balance;
    }

    .wv-hero__content {
        padding: 16px;
    }
}

/* On a tablet the three cards fit in a row: no half-cut scroller. */
@media (min-width: 641px) and (max-width: 1024px) {
    .wv-list {
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wv-card {
        flex: none;
        min-width: 0;
    }
}

/* ==========================================================================
   «فلسطينيات»: the lead picture whole at its own shape, the title under it
   (it sat across faces, and the 2.26:1 frame cut the printed label).
   ========================================================================== */
@media (max-width: 1024px) {
    .palest__hero {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: rgba(15, 10, 24, 0.6);
    }

    .palest__hero-img {
        position: relative;
        inset: auto;
        aspect-ratio: var(--bn-r-cover);
        height: auto;
    }

    .palest__hero-scrim {
        display: none;
    }

    .palest__hero-content {
        position: static;
        padding: 14px 16px 16px;
    }

    .palest__row-img {
        flex-basis: 112px;
    }
}

@media (max-width: 640px) {
    .palest__row-title {
        font-size: 13.5px;
        line-height: 1.6;
    }
}

/* ==========================================================================
   «بودكاست بنفسج»: artwork beside the text, aligned like the rest of the
   section (it was centred in a right-aligned band), rows on the gutter.
   ========================================================================== */
@media (max-width: 560px) {
    .pod-band__lead {
        grid-template-columns: 128px minmax(0, 1fr);
        justify-items: stretch;
        text-align: start;
        gap: 14px;
    }

    .pod-band__art {
        width: 128px;
    }

    .pod-band__meta {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .pod-band__programme {
        flex-basis: 100%;
    }

    .pod-band__programme + .pod-meta__dot {
        display: none;
    }

    .pod-band__row-btn {
        padding-inline: 0;
    }

    .pod-band__row-title {
        text-wrap: balance;
    }
}

@media (min-width: 561px) and (max-width: 1024px) {
    .pod-band__lead {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

/* ==========================================================================
   «إبداعات بنفسج»: tiles on the gutter's rhythm (their 14px padding put the
   pieces 31px from the screen).
   ========================================================================== */
@media (max-width: 640px) {
    .bn-tile {
        padding: 12px;
    }
}

/* ==========================================================================
   «لكِ»: lead with a full picture and a padded body; rows whose picture
   reaches the card edge at the covers' own shape (the 4:3 crop removed 30%
   of the width and the caption printed on it).
   ========================================================================== */
@media (max-width: 640px) {
    .lifestyle-tabs__grid .lt-card {
        align-items: stretch;
    }

    .lifestyle-tabs__grid .lt-card .lt-card__img {
        aspect-ratio: var(--bn-r-cover);
    }

    .lifestyle-tabs__grid .lt-card:first-child .lt-card__body {
        padding: 12px 14px 14px;
    }

    .lifestyle-tabs__grid .lt-card:first-child .lt-card__title {
        font-size: 17px;
        line-height: 1.55;
    }

    .lifestyle-tabs__grid .lt-card:not(:first-child) .lt-card__img {
        flex: 0 0 44%;
        width: 44%;
        height: auto;
        align-self: stretch;
        aspect-ratio: var(--bn-r-cover);
    }
}

/* ==========================================================================
   «صحة المرأة» (dark grid): vertical cards, two up on a phone and three on
   a tablet. Before: a 132×72 stamp floating at the top of a 135–182px card,
   a byline broken over three lines, and the band's name repeated on all six.
   ========================================================================== */
@media (max-width: 1024px) {
    .dark-card {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 0;
        padding: 0;
    }

    .dark-card__media {
        width: 100%;
        height: auto;
        aspect-ratio: var(--bn-r-cover);
        align-self: stretch;
    }

    .dark-card__kicker {
        display: none;
    }

    .dark-card__meta {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .dark-grid__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .dark-card__body {
        padding: 12px 14px 14px;
    }
}

@media (max-width: 640px) {
    .dark-grid__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dark-card__body {
        padding: 10px 10px 12px;
        gap: 6px;
    }

    .dark-card__meta {
        order: 2;
    }

    /* Avatar and date only: a 151px line cut the names to «فاط…». */
    .dark-card__author span {
        display: none;
    }

    .dark-card__title {
        order: 1;
        font-size: 15px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ==========================================================================
   «سلاسل»: the swiping shelf starts on the gutter (it snapped the first
   card flush to the screen edge).
   ========================================================================== */
@media (max-width: 560px) {
    .series-shelf {
        scroll-padding-inline: var(--container-pad, 16px);
    }

    .series-book__latest-title {
        min-height: calc(2 * 1.6em);
    }
}

/* ==========================================================================
   «فكر»: a visible card edge on a phone, gutters like the others, the real
   author picture, no «فكر» chip repeated under the «فكر» title.
   ========================================================================== */
.longread .longread-card__cat {
    display: none;
}

.longread-card__avatar {
    overflow: hidden;
}

.longread-card__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}

@media (max-width: 768px) {
    .longread-card {
        border: 1px solid var(--border-subtle, #efeae4);
        box-shadow: none;
        padding: 20px 18px;
    }

    .longread-card__media {
        margin: -20px -18px 18px;
        aspect-ratio: var(--bn-r-cover);
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .longread__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .longread__grid {
        gap: 16px;
    }
}

/* ==========================================================================
   «مجتمع»: a swiping row of writer cards on a phone (six stacked cards were
   2,600px — three screens), the next card clearly peeking. A writer with no
   picture at all gets no empty frame.
   ========================================================================== */
/* A writer with no picture among their pieces here: the cover is their
   portrait on the brand's ground, the same size as a photo cover, so the
   row keeps one shape (it left a tall white hole on a desktop). */
.author-card__cover--plain {
    display: grid;
    place-items: center;
    aspect-ratio: var(--bn-r-card);
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(233, 139, 183, 0.55) 0%, rgba(233, 139, 183, 0) 60%),
        linear-gradient(150deg, #6b5b8a 0%, #3c2f57 100%);
}

.author-card__portrait {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 30px -12px rgba(20, 14, 32, 0.6);
    background: #fff;
}

.author-card__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}

/* The portrait is already the cover: no second, smaller one on its edge. */
.author-card--lead.is-noimg .author-card__avatar {
    display: none;
}

.author-card--lead.is-noimg .author-card__header {
    margin-top: 14px;
}

@media (max-width: 640px) {
    .blogs-pro__grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 84%;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--bn-gutter-sm));
        padding-inline: var(--bn-gutter-sm);
        scroll-padding-inline: var(--bn-gutter-sm);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        align-items: stretch;
    }

    .blogs-pro__grid::-webkit-scrollbar {
        display: none;
    }

    .blogs-pro__grid > .author-card {
        scroll-snap-align: start;
    }

    .author-card--lead .author-card__cover {
        aspect-ratio: var(--bn-r-cover);
    }
}

/* ==========================================================================
   «ذاكرة» · «مدونات»: rows that read as rows on a phone — the first of the
   four no longer turns into a second big card, the picture sits inside the
   card's padding at the covers' shape, titles get three lines.
   ========================================================================== */
/* In a row layout (phone, desktop) a story with no picture drops its
   frame; in the tablet's 2×2 grid the frame stays, so the four cards keep
   one shape. */
@media (max-width: 640px), (min-width: 901px) {
    .featquad__grid .spotlight-card.is-noimg .spotlight-card__media {
        display: none;
    }
}

@media (max-width: 640px) {
    .featquad {
        gap: 16px;
    }

    .featquad__big .spotlight-card__media {
        aspect-ratio: var(--bn-r-cover);
    }

    .featquad__grid {
        gap: 12px;
    }

    .featquad__grid .spotlight-card,
    .featquad__grid .spotlight-card:not(:first-child) {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
        padding: 12px;
    }

    .featquad__grid .spotlight-card .spotlight-card__media,
    .featquad__grid .spotlight-card:not(:first-child) .spotlight-card__media {
        flex: 0 0 128px;
        width: 128px;
        aspect-ratio: var(--bn-r-cover);
        margin: 0;
    }

    .featquad__grid .spotlight-card__body {
        flex: 1;
        min-width: 0;
        padding: 0 12px 0 0;
    }

    .featquad__grid .spotlight-card.is-noimg .spotlight-card__body {
        padding: 0;
    }

    .featquad__grid .spotlight-card__author {
        margin-bottom: 6px;
    }

    .featquad__grid .spotlight-card__title {
        font-size: 15px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ==========================================================================
   «باختصار»: the piece whole in its square (the 1:1 crop removed half of a
   1200×630 card and the words on it), titles not cut mid-word, four in a
   row on a tablet.
   ========================================================================== */
.bn-square__media.bn-frame--whole > img:not(.bn-frame__backdrop) {
    height: 100%;
    max-height: none;
    object-fit: contain;
}

.bn-square__media.bn-frame--whole > .bn-frame__backdrop {
    display: block;
}

@media (max-width: 900px) {
    .bn-square__title {
        -webkit-line-clamp: 3;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .bn-squares__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .bn-squares__grid {
        gap: 16px 12px;
    }
}

/* ==========================================================================
   «معرض بنفسج»: album posters are 4:5 — a 4:3 frame lost 40% of each one.
   ========================================================================== */
@media (max-width: 1024px) {
    .bnm-grid--photo .bn-frame--album {
        aspect-ratio: 4 / 5;
    }
}

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

.bnm-panel__all {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

/* One corner for the media bands' pictures. */
.bnm-album__media,
.bnm-video__media,
.vs__stage,
.vs__ucard-media,
.vs__row-thumb {
    border-radius: 12px;
    overflow: hidden;
}

/* The album viewer on a phone: an opaque stage, gutters for its bar, and
   arrows that no longer sit on the thumbnail strip. */
@media (max-width: 600px) {
    .bnm-viewer {
        background: #0c0814;
    }

    .bnm-viewer__bar {
        padding-inline: 16px;
        box-sizing: border-box;
    }

    .bnm-viewer.is-album .bnm-viewer__nav {
        top: calc(50% - 40px);
        bottom: auto;
        transform: translateY(-50%);
        background: rgba(12, 8, 20, 0.6);
    }

    .bnm-viewer.is-album .bnm-viewer__thumbs {
        padding-inline: 16px;
    }
}

/* ==========================================================================
   «ريلز بنفسج»: two cards and a clear peek of the third (it showed a 4px
   sliver), the strip starting on the gutter.
   ========================================================================== */
@media (max-width: 560px) {
    .bnr-strip {
        grid-auto-columns: 42%;
        margin-inline: calc(-1 * var(--bn-gutter-sm));
        padding-inline: var(--bn-gutter-sm);
        scroll-padding-inline: var(--bn-gutter-sm);
    }
}

/* The reels player: close at the top, beside the reel (in the centred
   column it landed in the middle of the clip on a phone); the column gets
   a backing so the counter reads over a light frame. */
.bnr-viewer__close {
    position: fixed;
    z-index: 2;
    top: max(16px, env(safe-area-inset-top));
    left: calc(50% - var(--bnr-w) / 2 - 64px);
}

.bnr-viewer.is-narrow .bnr-viewer__close {
    left: 12px;
    background: rgba(12, 8, 20, 0.55);
}

.bnr-viewer.is-narrow .bnr-viewer__rail {
    padding: 6px;
    border-radius: 999px;
    background: rgba(12, 8, 20, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ==========================================================================
   «فيديو بنفسج»: episodes 04/05 were drawn bigger than 02/03 (358×201
   cards under 76×48 rows); two small cards side by side instead.
   ========================================================================== */
@media (max-width: 640px) {
    .vs__understrip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 14px;
    }
}

/* ==========================================================================
   «سفراء بنفسج»: bigger faces, whole names, a track that snaps and starts
   on the gutter (the third name was cut to «آية وليد شه»).
   ========================================================================== */
@media (max-width: 640px) {
    .ambassadors-showcase__track {
        gap: 12px;
        margin-inline: calc(-1 * var(--bn-gutter-sm));
        padding-inline: var(--bn-gutter-sm);
        scroll-padding-inline: var(--bn-gutter-sm);
        scroll-snap-type: x mandatory;
    }

    .amb-showcase-card {
        width: 96px;
        scroll-snap-align: start;
    }

    .amb-showcase-card__avatar {
        width: 76px;
        height: 76px;
    }
}

/* ==========================================================================
   Site chrome on a phone: the «to top» button off the content gutter, the
   footer's links in two columns with real tap targets.
   ========================================================================== */
@media (max-width: 640px) {
    .to-top {
        width: 40px;
        height: 40px;
        inset-inline-start: 12px;
        inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
        opacity: 0.92;
    }

    .footer-pro__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
        justify-items: center;
    }

    .footer-pro__list a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .footer-pro__social-link {
        width: 40px;
        height: 40px;
    }
}

/* «باختصار» on phones and tablets: the frame takes the covers' own shape.
   Its pieces are 40:21 cards, so a square showed each one whole but between
   two wide blurred bands; a rare square piece is still shown whole. */
@media (max-width: 900px) {
    .bn-square__media.bn-frame--square {
        aspect-ratio: var(--bn-r-cover);
    }
}