/*
 * IRF v337 - Mobile responsive layouts for festival navigation cards.
 * Scope: Fajr/Child navigation on interviews.php and individual archive pages.
 */

@media (max-width: 820px) {
    /* interviews.php: use the new festival cards on mobile and remove the old fallback. */
    body.interviews-page .ifx326-fajr-original {
        display: none !important;
    }

    body.interviews-page .ifx326-fajr-navigation,
    body.interviews-page .ifx329-children-navigation,
    body.fajr260-page .fajr325-period-navigation,
    body.fajr260-page .children330-period-navigation {
        position: relative;
        isolation: isolate;
        display: block !important;
        width: calc(100% - 24px);
        margin: 16px auto 0;
        padding: 14px;
        overflow: hidden;
        border: 1px solid rgba(215, 174, 83, .38);
        border-radius: 18px;
        background:
            radial-gradient(circle at 92% 0%, rgba(215, 174, 83, .09), transparent 35%),
            linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
        box-shadow: 0 14px 34px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .03);
    }

    body.interviews-page .ifx326-fajr-navigation__head,
    body.interviews-page .ifx329-children-navigation__head,
    body.fajr260-page .fajr325-period-navigation__head,
    body.fajr260-page .children330-period-navigation__head {
        display: flex;
        margin-bottom: 13px;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
    }

    body.interviews-page .ifx326-fajr-navigation__title,
    body.interviews-page .ifx329-children-navigation__title,
    body.fajr260-page .fajr325-period-navigation__title,
    body.fajr260-page .children330-period-navigation__title {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: 9px;
    }

    body.interviews-page .ifx326-fajr-navigation__icon,
    body.interviews-page .ifx329-children-navigation__icon,
    body.fajr260-page .fajr325-period-navigation__icon,
    body.fajr260-page .children330-period-navigation__icon {
        display: inline-flex;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(215, 174, 83, .3);
        border-radius: 11px;
        color: #f3d38b;
        background: rgba(215, 174, 83, .085);
    }

    body.interviews-page .ifx326-fajr-navigation__icon svg,
    body.interviews-page .ifx329-children-navigation__icon svg,
    body.fajr260-page .fajr325-period-navigation__icon svg,
    body.fajr260-page .children330-period-navigation__icon svg {
        display: block;
        width: 19px;
        height: 19px;
    }

    body.interviews-page .ifx326-fajr-navigation__title small,
    body.interviews-page .ifx329-children-navigation__title small,
    body.fajr260-page .fajr325-period-navigation__title small,
    body.fajr260-page .children330-period-navigation__title small {
        display: block;
        margin-bottom: 1px;
        color: #f3d38b;
        font-size: 9px;
        line-height: 1.5;
        font-weight: 900;
    }

    body.interviews-page .ifx326-fajr-navigation__title h2,
    body.interviews-page .ifx329-children-navigation__title h2,
    body.fajr260-page .fajr325-period-navigation__title h2,
    body.fajr260-page .children330-period-navigation__title h2 {
        margin: 0;
        color: #fff;
        font-size: 16px;
        line-height: 1.55;
        font-weight: 950;
    }

    body.interviews-page .ifx326-fajr-navigation__hint,
    body.interviews-page .ifx329-children-navigation__hint,
    body.fajr260-page .fajr325-period-navigation__hint,
    body.fajr260-page .children330-period-navigation__hint {
        display: block;
        padding-right: 45px;
        color: #9eabb8;
        font-size: 10px;
        line-height: 1.55;
        font-weight: 700;
    }

    body.interviews-page .ifx326-fajr-navigation__links,
    body.interviews-page .ifx329-children-navigation__links,
    body.fajr260-page .fajr325-period-navigation__links,
    body.fajr260-page .children330-period-navigation__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.interviews-page .ifx326-fajr-link,
    body.interviews-page .ifx329-child-link,
    body.fajr260-page .fajr325-period-link,
    body.fajr260-page .children330-period-link {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 82px;
        padding: 12px 11px 11px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .085);
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .022));
        color: #fff;
        text-decoration: none;
        box-shadow: 0 9px 22px rgba(0, 0, 0, .14);
        -webkit-tap-highlight-color: transparent;
    }

    body.interviews-page .ifx326-fajr-link:active,
    body.interviews-page a.ifx329-child-link:active,
    body.fajr260-page a.fajr325-period-link:active,
    body.fajr260-page a.children330-period-link:active {
        transform: scale(.985);
        border-color: rgba(215, 174, 83, .56);
    }

    body.interviews-page .ifx326-fajr-link::after,
    body.interviews-page .ifx329-child-link::after,
    body.fajr260-page .fajr325-period-link::after,
    body.fajr260-page .children330-period-link::after {
        content: "";
        position: absolute;
        left: -25px;
        bottom: -40px;
        width: 84px;
        height: 84px;
        border: 1px solid rgba(215, 174, 83, .105);
        border-radius: 50%;
        pointer-events: none;
    }

    body.interviews-page .ifx326-fajr-link small,
    body.interviews-page .ifx329-child-link small,
    body.fajr260-page .fajr325-period-link small,
    body.fajr260-page .children330-period-link small {
        position: relative;
        z-index: 1;
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: #aeb9c4;
        font-size: 8px;
        line-height: 1.5;
        font-style: normal;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.interviews-page .ifx326-fajr-link strong,
    body.interviews-page .ifx329-child-link strong,
    body.fajr260-page .fajr325-period-link strong,
    body.fajr260-page .children330-period-link strong {
        position: relative;
        z-index: 1;
        display: block;
        max-width: 100%;
        margin-top: 3px;
        overflow: hidden;
        color: #fff;
        font-size: 19px;
        line-height: 1.3;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.interviews-page .ifx326-fajr-link em,
    body.interviews-page .ifx329-child-link em,
    body.fajr260-page .fajr325-period-link em,
    body.fajr260-page .children330-period-link em {
        position: relative;
        z-index: 1;
        display: block;
        max-width: 100%;
        margin-top: 5px;
        overflow: hidden;
        color: rgba(255, 255, 255, .54);
        font-size: 8px;
        line-height: 1.3;
        font-style: normal;
        font-weight: 800;
        opacity: 1;
        transform: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.interviews-page .ifx329-child-link.is-disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    body.fajr260-page .fajr325-period-link.is-current,
    body.fajr260-page .children330-period-link.is-current {
        cursor: default;
        border-color: #f0cb70;
        background: linear-gradient(135deg, #f4cf73, #d8a936);
        color: #171106;
        box-shadow: 0 12px 28px rgba(215, 174, 83, .19);
    }

    body.fajr260-page .fajr325-period-link.is-current small,
    body.fajr260-page .fajr325-period-link.is-current strong,
    body.fajr260-page .fajr325-period-link.is-current em,
    body.fajr260-page .children330-period-link.is-current small,
    body.fajr260-page .children330-period-link.is-current strong,
    body.fajr260-page .children330-period-link.is-current em {
        color: #171106;
    }
}

@media (max-width: 360px) {
    body.interviews-page .ifx326-fajr-navigation,
    body.interviews-page .ifx329-children-navigation,
    body.fajr260-page .fajr325-period-navigation,
    body.fajr260-page .children330-period-navigation {
        width: calc(100% - 16px);
        padding: 11px;
        border-radius: 15px;
    }

    body.interviews-page .ifx326-fajr-navigation__links,
    body.interviews-page .ifx329-children-navigation__links,
    body.fajr260-page .fajr325-period-navigation__links,
    body.fajr260-page .children330-period-navigation__links {
        gap: 8px;
    }

    body.interviews-page .ifx326-fajr-link,
    body.interviews-page .ifx329-child-link,
    body.fajr260-page .fajr325-period-link,
    body.fajr260-page .children330-period-link {
        min-height: 78px;
        padding: 10px 9px;
    }

    body.interviews-page .ifx326-fajr-link strong,
    body.interviews-page .ifx329-child-link strong,
    body.fajr260-page .fajr325-period-link strong,
    body.fajr260-page .children330-period-link strong {
        font-size: 17px;
    }
}