/* GSR Article Cards v1.0.18 — styling for Fairy news cards. */
/* Flat white cards with a quiet divider. */
#page .fairy-content-area.fairy-masonry > article .card-blog-post {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    /* Card-body padding owns spacing; keep the media edge-to-edge. */
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #d9dee3 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Consistent landscape images; crop centrally without distortion. */
#page .fairy-content-area.fairy-masonry > article .card_media {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
#page .fairy-content-area.fairy-masonry > article .card_media > a {
    display: block !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
}
#page .fairy-content-area.fairy-masonry > article .card_media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center;
    margin: 0 !important;
}

/* Compact body, with no category badge used as a tagline. */
#page .fairy-content-area.fairy-masonry > article .card_body {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Readable inset while leaving the featured image full width. */
    padding: 12px 16px 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
#page .fairy-content-area.fairy-masonry > article .category-label-group {
    display: none !important;
}
.gsr-card-image-tagline {
    display: none !important;
}
#page .fairy-content-area.fairy-masonry > article .card_media > a {
    position: relative;
}
#page .fairy-content-area.fairy-masonry > article .card_media .gsr-card-image-tagline {
    display: block !important;
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    padding: 6px 9px;
    background: rgba(21, 35, 44, 0.92);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    border-radius: 3px;
    pointer-events: none;
}

/* Editorial typography, consistent with GSR's established brand. */
#page .fairy-content-area.fairy-masonry > article .card_title,
#page .fairy-content-area.fairy-masonry > article .card_title a {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
    text-transform: none !important;
    color: #15232c !important;
    text-decoration: none !important;
}
#page .fairy-content-area.fairy-masonry > article .card_title {
    margin: 0 0 8px !important;
}
#page .fairy-content-area.fairy-masonry > article .card_title a:hover,
#page .fairy-content-area.fairy-masonry > article .card_title a:focus-visible {
    color: #a71919 !important;
}

/* Retain real publication dates and bylines, in a smaller metadata row. */
#page .fairy-content-area.fairy-masonry > article .card_body .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0 !important;
    line-height: 1.5 !important;
}
#page .fairy-content-area.fairy-masonry > article .entry-meta,
#page .fairy-content-area.fairy-masonry > article .entry-meta a,
#page .fairy-content-area.fairy-masonry > article .entry-meta span,
#page .fairy-content-area.fairy-masonry > article .entry-meta time {
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64717a !important;
}
#page .fairy-content-area.fairy-masonry > article .entry-meta i {
    font-size: 12px !important;
    color: #64717a !important;
}

/* Images and headlines remain the article links. */
#page .fairy-content-area.fairy-masonry > article .card_body .entry-content,
#page .fairy-content-area.fairy-masonry > article .card_body > div > a.btn {
    display: none !important;
}

@media screen and (max-width: 767px) {
    #page .fairy-content-area.fairy-masonry > article {
        padding: 0 16px 18px !important;
    }
}

#page .fairy-content-area.fairy-masonry > article .entry-meta * {
    font-size: 12px !important;
    color: #64717a !important;
}
#page .fairy-content-area.fairy-masonry > article .card_body .entry-summary,
#page .fairy-content-area.fairy-masonry > article .card_body .read-more,
#page .fairy-content-area.fairy-masonry > article .card_body a.btn {
    display: none !important;
}
#page .fairy-content-area.fairy-masonry > article .card_media > a:focus-visible,
#page .fairy-content-area.fairy-masonry > article .card_title a:focus-visible {
    outline: 2px solid #a71919;
    outline-offset: 3px;
}

/* Reveal the original publication timestamp after JS formats it.
   Keep modified dates from appearing as a second date on the card. */
#page .fairy-content-area.fairy-masonry > article
.posted-on.gsr-relative-time-active time.published {
    display: inline !important;
}
#page .fairy-content-area.fairy-masonry > article
.posted-on.gsr-relative-time-active time.updated:not(.published) {
    display: none !important;
}

/* Keep publication age and estimated reading time together where space allows. */
#page .fairy-content-area.fairy-masonry > article .entry-meta .posted-on,
#page .fairy-content-area.fairy-masonry > article .entry-meta .gsr-card-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    margin: 0 !important;
}
#page .fairy-content-area.fairy-masonry > article .entry-meta .gsr-card-reading-time {
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64717a !important;
    line-height: 1.5;
}
#page .fairy-content-area.fairy-masonry > article .gsr-card-reading-time svg {
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Optional editorial highlights, separate from the hidden article excerpt. */
#page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights {
    display: block !important;
    list-style: disc outside !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #e7ebef !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #15232c !important;
}
#page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights > li {
    display: list-item !important;
    list-style: disc outside !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow-wrap: anywhere;
}
#page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights > li:last-child {
    margin-bottom: 0 !important;
}
#page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights > li::marker {
    color: #a71919;
}


/* ==============================================================
   v1.0.7 — COMPACT EQUAL-HEIGHT NEWS GRID
   Preserve the Fairy masonry class for existing plugin targeting,
   but override its JS-assigned positioning and container height.
   Articles appear in publication order, left-to-right by rows.
   ============================================================== */
#page .fairy-content-area.fairy-masonry {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
    /* Fairy/Bootstrap row gutters can shift the whole grid ~15px left.
       Reset only horizontal container margins, not card padding or gaps. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
}

#page .fairy-content-area.fairy-masonry > article {
    position: static !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* The divider sits at the same baseline on both cards in a row. */
#page .fairy-content-area.fairy-masonry > article .card-blog-post {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}
#page .fairy-content-area.fairy-masonry > article .card_body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Let headlines take their natural height. A three-line maximum protects
   the grid without adding two lines of blank space after short titles. */
#page .fairy-content-area.fairy-masonry > article .card_title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: 3.6em !important;
}

/* Two bullets. Use a real pseudo-bullet so the two-line text clamp
   does not suppress the normal list marker. */
#page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights {
    /* Divider and padding separate summary from metadata without
       pushing highlights to the stretched card bottom. */
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    list-style: none !important;
}
#page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights > li {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    position: relative !important;
    max-height: 3em !important;
    overflow: hidden !important;
    padding: 0 0 0 14px !important;
    list-style: none !important;
}
#page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights > li::before {
    content: "•";
    position: absolute;
    top: 0;
    left: 0;
    color: #a71919;
}

/* Keep narrow screens as a natural-height, one-column feed. */
@media screen and (max-width: 1023px) {
    #page .fairy-content-area.fairy-masonry {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }
    #page .fairy-content-area.fairy-masonry > article .card-blog-post {
        height: auto !important;
    }
    #page .fairy-content-area.fairy-masonry > article .card_title {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #page .fairy-content-area.fairy-masonry > article .card_body ul.gsr-card-highlights > li {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        max-height: none !important;
        overflow: visible !important;
    }
}
@media screen and (max-width: 767px) {
    /* Preserve the card side spacing from v1.0.3 on phones. */
    #page .fairy-content-area.fairy-masonry > article {
        padding: 0 16px 18px !important;
    }
    #page .fairy-content-area.fairy-masonry > article .card_body {
        padding: 12px 14px 16px !important;
    }
}


/* v1.0.6 — Hide only the author byline on Fairy listing cards.
   The date (.posted-on), reading time (.gsr-card-reading-time), and
   surrounding .entry-meta are deliberately left untouched.
   This does not target full article pages or the featured slider. */
#page .fairy-content-area.fairy-masonry > article .entry-meta .byline {
    display: none !important;
}


/* ==============================================================
   v1.0.8 — RESTRAINED CARD FINISH & INTERACTION
   Scoped exclusively to Fairy news listing cards. Existing grid,
   headings, metadata, highlights, and phone spacing are unchanged.
   ============================================================== */

/* Give each white card an understated edge, even on light backgrounds.
   Clip image corners without allowing the image to overrun the card. */
#page .fairy-content-area.fairy-masonry > article .card-blog-post {
    border: 1px solid #e1e5e8 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    transform: none;
    transition: box-shadow 220ms ease, transform 220ms ease;
}

/* The full card provides the rounding; don't round image corners twice. */
#page .fairy-content-area.fairy-masonry > article .card_media > a {
    border-radius: 0 !important;
}

/* Image movement is contained inside the existing 16:9 viewport.
   The tagline is a sibling of the img and remains stationary. */
#page .fairy-content-area.fairy-masonry > article .card_media img {
    transition: transform 260ms ease-out;
    transform: none;
}

/* Slightly separate the two pieces of metadata; unify icon dimensions. */
#page .fairy-content-area.fairy-masonry > article .card_body .entry-meta {
    column-gap: 14px;
}
#page .fairy-content-area.fairy-masonry > article .entry-meta i {
    font-size: 12px !important;
    line-height: 1 !important;
}
#page .fairy-content-area.fairy-masonry > article .gsr-card-reading-time svg {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
}
#page .fairy-content-area.fairy-masonry > article .entry-meta .posted-on,
#page .fairy-content-area.fairy-masonry > article .entry-meta .gsr-card-reading-time {
    gap: 5px;
}

/* Hover movement only applies to devices with a real mouse/trackpad. */
@media (hover: hover) and (pointer: fine) {
    #page .fairy-content-area.fairy-masonry > article .card-blog-post:hover {
        box-shadow: 0 7px 18px rgba(0, 0, 0, 0.10) !important;
        transform: translateY(-2px);
    }
    #page .fairy-content-area.fairy-masonry > article .card-blog-post:hover .card_media img {
        transform: scale(1.025);
    }
}

/* Keyboard users get a clear interactive state without relying on hover. */
#page .fairy-content-area.fairy-masonry > article .card-blog-post:focus-within {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
}
#page .fairy-content-area.fairy-masonry > article .card_media > a:focus-visible {
    outline: 3px solid #a71919 !important;
    outline-offset: -3px !important;
}
#page .fairy-content-area.fairy-masonry > article .card_title a:focus-visible {
    outline: 2px solid #a71919 !important;
    outline-offset: 3px !important;
}

/* Keep everything stable for people who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    #page .fairy-content-area.fairy-masonry > article .card-blog-post,
    #page .fairy-content-area.fairy-masonry > article .card_media img {
        transition: none !important;
        animation: none !important;
    }
    #page .fairy-content-area.fairy-masonry > article .card-blog-post:hover,
    #page .fairy-content-area.fairy-masonry > article .card_media img:hover,
    #page .fairy-content-area.fairy-masonry > article .card-blog-post:hover .card_media img {
        transform: none !important;
    }
}


/* ==============================================================
   v1.0.9 — CATEGORY BADGES ON THE UPPER-LEFT OF ARTICLE IMAGES
   Only the Fairy masonry listing cards show these elements.
   Saved navy image taglines and all existing layouts are unchanged.
   ============================================================== */
/* Hidden everywhere else: article pages, featured slider, widgets, etc. */
.gsr-card-category-flags {
    display: none !important;
}

/* Overlay inside the card's existing 16:9 image anchor. */
#page .fairy-content-area.fairy-masonry > article .card_media .gsr-card-category-flags {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute !important;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: max-content;
    max-width: calc(100% - 16px);
    pointer-events: none;
}

#page .fairy-content-area.fairy-masonry > article .card_media .gsr-card-category-flag {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 9px;
    border-radius: 3px;
    background: #a71919;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    text-align: left;
}


/* An expired breaking badge must remain hidden even if other theme CSS
   applies explicit display declarations to its category overlays. */
#page .fairy-content-area.fairy-masonry > article .card_media .gsr-card-category-flag[hidden] {
    display: none !important;
}

/* ==============================================================
   v1.0.10 — WEEKLY RUNDOWN CARD VARIANT
   Leave all ordinary news cards (including Breaking News) unchanged.
   ============================================================== */
/* Image labels are invisible outside Fairy listing cards. */
.gsr-card-weekly-range {
    display: none !important;
}

/* Match the current navy tagline placement and style, but show covered dates. */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly
.card_media .gsr-card-weekly-range {
    display: block !important;
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    max-width: calc(100% - 16px);
    padding: 6px 9px;
    box-sizing: border-box;
    background: rgba(21, 35, 44, 0.92);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    border-radius: 3px;
    pointer-events: none;
}

/* Defensive: prevent a saved ordinary tagline appearing on weekly cards. */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly
.card_media .gsr-card-image-tagline,
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly
.card_body ul.gsr-card-highlights {
    display: none !important;
}

/* A short editorial introduction replaces the two highlight bullets. */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly
.card_body p.gsr-card-weekly-intro {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #e7ebef;
    color: #26313a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}

/* No truncated introduction on naturally stacked small-screen cards. */
@media screen and (max-width: 1023px) {
    #page .fairy-content-area.fairy-masonry > article.gsr-card-weekly
    .card_body p.gsr-card-weekly-intro {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
    }
}

/* ==============================================================
   v1.0.12 — SINGLE-LINE WEEKLY RUNDOWN STORY COUNT
   One clickable, headline-style "14 Stories" replaces the visible
   Weekly Rundown title; the actual title remains screen-reader readable.
   Regular news cards and grids are untouched.
   ============================================================== */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card_title {
    display: block !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    margin: 0 0 9px !important;
}
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card_title > a {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    text-decoration: none !important;
}
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .gsr-card-title-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .gsr-card-weekly-stats {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px;
    color: #15232c;
}
/* Newspaper icon from the previous statistics design, sized to the headline. */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .gsr-card-weekly-stories-icon {
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: #a71919;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .gsr-card-weekly-stories-label {
    display: inline;
}
@media (hover: hover) and (pointer: fine) {
    #page .fairy-content-area.fairy-masonry > article.gsr-card-weekly
    .card_title a:hover .gsr-card-weekly-stats {
        color: #a71919 !important;
    }
}


/* ==============================================================
   v1.0.14 — WEEKLY RUNDOWN FULL-CARD LINK
   Stretch the existing headline anchor across the card without
   wrapping nested anchors or introducing JavaScript navigation.
   Scope to Weekly Rundown listing cards only. Existing keyboard
   focus and actual post-title link remain accessible.
   ============================================================== */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card-blog-post {
    position: relative !important;
    cursor: pointer;
}

/* The existing heading is the link; its invisible hit area fills the
   entire card. Its positioned ancestor must be the card container. */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card_body,
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card_title,
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card_title > a {
    position: static !important;
}
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card_title > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
}

/* Clear focus indication across the whole linked card. */
#page .fairy-content-area.fairy-masonry > article.gsr-card-weekly .card-blog-post:has(.card_title > a:focus-visible) {
    outline: 3px solid #a71919 !important;
    outline-offset: 3px !important;
}