/* ==========================================================================
   VERND — Oswald, for the article card titles
   --------------------------------------------------------------------------
   The template only loads Inter and Domine (Template Options -> Typography).
   SP Page Builder happens to pull Oswald in on the pages it renders — the
   front page and Fræðsluefni — but /index.php/all-articles is a com_content
   view, so nothing loaded it there and the card titles would have dropped to
   a fallback face on that page alone.

   Loaded here rather than in templates/kind/index.php because this file is not
   touched by a Helix update, and rather than in the template's "Custom Font"
   option because keeping it next to the rules that use it makes it obvious why
   it is here.

   Only the one weight the cards use is requested. On the two builder pages
   this is a second, small Oswald request alongside SP Page Builder's own —
   its URL asks for every weight, so the two do not dedupe. If that becomes
   worth removing, the tidier fix is to drop the font from whichever builder
   addon pulls it in and keep this one.

   @import has to stay at the very top: CSS ignores it after any style rule.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

/* ==========================================================================
   VERND — page title banner on article pages
   --------------------------------------------------------------------------
   The kind template hides the whole #sp-page-title section on article views
   (theme.scss: `.view-article { .sp-module-content-top, #sp-page-title { display: none } }`),
   so the Helix "Enable Page Title" menu option produced nothing there —
   no background image, no alternative title, no subtitle, no breadcrumbs.
   Restore it, matching the old site's behaviour.
   ========================================================================== */

.view-article #sp-page-title {
    display: block;
}

/* The .sp-module-content-top half of that rule is intentionally left alone. */

/* --------------------------------------------------------------------------
   Light-on-dark treatment when the menu item sets a background image/colour.
   The `sp-page-title-has-bg` class is added in templates/kind/features/title.php.
   -------------------------------------------------------------------------- */

.sp-page-title.sp-page-title-has-bg {
    position: relative;
    background-attachment: fixed;
}

.sp-page-title.sp-page-title-has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.sp-page-title.sp-page-title-has-bg > .container {
    position: relative;
    z-index: 1;
}

.sp-page-title.sp-page-title-has-bg .sp-page-title-heading,
.sp-page-title.sp-page-title-has-bg .sp-page-title-sub-heading {
    color: #fff;
}

/* Breadcrumbs sit inside the banner via <jdoc:include name="breadcrumb" />.
   Centre them under the headings — the template only styles their colours. */

.sp-page-title .breadcrumb {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sp-page-title .mod-breadcrumbs__divider,
.sp-page-title .breadcrumb .divider {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 8px;
}

/* ==========================================================================
   VERND — the grey contact band (emergency numbers / logo / email + phone)
   --------------------------------------------------------------------------
   The same section is copied onto nine SP Page Builder pages: 109, 2010–2016
   and 2019. Each copy carries the CSS class `vernd-contact-band` on its row,
   set in the builder under Row → Advanced → CSS Class, so these rules reach
   every copy. If the section is duplicated onto a new page, add that class
   to the new row and it is covered too.

   Layout, spacing and alignment live in each page's builder settings, NOT
   here — edit those in SP Page Builder. These rules only clean up markup the
   builder's fields cannot reach, and only while the columns are stacked.

   This file loads BEFORE the builder's inline <style> block, and the builder
   styles addon text with #id selectors, so the overrides below need
   !important to land. That is the reason for it, not a shortcut.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* The emergency-number list is centred below 992px. Default bullets and
       their indent would hang off to the left of the centred text. */
    .vernd-contact-band .sppb-addon-text-block ul {
        list-style: none;
        padding-left: 0;
        margin-left: 0;
    }

    /* The phone number is authored as <h2 ...><span style="font-size:14pt">,
       so it renders ~19px next to the 14px email address. Level the two up
       while they are stacked. The span carries an inline style, so it needs
       !important of its own. Replacing that <h2> with plain text in the
       "Vernd fangahjálp" feature would make this whole block unnecessary. */
    .vernd-contact-band .sppb-addon-feature .sppb-addon-text h2 {
        font-size: inherit !important;
        line-height: inherit !important;
        margin: 0 !important;
    }

    .vernd-contact-band .sppb-addon-feature .sppb-addon-text h2 span {
        font-size: inherit !important;
    }
}

/* ==========================================================================
   VERND — Fréttir news cards
   --------------------------------------------------------------------------
   Card layout for the category-blog view. That view is reached from exactly
   one menu item, "Fréttir" (id 1649, category 16), so these rules do not
   affect any other page — every other com_content menu item on the site is a
   single-article view.

   Markup comes from three overrides in html/com_content/category/:
   blog.php (containers), blog_item.php (one card), blog_links.php (the dated
   index below the cards).

   WHY THE STYLES LIVE HERE AND NOT IN scss/theme.scss
   The template's SCSS only becomes css/template.css when Helix recompiles it,
   which happens when someone saves the template style in the admin. custom.css
   is loaded straight from disk (templates/kind/index.php line 131), after
   template.css, so edits here take effect on the next page load and survive a
   JoomShaper template update. It is also where the rest of the VERND overrides
   already live.

   The card markup deliberately does not reuse the `.article-list` / `.article`
   class names. Those pull in the old stacked-list rules from theme.scss — a
   hidden `.article-introtext`, fixed 30px item margins, a hover scale on any
   image — which would have to be unpicked one by one. The `vn-` namespace
   below owns this view instead.
   ========================================================================== */

/* The same tokens serve the Fréttir list and the SP Page Builder article grids
   further down this file, so the two stay in step. Adding the second selector
   changes nothing for the news page — the declarations are untouched. */
.com-content-category-blog,
:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles {
    /* Derived from the template style (preset 1), not new brand colours:
       --vn-accent is the existing link_color #0345BF and --vn-ink the existing
       text_color #252525. --vn-accent-weak is that accent at ~8% over white,
       resolved to a flat hex so there is no dependency on color-mix(). */
    --vn-ink: #252525;
    --vn-ink-soft: #5b6068;
    --vn-accent: #0345bf;
    --vn-accent-weak: #e8edf9;
    --vn-rule: #e3e6ec;
    --vn-surface: #ffffff;

    --vn-gap: 1.75rem;
    --vn-radius: 12px;

    /* Every card crops to this one ratio. See the .vn-card__media note. */
    --vn-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.com-content-category-blog > h1,
.com-content-category-blog > h2 {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--vn-rule);
}

/* --------------------------------------------------------------------------
   Grid containers
   -------------------------------------------------------------------------- */

.vn-news {
    display: grid;
    gap: var(--vn-gap);
    margin-bottom: var(--vn-gap);
}

.vn-news--lead {
    grid-template-columns: 1fr;
}

/* Columns are chosen by the grid from the width available, so no breakpoint
   list is needed. The max() is the standard cap idiom: the second term is the
   width a track would have at --vn-max-columns, so once the container is wide
   enough that this exceeds the 17.5rem floor it wins and the count stops
   growing. Narrower than that and the floor wins and tracks re-wrap. */
.vn-news--grid {
    --vn-max-columns: 3;
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(
                17.5rem,
                (100% - (var(--vn-max-columns) - 1) * var(--vn-gap)) / var(--vn-max-columns)
            ),
            1fr
        )
    );
}

/* Below 34rem the 17.5rem floor can still leave a track wider than the
   container on very narrow phones; this collapses it cleanly. */
@media (max-width: 34rem) {
    .vn-news--grid {
        grid-template-columns: 1fr;
    }
}

.vn-news__cell {
    display: flex;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Card
   --------------------------------------------------------------------------
   Bounded by a hairline rather than a drop shadow: the surrounding site uses
   flat surfaces, and a shadowed card would read as pasted on from elsewhere.
   -------------------------------------------------------------------------- */

.vn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: var(--vn-surface);
    border: 1px solid var(--vn-rule);
    border-radius: var(--vn-radius);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.vn-card:hover {
    border-color: rgba(3, 69, 191, 0.35);
}

/* --------------------------------------------------------------------------
   THE INTRO IMAGE FIX
   --------------------------------------------------------------------------
   This is the permanent part. Across the 174 published articles in this
   category the intro images run from 99x170 to 3333x1744 — aspect ratios from
   0.58 to 2.23 — because Helix only substitutes a resized `_thumbnail` or
   `_large` derivative when that file already exists on disk, and only 3 of
   them do. Every card previously inherited whatever the uploader happened to
   provide, so no two rows matched.

   Fixing it in CSS rather than by regenerating thumbnails means it holds for
   every image uploaded from now on, with nothing to re-run and no old article
   to re-save. The media box owns the geometry: `aspect-ratio` fixes the shape
   and `object-fit: cover` crops the image into it from the centre, whatever
   its own dimensions are.

   `height: 100%` has to be stated because template.css line 1 sets
   `img { height: auto }` globally; a class beats that element selector.
   -------------------------------------------------------------------------- */

.vn-card__media {
    position: relative;
    aspect-ratio: var(--vn-ratio);
    overflow: hidden;
    background: var(--vn-accent-weak);
}

.vn-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.vn-card:hover .vn-card__image {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Date plate — the no-image case
   --------------------------------------------------------------------------
   72 of the 174 articles have no intro image at all, so this is not a rare
   fallback; it is close to half the grid. A grey placeholder or a collapsed
   media slot would make those cards read as broken, so the date takes the
   slot instead. It occupies the same ratio box as a photo, which is what
   keeps the grid even.

   The plate is aria-hidden and the card carries a visually hidden <time>
   instead (.vn-card__date--sr), so the date is announced once, not twice.
   -------------------------------------------------------------------------- */

.vn-card__plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    background: var(--vn-accent-weak);
    text-align: center;
}

.vn-card__plate-day {
    font-family: 'Domine', Georgia, serif;
    font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--vn-accent);
}

/* The day is an ordinal in Icelandic and carries a full stop — "17. janúar",
   not "17 janúar". It is added here rather than in the markup because the
   plate is aria-hidden and the <time> beside it already states the date in
   full for assistive tech, so this is purely what the plate looks like. */
.vn-card__plate-day::after {
    content: ".";
}

.vn-card__plate-rest {
    position: relative;
    padding-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

.vn-card__plate-rest::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.75rem;
    height: 2px;
    background: var(--vn-accent);
    transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Card body
   -------------------------------------------------------------------------- */

.vn-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    min-width: 0;
}

.vn-card__date {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

/* Carries the date for assistive tech on cards whose plate is aria-hidden. */
.vn-card__date--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Font size is set on the class because the template styles headings by
   element (h3 { font-size: 40px }) from an inline <style> in the head. A class
   selector outranks that regardless of source order. */
/* Oswald is condensed with a tall x-height, so it takes tighter leading than
   Domine did at this size — 1.35 left visible gaps between wrapped lines. */
.vn-card__title {
    margin: 0;
    font-family: 'Oswald', 'Arial Narrow', Inter, sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    /* Icelandic builds long compounds and 27px leaves little slack in a phone
       card. The longest word in any published title today is 22 characters
       ("Fangelsismálastofnunar"), which measures 260px inside a 303px box, so
       nothing needs breaking yet — this only catches a longer one later. */
    overflow-wrap: break-word;
    color: var(--vn-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vn-card__title a {
    color: inherit;
    transition: color 0.2s ease;
}

.vn-card:hover .vn-card__title a {
    color: var(--vn-accent);
}

/* The whole card is one link: this overlay covers it, with the title as the
   accessible name. Nothing else in the card is focusable, so there is no
   second tab stop to trap. */
.vn-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--vn-radius);
}

/* Outlining the overlay outlines the whole card, which is the real target. */
.vn-card__link:focus-visible {
    outline: none;
}

.vn-card__link:focus-visible::after {
    outline: 3px solid var(--vn-accent);
    outline-offset: 3px;
}

.vn-card__excerpt {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vn-card__flag {
    margin: 0;
    align-self: flex-start;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: #fdf0e3;
    color: #8a4b00;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Tags and content-plugin output are not used on this page today, but the
   overrides still render them if they ever appear. Keep them inside the card
   and above the link overlay so their own links stay clickable. */
.vn-card__tags,
.vn-card__plugins {
    position: relative;
    z-index: 2;
    min-width: 0;
    font-size: 0.8125rem;
}

.vn-card__plugins img {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Lead card
   --------------------------------------------------------------------------
   Wide split rather than text laid over the photo. Overlaid text would have to
   sit on images this variable — some only ~100px wide, some near-white — and
   stay legible on all of them, which no single treatment does.
   -------------------------------------------------------------------------- */

@media (min-width: 52rem) {
    .vn-card--lead {
        display: grid;
        grid-template-columns: 7fr 5fr;
        align-items: stretch;
    }

    .vn-card--lead .vn-card__media {
        height: 100%;
        aspect-ratio: auto;
        min-height: 22rem;
    }

    .vn-card--lead .vn-card__body {
        justify-content: center;
        padding: 2.5rem 2.25rem;
        gap: 0.75rem;
    }

    /* Held at the same 27px as the grid cards, so every card title on the site
       matches. That does flatten the lead card's hierarchy against the ones
       below it — restore the old step up by putting
       `font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem)` back here. */
    .vn-card--lead .vn-card__title {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .vn-card--lead .vn-card__excerpt {
        font-size: 1rem;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    /* With no photo there is nothing to balance a tall plate against, so the
       lead card drops to one column and the plate becomes a short band. */
    .vn-card--lead.vn-card--noimage {
        grid-template-columns: 1fr;
    }

    .vn-card--lead.vn-card--noimage .vn-card__media {
        aspect-ratio: auto;
        min-height: 0;
    }

    .vn-card--lead.vn-card--noimage .vn-card__plate {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 1rem;
        padding: 1.5rem 2.25rem;
    }

    .vn-card--lead.vn-card--noimage .vn-card__plate-day {
        font-size: 2.5rem;
    }

    .vn-card--lead.vn-card--noimage .vn-card__plate-rest {
        padding-top: 0;
    }

    .vn-card--lead.vn-card--noimage .vn-card__plate-rest::before {
        display: none;
    }

    .vn-card--lead.vn-card--noimage .vn-card__body {
        padding-top: 0;
    }
}

/* --------------------------------------------------------------------------
   "More Articles" index
   --------------------------------------------------------------------------
   The tail of the same date-ordered list, at lower weight than the cards.
   -------------------------------------------------------------------------- */

.vn-more {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--vn-rule);
}

.vn-more__heading {
    margin: 0 0 0.5rem;
    font-family: 'Domine', Georgia, serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

.vn-index {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.vn-index__row + .vn-index__row {
    border-top: 1px solid var(--vn-rule);
}

.vn-index__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.875rem 0.25rem;
    color: var(--vn-ink);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.vn-index__link:hover,
.vn-index__link:focus-visible {
    color: var(--vn-accent);
    background: var(--vn-accent-weak);
}

.vn-index__title {
    font-weight: 500;
    min-width: 0;
}

.vn-index__date {
    flex: none;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 34rem) {
    .vn-index__link {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.com-content-category-blog__navigation {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vn-rule);
}

.com-content-category-blog__counter {
    float: none !important;
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--vn-ink-soft);
}

.com-content-category-blog__pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .vn-card,
    .vn-card__image,
    .vn-card__title a,
    .vn-index__link {
        transition: none;
    }

    .vn-card:hover .vn-card__image {
        transform: none;
    }
}

/* ==========================================================================
   VERND — article-addon cards (front page + Fræðsluefni)
   --------------------------------------------------------------------------
   Gives the SP Page Builder "Articles" addon the same card treatment as the
   Fréttir list, so the three article grids on the site match. The Fréttir
   rules above are untouched; this block restyles different markup to the same
   result rather than sharing selectors, because the addon's HTML is fixed by
   SP Page Builder and nothing here can rename it.

   SCOPE
   Two pages, matched on the body's Itemid class, which Helix always emits:
     body.itemid-1101 -> front page          (builder page 109, "Vernd forsíða")
     body.itemid-1653 -> Fræðsluefni         (builder page 2014, "Fróðleikur")
   To cover another page, add its Itemid to the :is() lists below and to the
   token block near the top of this file. Deliberately not applied to every
   .sppb-addon-articles on the site: the addon also sits in module 125
   ("Feature Blog"), which is assigned only to menu items that no longer exist.

   The addon is set to 3 columns on both pages, matching --vn-max-columns here.

   The markup the addon produces, and what each part becomes:
     .sppb-row                  -> the grid
     .sppb-addon-article-layout -> grid cell (its sppb-col-* widths are undone)
     .sppb-addon-article        -> the card
     .sppb-article-img-wrap     -> fixed-ratio media box
     .sppb-article-info-wrap    -> card body
   The plate inside an imageless card comes from noImagePlate() in
   templates/kind/sppagebuilder/addons/articles/site.php.
   ========================================================================== */

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles {
    --vn-max-columns: 3;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Grid
   --------------------------------------------------------------------------
   The addon lays out with float-style columns: .sppb-row is a flex row with
   -15px side margins and each cell is locked to `flex: 0 0 33.333%` by a
   .sppb-col-lg-4 class baked into the markup. All of that is replaced with the
   same auto-fill track sizing the Fréttir grid uses, so the two pages break to
   two and one column at exactly the same widths.
   -------------------------------------------------------------------------- */

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-row {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(
                17.5rem,
                (100% - (var(--vn-max-columns) - 1) * var(--vn-gap)) / var(--vn-max-columns)
            ),
            1fr
        )
    );
    gap: var(--vn-gap);
    margin: 0;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article-layout {
    display: flex;
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

@media (max-width: 34rem) {

    :is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-row {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    /* The addon spaces cards with a 30px bottom margin; the grid gap does it now. */
    margin-bottom: 0;
    background: var(--vn-surface);
    border: 1px solid var(--vn-rule);
    border-radius: var(--vn-radius);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article:hover {
    border-color: rgba(3, 69, 191, 0.35);
}

/* Same fixed-ratio crop as the Fréttir cards — see the long note on the intro
   image fix earlier in this file. The addon hands over whatever the article
   carries, at whatever size it was uploaded. */
:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-img-wrap {
    display: block;
    position: relative;
    aspect-ratio: var(--vn-ratio);
    overflow: hidden;
    background: var(--vn-accent-weak);
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article:hover .sppb-article-img-wrap img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Date plate for articles with no intro image
   -------------------------------------------------------------------------- */

.vn-plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    background: var(--vn-accent-weak);
    text-align: center;
}

.vn-plate__day {
    font-family: 'Domine', Georgia, serif;
    font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--vn-accent);
}

/* Icelandic writes the day as an ordinal — "17. janúar". Matches the Fréttir plate. */
.vn-plate__day::after {
    content: ".";
}

.vn-plate__rest {
    position: relative;
    padding-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

.vn-plate__rest::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.75rem;
    height: 2px;
    background: var(--vn-accent);
    transform: translateX(-50%);
}

/* Used where the addon has "Show date" off, as on Fræðsluefni: the slot keeps
   the card's shape but stays empty rather than showing a date the editor chose
   to hide. No article on that page needs it today — every published article in
   category 20 has an intro image — so this is here for the first one that
   does not. */
.vn-plate--blank {
    background: var(--vn-accent-weak);
}

/* --------------------------------------------------------------------------
   Card body
   -------------------------------------------------------------------------- */

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-info-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    min-width: 0;
}

/* The addon prints the title first and the date after it. The Fréttir card
   reads date then title, so the meta line is pulled up rather than the markup
   being forked for the sake of one line. */
:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-meta {
    order: -1;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-meta-date {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vn-ink-soft);
}

/* Heading level is an addon setting (h5 on both pages today), so match any of
   them — and by class, since the template sizes headings by element. */
:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-info-wrap :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: 'Oswald', 'Arial Narrow', Inter, sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    /* See the note on .vn-card__title — same reason. */
    overflow-wrap: break-word;
    color: var(--vn-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The title text sits in an <a>, and the builder can set typography on that
   anchor directly from its own #id-scoped CSS. Inheriting pins the face and
   size to the heading rule above whether or not it does. */
:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-info-wrap :is(h1, h2, h3, h4, h5, h6) a {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    transition: color 0.2s ease;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article:hover .sppb-article-info-wrap :is(h1, h2, h3, h4, h5, h6) a {
    color: var(--vn-accent);
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-introtext {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--vn-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Overriding the builder's own colours
   --------------------------------------------------------------------------
   The addon writes per-instance CSS into a <style> block in the head, keyed on
   #sppb-addon-<uuid> — an id selector, which outranks anything class-based
   here no matter the source order. That is the same reason the contact-band
   rules near the top of this file need !important, and it is why these do:

     front page (addon 7ff7fd71…) forces
       h5 a               -> rgb(4, 76, 208)   blue titles
       .sppb-article-introtext -> #252525      full-strength body text
       .sppb-meta-date-unmodified -> #888
       .sppb-readmore     -> display: inline-block
     Fræðsluefni (addon 1629892102009) forces
       .sppb-readmore     -> display: inline-block

   Each of those is settable in the builder (Articles -> Typography / Colours),
   so clearing them there is the tidier long-term fix and would let these four
   rules go. Until then they have to be forced.
   -------------------------------------------------------------------------- */

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-info-wrap :is(h1, h2, h3, h4, h5, h6) a {
    color: var(--vn-ink) !important;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article:hover .sppb-article-info-wrap :is(h1, h2, h3, h4, h5, h6) a {
    color: var(--vn-accent) !important;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-introtext {
    color: var(--vn-ink-soft) !important;
}

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-meta-date {
    color: var(--vn-ink-soft) !important;
}

/* The Fréttir cards carry no read-more link — the title is the way in — so the
   addon's is hidden to match. It is still switchable in the builder under
   Articles -> Read More; turning it off there removes it from the markup
   instead of just from view. */
:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-readmore {
    display: none !important;
}

/* Both the image and the title are links to the article — that is the addon's
   own markup, left as it is. Each gets a visible ring of its own. */
:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article a:focus-visible {
    outline: 3px solid var(--vn-accent);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   "Fleiri greinar.." button below the grid
   -------------------------------------------------------------------------- */

:is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles > .sppb-btn {
    margin-top: 2rem;
}

@media (prefers-reduced-motion: reduce) {

    :is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article,
    :is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-img-wrap img,
    :is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-article-info-wrap :is(h1, h2, h3, h4, h5, h6) a {
        transition: none;
    }

    :is(body.itemid-1101, body.itemid-1653) .sppb-addon-articles .sppb-addon-article:hover .sppb-article-img-wrap img {
        transform: none;
    }
}