/* ==========================================================================
   mod_articlecards — grid wrapper for the dynamic "latest articles" cards.
   Cards themselves (.ak-card, .ak-card img, .sppb-addon-title,
   .sppb-addon-text, a.ak-card-btn) reuse the site's own custom.css rules
   so a dynamic section looks identical to the hand-built SPPB one it
   replaces. This file supplies the responsive grid/bento layouts around
   them, plus a few module-scoped tweaks (button spacing, image height)
   that only apply inside .ak-cards-grid — the older hand-built SPPB cards
   elsewhere on the site are untouched.
   ========================================================================== */

.ak-cards-grid {
    display: grid;
    gap: 24px;
    margin-bottom: 8px;
}

/* -----------------------------------------------------------------------
   Layout 01 (default) — plain equal grid, 1-6 columns depending on count.
   Images get a fixed height + object-fit:cover so every card lines up
   the same height regardless of the source photo's own aspect ratio.
   ----------------------------------------------------------------------- */
.ak-cards-grid-1 { grid-template-columns: 1fr; }
.ak-cards-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ak-cards-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ak-cards-grid-4,
.ak-cards-grid-5,
.ak-cards-grid-6 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .ak-cards-grid-3,
    .ak-cards-grid-4,
    .ak-cards-grid-5,
    .ak-cards-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ak-cards-grid-2,
    .ak-cards-grid-3,
    .ak-cards-grid-4,
    .ak-cards-grid-5,
    .ak-cards-grid-6 {
        grid-template-columns: 1fr;
    }
}

.ak-cards-grid:not(.ak-cards-bento) .ak-card img {
    height: 220px;
    object-fit: cover;
}

@media (max-width: 560px) {
    .ak-cards-grid:not(.ak-cards-bento) .ak-card img {
        height: 180px;
    }
}

/* -----------------------------------------------------------------------
   Every card (any layout) is a flex column stretched to the full height of
   its grid cell, with the "Pogledaj" button pushed to the very bottom via
   margin-top:auto — so the button always lines up at the same place across
   a row, no matter how long that card's title or intro text is.
   ----------------------------------------------------------------------- */
.ak-cards-grid .ak-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* -----------------------------------------------------------------------
   Bento layouts (02 / 04 / 08) — a featured card sized differently from
   the rest. Their image also needs to fill the remaining space (so a
   "tall" card's photo is genuinely taller, not just letterboxed) instead
   of the fixed height used above.
   ----------------------------------------------------------------------- */
.ak-cards-bento .ak-card img {
    flex: 1 1 auto;
    min-height: 160px;
    object-fit: cover;
}

/* Layout 07 — a fixed 2x2 grid: two rows of two equal cards, regardless of
   how "equal" (layout-01) would otherwise lay out this many items.
   Designed for exactly 4 items. */
.ak-cards-layout-07 {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
    .ak-cards-layout-07 { grid-template-columns: 1fr; }
}

/* Layout 02 — one tall featured card (left) + two stacked cards (right).
   Designed for exactly 3 items; a 4th+ item falls into the grid's normal
   auto-flow below rather than disappearing. */
.ak-cards-layout-02 {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}
.ak-cards-layout-02 .ak-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.ak-cards-layout-02 .ak-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.ak-cards-layout-02 .ak-card:nth-child(3) { grid-column: 2; grid-row: 2; }

@media (max-width: 700px) {
    .ak-cards-layout-02 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .ak-cards-layout-02 .ak-card:nth-child(1),
    .ak-cards-layout-02 .ak-card:nth-child(2),
    .ak-cards-layout-02 .ak-card:nth-child(3) {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Layout 03 — one tall featured card (left) + three cards stacked (right).
   Mirror of layout-02 with a third stacked card. Designed for exactly 4 items. */
.ak-cards-layout-03 {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: repeat(3, 1fr);
}
.ak-cards-layout-03 .ak-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
.ak-cards-layout-03 .ak-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.ak-cards-layout-03 .ak-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.ak-cards-layout-03 .ak-card:nth-child(4) { grid-column: 2; grid-row: 3; }

@media (max-width: 700px) {
    .ak-cards-layout-03 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .ak-cards-layout-03 .ak-card:nth-child(1),
    .ak-cards-layout-03 .ak-card:nth-child(2),
    .ak-cards-layout-03 .ak-card:nth-child(3),
    .ak-cards-layout-03 .ak-card:nth-child(4) {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Layout 04 — one wide banner card on top + two cards side by side below.
   Designed for exactly 3 items. */
.ak-cards-layout-04 {
    grid-template-columns: repeat(2, 1fr);
}
.ak-cards-layout-04 .ak-card:nth-child(1) { grid-column: 1 / span 2; }
.ak-cards-layout-04 .ak-card:nth-child(1) img { min-height: 260px; }
.ak-cards-layout-04 .ak-card:nth-child(2) { grid-column: 1; }
.ak-cards-layout-04 .ak-card:nth-child(3) { grid-column: 2; }

@media (max-width: 700px) {
    .ak-cards-layout-04 { grid-template-columns: 1fr; }
    .ak-cards-layout-04 .ak-card:nth-child(1),
    .ak-cards-layout-04 .ak-card:nth-child(2),
    .ak-cards-layout-04 .ak-card:nth-child(3) {
        grid-column: 1;
    }
}

/* Layout 05 — three cards stacked (left) + one tall featured card (right).
   Mirror of layout-03. Designed for exactly 4 items. */
.ak-cards-layout-05 {
    grid-template-columns: 1fr 1.6fr;
    grid-template-rows: repeat(3, 1fr);
}
.ak-cards-layout-05 .ak-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.ak-cards-layout-05 .ak-card:nth-child(2) { grid-column: 1; grid-row: 2; }
.ak-cards-layout-05 .ak-card:nth-child(3) { grid-column: 1; grid-row: 3; }
.ak-cards-layout-05 .ak-card:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }

@media (max-width: 700px) {
    .ak-cards-layout-05 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .ak-cards-layout-05 .ak-card:nth-child(1),
    .ak-cards-layout-05 .ak-card:nth-child(2),
    .ak-cards-layout-05 .ak-card:nth-child(3),
    .ak-cards-layout-05 .ak-card:nth-child(4) {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Layout 06 — two wide cards across the top + three cards across the
   bottom. Designed for exactly 5 items. */
.ak-cards-layout-06 {
    grid-template-columns: repeat(6, 1fr);
}
.ak-cards-layout-06 .ak-card:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
.ak-cards-layout-06 .ak-card:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; }
.ak-cards-layout-06 .ak-card:nth-child(1) img,
.ak-cards-layout-06 .ak-card:nth-child(2) img { min-height: 220px; }
.ak-cards-layout-06 .ak-card:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; }
.ak-cards-layout-06 .ak-card:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
.ak-cards-layout-06 .ak-card:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }

@media (max-width: 900px) {
    .ak-cards-layout-06 { grid-template-columns: repeat(2, 1fr); }
    .ak-cards-layout-06 .ak-card:nth-child(1) { grid-column: 1; grid-row: 1; }
    .ak-cards-layout-06 .ak-card:nth-child(2) { grid-column: 2; grid-row: 1; }
    .ak-cards-layout-06 .ak-card:nth-child(3) { grid-column: 1; grid-row: 2; }
    .ak-cards-layout-06 .ak-card:nth-child(4) { grid-column: 2; grid-row: 2; }
    .ak-cards-layout-06 .ak-card:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; }
}
@media (max-width: 560px) {
    .ak-cards-layout-06 { grid-template-columns: 1fr; }
    .ak-cards-layout-06 .ak-card:nth-child(1),
    .ak-cards-layout-06 .ak-card:nth-child(2),
    .ak-cards-layout-06 .ak-card:nth-child(3),
    .ak-cards-layout-06 .ak-card:nth-child(4),
    .ak-cards-layout-06 .ak-card:nth-child(5) {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Layout 08 — one tall featured card (left) + three cards in a row on the
   right. Designed for exactly 4 items. */
.ak-cards-layout-08 {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.ak-cards-layout-08 .ak-card:nth-child(1) { grid-column: 1; }
.ak-cards-layout-08 .ak-card:nth-child(2) { grid-column: 2; }
.ak-cards-layout-08 .ak-card:nth-child(3) { grid-column: 3; }
.ak-cards-layout-08 .ak-card:nth-child(4) { grid-column: 4; }

@media (max-width: 900px) {
    .ak-cards-layout-08 {
        grid-template-columns: repeat(2, 1fr);
    }
    .ak-cards-layout-08 .ak-card:nth-child(1) { grid-column: 1 / span 2; }
    .ak-cards-layout-08 .ak-card:nth-child(2) { grid-column: 1; }
    .ak-cards-layout-08 .ak-card:nth-child(3) { grid-column: 2; }
    .ak-cards-layout-08 .ak-card:nth-child(4) { grid-column: 1 / span 2; }
}

@media (max-width: 560px) {
    .ak-cards-layout-08 { grid-template-columns: 1fr; }
    .ak-cards-layout-08 .ak-card:nth-child(1),
    .ak-cards-layout-08 .ak-card:nth-child(2),
    .ak-cards-layout-08 .ak-card:nth-child(3),
    .ak-cards-layout-08 .ak-card:nth-child(4) {
        grid-column: 1;
    }
}

/* Layout 10 — one wide banner card on top + three cards side by side
   below. Variant of layout-04 with a third card in the bottom row.
   Designed for exactly 4 items. */
.ak-cards-layout-10 {
    grid-template-columns: repeat(3, 1fr);
}
.ak-cards-layout-10 .ak-card:nth-child(1) { grid-column: 1 / span 3; }
.ak-cards-layout-10 .ak-card:nth-child(1) img { min-height: 260px; }
.ak-cards-layout-10 .ak-card:nth-child(2) { grid-column: 1; }
.ak-cards-layout-10 .ak-card:nth-child(3) { grid-column: 2; }
.ak-cards-layout-10 .ak-card:nth-child(4) { grid-column: 3; }

@media (max-width: 700px) {
    .ak-cards-layout-10 { grid-template-columns: 1fr; }
    .ak-cards-layout-10 .ak-card:nth-child(1),
    .ak-cards-layout-10 .ak-card:nth-child(2),
    .ak-cards-layout-10 .ak-card:nth-child(3),
    .ak-cards-layout-10 .ak-card:nth-child(4) {
        grid-column: 1;
    }
}

/* -----------------------------------------------------------------------
   Card internals — title link color/underline, and breathing room around
   the button. The button in custom.css is deliberately edge-to-edge for
   the hand-built SPPB cards (their column already added outer padding
   around it); this module's flat markup has no such wrapper padding, so
   without this the button reads as "glued" to the card's sides/bottom.
   ----------------------------------------------------------------------- */
.ak-card .sppb-addon-title a {
    color: inherit;
    text-decoration: none;
}

.ak-cards-grid a.ak-card-btn {
    width: calc(100% - 52px) !important;
    /* margin-top:auto (not a fixed 14px) is what pushes the button all the
       way down inside the flex-column card, so it lines up at the bottom
       of the row regardless of how long the title/tagline above it is. */
    margin: auto 26px 26px 26px !important;
}

/* The intro image is now also a link — plain, no extra visual chrome, it
   should just look like the image itself (no underline/outline). */
.ak-card-image-link {
    display: block;
}
.ak-card-image-link:focus-visible {
    outline: 2px solid #375fff;
    outline-offset: -2px;
}

/* Layout 02 (i ostali bento layouti) — slika u istaknutoj/većoj kartici
   treba da ispuni dostupan prostor iznad teksta kao cover, a ne da prati
   svoju prirodnu visinu. Fix: flex-grow ide na <a class="ak-card-image-link">
   (ona je direktno dete flex kontejnera .ak-card), ne na <img> unutar nje —
   flex na samom <img> ne radi ništa jer img nije direktno dete flex reda. */
.ak-cards-bento .ak-card-image-link {
    display: block;
    flex: 1 1 auto;
    min-height: 160px;
    overflow: hidden;
}

.ak-cards-bento .ak-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}