/* ==========================================================================
   Martyrs section: a faithful copy of Demo 2's memorial rail
   (theme/home4.blade.php + custom.css/style.css) — same geometry, type and
   hover glow — minus the pointer-following 3D tilt that flipped the portrait
   when the mouse reached its edges.
   ========================================================================== */

.d9-body .d9-d2-martyrs {
    position: relative;
    height: 750px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    color: #555;
    background-color: #e1d798;
    isolation: isolate;
    --d9-martyr-gap: 24px;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__pattern {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 1;
    background-image: url("../images/banners/arabesque.png");
    background-repeat: repeat;
    background-size: auto;
    mix-blend-mode: overlay;
}

/* Bootstrap-style row: text column (col-lg-4) on the right, rail (col-lg-8)
   full-bleed on the left. Both columns are 360px tall like Demo 2's AOS items;
   the portraits simply overflow that box. */
.d9-body .d9-d2-martyrs .d9-d2-martyrs__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    gap: 0;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__copy {
    position: relative;
    z-index: 3;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    min-width: 0;
    display: block;
    height: 360px;
    max-height: none;
    margin: 0;
    padding: 24px 16px 0;
    align-self: center;
    text-align: start;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__rail {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
    min-width: 0;
    height: 360px;
}

/* Text column ------------------------------------------------------------ */
.d9-body .d9-d2-martyrs .d9-d2-martyrs__head {
    margin: 0 0 40px;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__copy h2 {
    margin: 0 0 20px;
    padding: 10px;
    color: #071c35;
    font-size: var(--site-section-title-size, clamp(1.375rem, 1.1rem + .7vw, 1.75rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__copy h2 a {
    color: #071c35;
    transition: all .8s;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__copy h2 a:hover {
    color: var(--primary, #615b1f);
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__basmala {
    margin: 0 0 20px;
    color: #071c35;
    font-family: 'Scheherazade New';
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__verse {
    margin: 0 0 20px;
    color: #555;
    font-family: 'Scheherazade New';
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    text-align: justify;
}

/* Demo 2's square .btn-prev/.btn-next pair. */
.d9-body .d9-d2-martyrs .d9-d2-martyrs__controls {
    display: block;
    width: auto;
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__nav {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin: 0 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: var(--primary, #615b1f);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .05);
    font-size: 15px;
    line-height: 75px;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    transform: none;
    transition: all .8s;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__nav:hover,
.d9-body .d9-d2-martyrs .d9-d2-martyrs__nav:focus-visible {
    color: #fff;
    background: var(--secondary, #dec53c);
    box-shadow: 0 12px 20px 0 var(--rgba-primary-3, rgba(199, 176, 51, .7));
    outline: none;
    transform: none;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__nav .ui-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__nav.swiper-button-lock {
    display: none;
}

/* Portrait rail ---------------------------------------------------------- */
.d9-body .d9-d2-martyrs .d9-d2-martyrs__slider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    mask-image: none;
    -webkit-mask-image: none;
}

.d9-body .d9-d2-martyrs .swiper-wrapper {
    align-items: stretch;
}

.d9-body .d9-d2-martyrs .d9-d2-martyr-card {
    position: relative;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    margin: 70px 0;
    padding: 0;
    background: transparent;
    perspective: none;
    transition: none;
}

.d9-body .d9-d2-martyrs .d9-d2-martyr-frame {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    filter: none;
    transform: none;
    transition: all .6s ease;
}

.d9-body .d9-d2-martyrs .d9-d2-martyr-frame img {
    display: block;
    width: 100%;
    height: 500px;
    border: 0;
    border-radius: 20px;
    object-fit: scale-down;
    object-position: center;
    backface-visibility: hidden;
    filter: none;
    transform: none;
    transition: none;
}

/* Demo 2's hover: lift, warm glow, soft shadow — no rotation. */
.d9-body .d9-d2-martyrs .d9-d2-martyr-frame:hover,
.d9-body .d9-d2-martyrs .d9-d2-martyr-frame:focus-visible {
    z-index: 10;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
    filter: brightness(1.1) drop-shadow(0 0 15px rgba(255, 240, 200, .4)) blur(.6px);
    transform: scale(var(--d9-frame-scale, 1.05));
    outline: none;
}

.d9-body .d9-d2-martyrs .d9-d2-martyr-card:hover,
.d9-body .d9-d2-martyrs .d9-d2-martyr-card:focus-within {
    z-index: 10;
}

.d9-body .d9-d2-martyrs .d9-d2-martyr-card:hover img,
.d9-body .d9-d2-martyrs .d9-d2-martyr-card:focus-within img {
    filter: none;
    transform: none;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__empty {
    width: 100%;
    margin: 70px 0 0;
    padding: 32px 20px;
    border: 1px solid rgba(101, 91, 31, .2);
    border-radius: 12px;
    text-align: center;
}

/* "Martyr of the day" column (Demo 2's .martyrclass). The portrait is given
   exactly the width the rail's portraits have and starts on the same line as
   them (70px), so the two read as one row of frames. */
.d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__copy {
    padding-top: 0;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__today {
    display: block;
    width: calc(66.667% + 12px); /* = one rail slide: 2/9 of the viewport minus its share of the gutters */
    height: auto;
    margin: 0 auto;
    gap: 0;
    text-align: center;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__copy .d9-d2-martyrs__today-title {
    position: relative;
    top: 18px;
    margin: 0;
    padding: 0;
    color: #071c35;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center;
}

.d9-body .d9-d2-martyrs .d9-d2-martyrs__today-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 42px; /* 28px title box + 42px = the rail's 70px offset */
}

.d9-body .d9-today-slider { position: relative; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; border-radius: 20px; }
.d9-body .d9-today-slide { height: auto; }
.d9-body .d9-today-controls {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 8px auto 0;
    padding: 4px;
    color: #fff3c9;
    background: rgba(11, 33, 23, .88);
    border: 1px solid rgba(216, 189, 97, .55);
    border-radius: 24px;
}
.d9-body .d9-today-controls > span { min-width: 42px; font-size: 14px; white-space: nowrap; }
.d9-body .d9-today-controls button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
.d9-body .d9-today-controls button:hover { color: #0b2117; background: #d8bd61; }
.d9-body .d9-today-controls .ui-icon { width: 18px; height: 18px; }

.d9-body .d9-d2-martyrs .d9-d2-martyrs__today .d9-d2-martyr-frame img {
    height: auto;
    margin-top: 0;
    object-fit: fill;
}

/* On an anniversary the verse gives way to the portrait, so the arrows move
   under it (compact, centred) instead of disappearing with the verse. */
.d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__controls {
    margin-top: 16px;
    text-align: center;
}

.d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__nav {
    width: 45px;
    height: 45px;
    line-height: 45px;
}

/* Breakpoints ------------------------------------------------------------ */
@media (min-width: 1200px) {
    .d9-body .d9-d2-martyrs {
        height: 580px;
    }

    /* 28px title + 42px + 500px portrait + 16px + 45px arrows, plus breathing room. */
    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] {
        height: 660px;
    }
    .d9-body .d9-d2-martyrs[data-d9-today-multiple] {
        height: 710px;
    }
}

@media (max-width: 1400px) {
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__nav {
        width: 45px;
        height: 45px;
        line-height: 45px;
    }
}

/* Two portraits per rail here, each a third of the screen wide. */
@media (min-width: 992px) and (max-width: 1199px) {
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__today {
        width: min(100% + 32px, 358px);
    }
}

/* Wide layouts: the 500px-tall portraits stop growing at 358px, so once the
   layout is wide enough home.js sets .is-wide and --d9-rail-width
   (n x 358px + (n - 1) x 24px gutters) from the measured layout width —
   correct under any page zoom — and the text column takes whatever is left. */
@media (min-width: 992px) {
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__layout.is-wide .d9-d2-martyrs__copy {
        flex: 1 1 0; /* basis 0: the verse's long line must not widen the column */
        max-width: none;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__layout.is-wide .d9-d2-martyrs__rail {
        flex: 0 0 auto;
        width: var(--d9-rail-width, 1122px);
        max-width: none;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__layout.is-wide .d9-d2-martyrs__today {
        width: 358px;
    }

    /* home.js keeps --d9-slide-width equal to one rail slide. */
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__layout[style*="--d9-slide-width"] .d9-d2-martyrs__today {
        width: var(--d9-slide-width);
    }

    /* The day's portrait belongs to the same centred row as the slider. */
    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__layout.is-wide {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__layout.is-wide .d9-d2-martyrs__copy {
        flex: 0 0 auto;
        width: calc(var(--d9-portrait-width) + var(--d9-martyr-gap));
        padding-inline: 0 var(--d9-martyr-gap);
    }
}

@media (min-width: 576px) {
    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame img,
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__today .d9-d2-martyr-frame img {
        height: auto;
        aspect-ratio: 813 / 1135;
        object-fit: contain;
    }
}

/* Phones: the day's martyr, then a clear "الشهداء" divider before the rest. */
.d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title {
    display: none;
}

@media (max-width: 991px) {
    .d9-body .d9-d2-martyrs {
        height: auto;
        padding-bottom: 36px;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] {
        height: auto;
        padding-bottom: 36px;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__copy,
    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__rail {
        height: auto;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__copy {
        margin-bottom: 0;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__controls {
        display: none;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 30px 0 4px;
        color: #071c35;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title::before,
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title::after {
        flex: 1;
        height: 1px;
        content: "";
        background: rgba(101, 91, 31, .35);
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__layout {
        padding: 0 20px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy,
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail {
        flex: 0 0 100%;
        max-width: 100%;
        height: auto;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy {
        margin-bottom: 24px;
        padding: 24px 0 0;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__copy {
        padding-top: 0;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-card {
        margin: 30px 0;
        padding-top: 40px;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyr-card {
        padding-top: 0;
    }

    /* Stacked: the portrait keeps the rail's 500px height and sits centred. */
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__today {
        width: min(100%, var(--d9-slide-width, 358px));
    }
}

/* Cap the tablet rail at two full-size portraits so object-fit cannot
   introduce a large invisible gutter inside each slide. */
@media (min-width: 576px) and (max-width: 991px) {
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__slider {
        max-width: 358px;
        margin-inline: auto;
    }
}

@media (min-width: 591px) and (max-width: 991px) {
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__slider {
        max-width: calc(var(--d9-visible-slides, 2) * (358px + var(--d9-martyr-gap)) - var(--d9-martyr-gap));
    }
}

@media (max-width: 767px) {
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy .d9-d2-martyrs__today-title {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    /* Phones: the section runs edge to edge and every portrait fills the
       screen width at its natural proportion; heights follow the content. */
    .d9-body .d9-d2-martyrs,
    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] {
        height: auto;
        padding-bottom: 28px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__layout {
        padding: 0 8px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy,
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail {
        height: auto;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy {
        margin-bottom: 0;
        padding: 20px 16px 0;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__head {
        margin-bottom: 24px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__controls {
        text-align: center;
    }

    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyrs__copy {
        padding: 12px 0 0;
    }

    /* Phones show one portrait at a time, so it takes the screen's width
       instead of leaving a wide margin on either side. */
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__today {
        width: 100%;
        margin-inline: auto;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-card .d9-d2-martyr-frame {
        width: 100%;
        margin-inline: auto;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__today-frame {
        margin-top: 30px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title {
        margin: 26px 16px 8px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-card,
    .d9-body .d9-d2-martyrs[data-d9-memory-mode="today"] .d9-d2-martyr-card {
        margin: 0;
        padding-top: 0;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame,
    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame img {
        border-radius: 10px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-card {
        padding-inline: 2px;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame img,
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__today .d9-d2-martyr-frame img {
        width: 100%;
        height: auto;
        aspect-ratio: 813 / 1135;
        object-fit: cover;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame:hover,
    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame:focus-visible {
        transform: none;
        box-shadow: none;
    }
}

/* Dark mode keeps the home page's night palette on the same layout. */
html.layout-dark .d9-body .d9-d2-martyrs {
    color: #ece4cf;
    background-color: #16281f;
}

html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__pattern {
    opacity: .35;
}

html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy h2,
html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy h2 a,
html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__basmala,
html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy .d9-d2-martyrs__today-title {
    color: #f0dc91;
}

html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__verse {
    color: #ece4cf;
}

html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title {
    color: #f0dc91;
}

html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title::before,
html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__rail-title::after {
    background: rgba(236, 228, 207, .28);
}

html.layout-dark .d9-body .d9-d2-martyrs .d9-d2-martyrs__empty {
    border-color: rgba(236, 228, 207, .28);
}

@media (prefers-reduced-motion: reduce) {
    .d9-body .d9-d2-martyrs .d9-d2-martyr-card,
    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame,
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__nav,
    .d9-body .d9-d2-martyrs .d9-d2-martyrs__copy h2 a {
        transition: none;
    }

    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame:hover,
    .d9-body .d9-d2-martyrs .d9-d2-martyr-frame:focus-visible {
        transform: none;
    }
}

.d9-body .d9-d2-martyrs a:focus-visible,
.d9-body .d9-d2-martyrs button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}