/*
 * majma-polish.css — small, scoped polish layer for majmavaredat.com.
 * Loaded last from base.html. Every layout rule here is mobile-only
 * (max-width: 767.98px, below Tailwind's md); desktop is untouched.
 * Hooks are the mf-* classes in templates/partials/_footer.html.
 */

/* The one-line copyright exists only for phones. */
footer.majma-footer .mf-copy-short { display: none; }

@media (max-width: 767.98px) {
    /* ── Main block: much less vertical padding ── */
    footer.majma-footer .mf-main {
        padding-top: 18px;
        padding-bottom: 6px;
    }

    /* ── Logo, blurb and newsletter ── */
    footer.majma-footer .mf-top {
        gap: 12px;
        padding-bottom: 14px;
    }
    /* Bootstrap's spacing utilities (.mb-4, .py-3, .gap-3 …) are !important,
       so the few overrides that fight them need it too. */
    footer.majma-footer .mf-top > div:first-child > a {
        margin-bottom: 6px !important;
    }
    footer.majma-footer .mf-top > div:first-child img {
        height: 40px;
    }
    footer.majma-footer .mf-top > div:first-child p {
        margin: 0 auto;
        font-size: 12px;
        line-height: 1.7;
    }
    footer.majma-footer .mf-top h4 {
        margin-bottom: 8px !important;
        font-size: 13px;
    }
    /* input and button side by side instead of stacked */
    footer.majma-footer .mf-top .news-newsletter-form {
        flex-direction: row;
        gap: 6px;
    }
    footer.majma-footer .mf-top .news-newsletter-input-wrap {
        min-width: 0;
    }
    footer.majma-footer .mf-top input[type="email"] {
        min-width: 0;
        padding: 8px 12px !important;
        font-size: 13px;
    }
    footer.majma-footer .mf-top button[type="submit"] {
        padding: 8px 14px !important;
        font-size: 13px;
    }

    /* ── Link columns: two side by side, contact and social full width ── */
    footer.majma-footer .mf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 14px;
        padding-top: 14px;
        padding-bottom: 10px;
    }
    footer.majma-footer .mf-grid h5 {
        margin-bottom: 6px;
        font-size: 14px;
        line-height: 1.6;
    }
    footer.majma-footer .mf-grid ul {
        margin-bottom: 0;
    }
    footer.majma-footer .mf-links ul.space-y-4 > li:not(:first-child) {
        margin-top: 6px;
    }
    footer.majma-footer .mf-links a {
        gap: 6px;
        font-size: 12.5px;
        line-height: 1.6;
    }
    footer.majma-footer .mf-links a i {
        font-size: 8px;
    }

    /* contact: one tight row (wraps if needed); icons stand in for labels */
    footer.majma-footer .mf-contact,
    footer.majma-footer .mf-social {
        grid-column: 1 / -1;
    }
    footer.majma-footer .mf-contact ul.space-y-5 {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
    }
    footer.majma-footer .mf-contact ul.space-y-5 > li:not(:first-child) {
        margin-top: 0;
    }
    footer.majma-footer .mf-contact li {
        align-items: center;
        gap: 7px !important;
        min-width: 0;
    }
    footer.majma-footer .mf-contact li i {
        margin-top: 0;
        font-size: 13px;
    }
    footer.majma-footer .mf-contact li > div {
        min-width: 0;
    }
    footer.majma-footer .mf-contact li > div > span {
        /* visually hidden, still read by screen readers */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    footer.majma-footer .mf-contact li a {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    /* social: collapse when there is nothing to show */
    footer.majma-footer .mf-social.mf-empty {
        display: none;
    }
    footer.majma-footer .mf-social > div {
        margin-bottom: 0;
    }

    /* ── Bottom bar: one small copyright line + legal links ── */
    footer.majma-footer .mf-bottom {
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    footer.majma-footer .mf-bottom .container > .flex {
        gap: 6px;
    }
    footer.majma-footer .mf-copy {
        display: none;
    }
    footer.majma-footer .mf-copy-short {
        display: block;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.6;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    footer.majma-footer .mf-legal {
        gap: 14px;
        font-size: 11px;
    }

    /* never let anything in the footer widen the page */
    footer.majma-footer img,
    footer.majma-footer iframe {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Home page (1405/07/21): ticker, «مرور سریع», overlaid cards,
   «آخرین مطالب» show-more. Layout changes are mobile-only, except
   the latest-posts limit (6 on desktop) and its toggle button.
   ═══════════════════════════════════════════════════════════════ */

/* ── «آخرین مطالب»: newest 6 on desktop, newest 3 on phones; the rest
   open with the button (static/js/majma-latest.js). Pure CSS, so it
   also holds with JS off. ── */
.ed-latest-mosaic.is-collapsed > .ed-latest-card:nth-child(n+7) {
    display: none;
}
.ed-latest-more-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 0.875rem;
}
.ed-latest-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 1.1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--hx-accent);
    background: var(--hx-card-glass);
    border: 1px solid var(--hx-border-soft);
    border-radius: 99px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.ed-latest-more:hover {
    border-color: var(--hx-accent);
    background: var(--hx-accent-dim);
}
.ed-latest-more:focus-visible {
    outline: 2px solid var(--hx-accent);
    outline-offset: 2px;
}
.ed-latest-more i {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}
.ed-latest-more.is-open i {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    /* ── «خبر فوری» ticker: gone on phones (header height follows) ── */
    .ed-header .ed-header-ticker {
        display: none;
    }

    .ed-latest-mosaic.is-collapsed > .ed-latest-card:nth-child(n+4) {
        display: none;
    }

    /* compact one-column latest cards */
    .ed-latest--aurora {
        padding: 1.25rem 0.875rem;
    }
    .ed-latest-mosaic {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
    .ed-latest-card {
        gap: 0.65rem;
        align-items: center;
        padding: 0.6rem 0.75rem;
        border-radius: 0.75rem;
    }
    .ed-latest-card-num {
        font-size: 1.75rem;
    }
    .ed-latest-card-thumb {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 0.6rem;
    }
    .ed-latest-card .ed-latest-meta {
        font-size: 0.7rem;
        margin-bottom: 0.1rem;
    }
    .ed-latest-card-title {
        font-size: 0.85rem;
        line-height: 1.55;
        margin-bottom: 0.15rem;
    }
    .ed-latest-date {
        font-size: 0.68rem;
    }
}

@media (max-width: 767.98px) {
    /* ── «مرور سریع»: label as a small heading, chips in an even 2-column grid ── */
    .ed-cat-nav.ed-cat-nav--creative {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    .ed-cat-nav--creative .ed-cat-nav-label {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    .ed-cat-nav--creative .ed-cat-nav-pills {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 0.4rem;
    }
    .ed-cat-nav--creative .ed-cat-pill {
        justify-content: center;
        min-height: 36px;
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1.45;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        border-radius: 0.6rem;
    }
    /* «همه مطالب» stays secondary; alone on its row it takes the full width */
    .ed-cat-nav--creative .ed-cat-pill--ghost {
        background: transparent;
        color: var(--hx-accent);
    }
    .ed-cat-nav--creative .ed-cat-pill--ghost:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* ── Overlaid cards → image on top, text below on a solid surface ── */
    .ed-featured-hero,
    .ed-mosaic-hero,
    .ed-bento-cell {
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: var(--hx-surface);
    }
    .ed-featured-hero-media,
    .ed-mosaic-hero-media,
    .ed-bento-media {
        position: relative;
        inset: auto;
        flex: none;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    .ed-featured-hero-media img,
    .ed-featured-hero-img,
    .ed-mosaic-hero-media img,
    .ed-bento-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ed-featured-hero-scrim,
    .ed-featured-hero-mesh {
        display: none;
    }

    .ed-featured-hero-panel,
    .ed-mosaic-hero-body,
    .ed-bento-caption {
        position: relative;
        inset: auto;
        z-index: 1;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-width: none;
        justify-content: flex-start;
        background: var(--hx-surface);
        color: var(--hx-text);
    }

    /* featured hero */
    .ed-featured-hero-panel {
        gap: 0.45rem;
        padding: 0.75rem 0.85rem 0.9rem;
    }
    .ed-featured-hero-title {
        color: var(--hx-text);
    }
    .ed-featured-hero-lead {
        color: var(--hx-text-muted);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .ed-featured-hero-num {
        opacity: 0.35;
    }
    .ed-featured-hero-foot {
        border-top-color: var(--hx-border);
    }
    .ed-featured-hero-meta,
    .ed-featured-hero-meta span {
        color: var(--hx-text-muted);
    }

    /* section «ویژه» card (mosaic) */
    .ed-mosaic-hero-body {
        padding: 0.75rem 0.85rem 0.9rem;
    }
    .ed-mosaic-hero-body .ed-badge {
        align-self: flex-start;
    }
    .ed-mosaic-hero-title {
        margin: 0.4rem 0 0.3rem;
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--hx-text);
    }
    .ed-mosaic-hero-excerpt {
        margin: 0;
        font-size: 0.8125rem;
        line-height: 1.7;
        color: var(--hx-text-muted);
        -webkit-line-clamp: 3;
    }

    /* bento: two even cards per row, caption under the image */
    .ed-bento {
        grid-auto-rows: 1fr;
        gap: 0.6rem;
    }
    .ed-bento-cell--1 {
        min-height: 0;
    }
    .ed-bento-caption {
        padding: 0.5rem 0.6rem 0.65rem;
    }
    .ed-bento-caption h3,
    .ed-bento-cell--1 .ed-bento-caption h3 {
        margin-top: 0.25rem;
        font-size: 0.8125rem;
        line-height: 1.6;
        color: var(--hx-text);
    }
}