/*
 * /feed on phones, one story per screen ("Jedna po jedna"): the site's light, square look instead of the dark photo
 * reel. Each story: its picture on top, taking all the room the white panel under it does not need (the panel with the
 * red bar: kind, title, Adios's summary, "Pogledaj original", "Detalji"), and a row of actions under it (like, comments,
 * other portals, share). The controls over the picture are white squares. Ads and partner deals keep their own cards.
 * Loaded after style.css and news.css on /feed; rules carry !important where the older dark reel's rules did.
 */

@media (max-width: 767.98px) {
    body.feed-page:not(.feed-list-mode) {
        background: #f3f4f1 !important;
    }

    body.feed-page:not(.feed-list-mode) .article-feed {
        background: #f3f4f1 !important;
    }

    /* ---- A story's screen ---- */

    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card) {
        display: flex !important;
        flex-direction: column;
        border: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card)::before,
    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card)::after {
        display: none !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card) > .article-image {
        position: relative !important;
        inset: auto !important;
        flex: 1 1 0;
        width: 100% !important;
        height: auto !important;
        min-height: 11rem !important;
        max-height: none !important;
        /* The site's picture placeholder (the Adios logo) while the picture loads or is still being drawn; the picture
           covers it once it is there. */
        background: #f4f5f6 url("../img/brand/adios-article-placeholder.svg") center / cover no-repeat !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card) > .article-image::before,
    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card) > .article-image::after {
        display: none !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card) > .article-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: none !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card) > .article-body {
        position: relative !important;
        inset: auto !important;
        z-index: 2;
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.45rem !important;
        height: auto !important;
        min-height: 0;
        max-height: none !important;
        margin: 0 !important;
        padding: 0.75rem 0.9rem 0.7rem !important;
        overflow: hidden;
        border-top: 4px solid var(--news-accent) !important;
        color: var(--news-ink) !important;
        background: #ffffff !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-body h2 {
        margin: 0 !important;
        color: var(--news-ink) !important;
        font-family: var(--news-font-head);
        font-size: clamp(1.15rem, 5vw, 1.4rem) !important;
        font-weight: 800;
        line-height: 1.18 !important;
        text-shadow: none !important;
        -webkit-line-clamp: 3 !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-body p {
        max-width: none !important;
        margin: 0 !important;
        color: var(--news-soft-ink) !important;
        font-size: 0.92rem !important;
        line-height: 1.4 !important;
        text-shadow: none !important;
        -webkit-line-clamp: 3 !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-text-tap-zone {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }

    body.feed-page:not(.feed-list-mode) .article-card .tag-list span,
    body.feed-page:not(.feed-list-mode) .article-card .tag-list a,
    body.feed-page:not(.feed-list-mode) .article-card .article-meta span {
        min-height: 0 !important;
        padding: 0.2rem 0.5rem !important;
        border: 1px solid var(--news-rule) !important;
        border-radius: 0 !important;
        color: var(--news-ink) !important;
        background: #f4f5f7 !important;
        box-shadow: none !important;
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em;
    }

    body.feed-page:not(.feed-list-mode) .article-card .tag-list > :first-child {
        border-color: var(--news-accent) !important;
        color: #ffffff !important;
        background: var(--news-accent) !important;
    }

    /* The portals' dots (several reports of the story, swiped sideways) */
    body.feed-page:not(.feed-list-mode) .article-card .card-source-dots button {
        border-color: var(--news-rule-strong) !important;
        background: #ffffff !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .card-source-dots button.is-active {
        border-color: var(--news-accent) !important;
        background: var(--news-accent) !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        margin-top: 0.1rem !important;
        padding: 0 !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-actions .btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.4rem !important;
        padding: 0.35rem 0.6rem !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-size: 0.88rem !important;
        font-weight: 800 !important;
        white-space: nowrap;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-actions .btn-primary {
        border: 2px solid var(--news-accent) !important;
        color: #ffffff !important;
        background: var(--news-accent) !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-actions .btn:not(.btn-primary) {
        border: 2px solid var(--news-ink) !important;
        color: var(--news-ink) !important;
        background: #ffffff !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .article-actions .mobile-soft-button {
        display: none !important;
    }

    /* ---- The actions under the panel: like, comments, other portals, share ---- */

    body.feed-page:not(.feed-list-mode) .article-card:not(.ad-card, .feed-ad-card, .affiliate-card, .portal-deal-card) > .feed-side-actions {
        position: relative !important;
        inset: auto !important;
        z-index: 2;
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: row !important;
        align-items: stretch;
        justify-content: space-around;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.15rem 0.5rem calc(0.15rem + env(safe-area-inset-bottom)) !important;
        transform: none !important;
        border-top: 1px solid var(--news-rule) !important;
        background: #ffffff !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .feed-side-actions .feed-action-button {
        display: inline-flex !important;
        flex: 1 1 0;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        gap: 0.4rem !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 2.4rem !important;
        padding: 0 !important;
        color: var(--news-ink) !important;
        background: transparent !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .feed-side-actions .feed-action-button :is(i, .feed-action-count) {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        color: inherit !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .feed-side-actions .feed-action-button i {
        font-size: 1.1rem !important;
    }

    /* ---- The small ad in some stories' panels (AdPlaces.ReelInline: 320 x 100, every 6th story halfway between two
       whole-screen ads). Clearly apart from the buttons under it, labelled "Oglas"; the picture and the summary give
       it room. Google only (MGID's widgets are far taller); a box Google leaves empty goes (ads.js). ---- */

    body.feed-page:not(.feed-list-mode) .article-card.has-inline-ad .article-body p {
        -webkit-line-clamp: 2 !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .reel-inline-ad {
        margin: 0.15rem 0 0.8rem;
    }

    body.feed-page:not(.feed-list-mode) .article-card .reel-inline-ad .ad-slot {
        justify-items: center;
        margin: 0 !important;
        padding: 0.35rem 0 0.45rem !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .reel-inline-ad .ad-slot-label {
        justify-self: start;
        padding-left: 0.6rem;
    }

    body.feed-page:not(.feed-list-mode) .article-card .reel-inline-ad:not(:has(.ad-slot)),
    body.feed-page:not(.feed-list-mode) .article-card .reel-inline-ad:has(.ad-slot.is-gone) {
        display: none;
    }

    body.feed-page:not(.feed-list-mode) .article-card .feed-side-actions .feed-action-count {
        font-size: 0.86rem !important;
        font-weight: 800 !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card .feed-side-actions .feed-action-button.is-liked {
        color: var(--news-accent) !important;
    }

    /* ---- The picture's controls: white squares ---- */

    body.feed-page:not(.feed-list-mode) .article-card .article-overlay-bar {
        background: none !important;
        top: auto !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        left: 0.75rem !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card :is(.article-info-button, .coverage-badge, .source-badge),
    body.feed-page:not(.feed-list-mode) :is(.reel-refresh-button, .reel-header-panel > summary) {
        border: 1px solid var(--news-rule-strong) !important;
        border-radius: 0 !important;
        color: var(--news-ink) !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(17, 24, 39, 0.16) !important;
        text-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .article-card :is(.article-info-button, .coverage-badge) i,
    body.feed-page:not(.feed-list-mode) :is(.reel-refresh-button, .reel-header-panel > summary) i {
        color: var(--news-ink) !important;
    }

    body.feed-page:not(.feed-list-mode) .reel-header-panel[open] > summary {
        border-color: var(--news-accent) !important;
    }

    body.feed-page:not(.feed-list-mode) .reel-header-panel > summary span,
    body.feed-page:not(.feed-list-mode) .article-card .coverage-badge-label {
        color: var(--news-ink) !important;
    }

    /* The header's menus (filters, the way of reading, the profile, notifications): light panels */
    body.feed-page:not(.feed-list-mode) .reel-header-panel :is(.reel-profile-menu, .reel-filter-menu, .reel-notification-menu, .reel-panel-body, .reel-filter-body, .dropdown-menu) {
        border: 1px solid var(--news-rule) !important;
        border-top: 4px solid var(--news-accent) !important;
        border-radius: 0 !important;
        color: var(--news-ink) !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 14px 34px rgba(17, 24, 39, 0.22) !important;
    }

    body.feed-page:not(.feed-list-mode) .reel-header-panel :is(.reel-profile-menu, .reel-filter-menu, .reel-notification-menu, .reel-panel-body, .reel-filter-body) :is(strong, b, h2, h3, label, legend, span, p) {
        color: var(--news-ink) !important;
        text-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .reel-header-panel :is(.reel-profile-menu, .reel-filter-menu, .reel-notification-menu, .reel-panel-body, .reel-filter-body) small {
        color: #667085 !important;
    }

    body.feed-page:not(.feed-list-mode) .reel-header-panel :is(a, button, .reel-view-option, .reel-filter-chip, select, input) {
        border-color: var(--news-rule) !important;
        border-radius: 0 !important;
        color: var(--news-ink) !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .reel-header-panel :is(.is-active, [aria-pressed="true"], [aria-current="page"]) {
        border-color: var(--news-accent) !important;
        color: var(--news-accent) !important;
    }

    body.feed-page:not(.feed-list-mode) .reel-header-panel :is(.reel-view-option, a, button) i {
        color: var(--news-accent) !important;
    }

    /* ---- The other portals' sheet ("Odaberi izvor") ---- */

    body.feed-page:not(.feed-list-mode) .related-drawer {
        border: 0 !important;
        border-top: 4px solid var(--news-accent) !important;
        border-radius: 0 !important;
        color: var(--news-ink) !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 -18px 40px rgba(17, 24, 39, 0.22) !important;
    }

    body.feed-page:not(.feed-list-mode) .related-drawer :is(.related-drawer-head, .related-drawer-head strong, .related-drawer-head span, h3, p, button) {
        color: var(--news-ink) !important;
        text-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .related-drawer .related-drawer-head span,
    body.feed-page:not(.feed-list-mode) .related-drawer p {
        color: #667085 !important;
    }

    body.feed-page:not(.feed-list-mode) .related-drawer-card {
        border: 1px solid var(--news-rule) !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .related-drawer-card.is-active {
        border-color: var(--news-accent) !important;
    }

    body.feed-page:not(.feed-list-mode) .related-drawer .same-event-actions a,
    body.feed-page:not(.feed-list-mode) .related-drawer .active-source-pill {
        border: 2px solid var(--news-ink) !important;
        border-radius: 0 !important;
        color: var(--news-ink) !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    body.feed-page:not(.feed-list-mode) .related-drawer .active-source-pill {
        border-color: var(--news-accent) !important;
        color: var(--news-accent) !important;
    }

    body.feed-page:not(.feed-list-mode) .related-drawer-handle {
        background: var(--news-rule-strong) !important;
    }
}