/**
 * DKXpress Frontend
 */

/* Anton — free Google-hosted Impact lookalike. Condensed, heavy
   sans-serif. Used by the .Breaking-* and .ALERT-* banner classes so
   the strong-stroke look is identical on every OS (Linux/Android
   don't ship Impact). */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Wider content area than Bootstrap's default (1320px at xxl).
   Applies on large screens; smaller breakpoints keep Bootstrap's
   fluid/responsive container widths. */
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1610px;
    }
}

/* Stroked-text banner classes. Impact is a system font on Windows/Mac;
   the fallback stack keeps the condensed-bold look on other platforms.
   -webkit-text-stroke covers all modern browsers; text-shadow adds a
   secondary fallback for older WebKit/Blink builds that render the
   stroke poorly. */
.Breaking-1,
.Breaking-2,
.ALERT-1 {
    font-family: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
    font-weight: 400;  /* Anton ships one weight; looks heavy by design */
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
}

.Breaking-1 {
    color: #111;
    -webkit-text-stroke: 1px #fff;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}

.Breaking-2 {
    color: #111;
    -webkit-text-stroke: 2px #fff;
    text-shadow:
        -2px -2px 0 #fff,
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff,
         0 3px 6px rgba(0,0,0,.35);
}

.ALERT-1 {
    color: #111;
    -webkit-text-stroke: 2px #ffcc00;
    text-shadow:
        -2px -2px 0 #ffcc00,
         2px -2px 0 #ffcc00,
        -2px  2px 0 #ffcc00,
         2px  2px 0 #ffcc00,
         0 3px 6px rgba(0,0,0,.35);
}

/* Angle helpers — combine with any text/banner class for a "sticker"
   tilt. Requires the element to be inline-block or block for the
   transform to apply. Pair with transform-origin for non-centre pivot. */
.tilt-left-sm  { transform: rotate(-3deg); }
.tilt-left-md  { transform: rotate(-6deg); }
.tilt-left-lg  { transform: rotate(-12deg); }
.tilt-right-sm { transform: rotate( 3deg); }
.tilt-right-md { transform: rotate( 6deg); }
.tilt-right-lg { transform: rotate( 12deg); }

/* Persona tiles — nomads.com-style photo cards with info in the four
   corners. Aspect ratio square-ish; the background photo covers, dark
   gradient at the bottom keeps text legible on light faces. */
.persona-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.persona-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.persona-tile-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center top;
    background-color: #222;
}
.persona-tile-bg-placeholder {
    background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
    display: flex; align-items: center; justify-content: center;
}
.persona-tile-bg-placeholder span {
    font-size: 64px; font-weight: 700; color: rgba(255,255,255,.35);
    letter-spacing: 2px;
}
.persona-tile-grad {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,0)  35%,
        rgba(0,0,0,0)  55%,
        rgba(0,0,0,.85) 100%);
    pointer-events: none;
}
.persona-tile-corner {
    position: absolute;
    z-index: 2;
    display: flex;
    gap: 4px;
    max-width: calc(100% - 16px);
}
.persona-tile-corner.top-start    { top: 8px;    left: 8px; }
.persona-tile-corner.top-end      { top: 8px;    right: 8px; }
.persona-tile-corner.bottom-start { bottom: 8px; left: 10px; right: 10px; flex-direction: column; gap: 2px; }
.persona-tile-corner.bottom-end   { bottom: 8px; right: 8px; }
.persona-tile-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.persona-tile-sub {
    font-size: 11px;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-chip {
    display: inline-flex; align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
    backdrop-filter: blur(2px);
}
.pt-chip-dark    { background: rgba(0,0,0,.65);   color: #fff; }
.pt-chip-light   { background: rgba(255,255,255,.9); color: #111; }
.pt-chip-warning { background: #ffc107;           color: #212529; }

/* Content tiles — shared photo-tile layout for feed_item + social_post
   cards in the narrow frontpage columns. Same four-corner model as the
   persona tiles but taller (portrait aspect) and with room for a
   headline + secondary info at the bottom. */
.content-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: transform .15s ease, box-shadow .15s ease;
}
.content-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
/* Social cards now share the 4/5 aspect-ratio of feed cards so the
   newsfeed and social columns line up at the same height per row. */
.content-tile-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #222;
}
.content-tile-grad {
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.20) 0%,
        rgba(0,0,0,0)   30%,
        rgba(0,0,0,0)   45%,
        rgba(0,0,0,.92) 100%);
}
/* Stronger top gradient — used by social tiles that carry header info
   at the top (avatar + name overlay). */
.content-tile-grad-dual {
    background: linear-gradient(to bottom,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.15) 20%,
        rgba(0,0,0,0)   45%,
        rgba(0,0,0,.92) 100%);
}
.content-tile-corner {
    position: absolute;
    z-index: 2;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.content-tile-corner.top-start    { top: 10px;    left: 10px; max-width: calc(100% - 20px); }
.content-tile-corner.top-end      { top: 10px;    right: 10px; }
.content-tile-corner.top-full     { top: 10px;    left: 10px; right: 10px; }
.content-tile-corner.bottom-full  { bottom: 10px; left: 12px; right: 12px; flex-direction: column; gap: 4px; }
.content-tile-title {
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 1px 4px rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.4);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}
.content-tile-body {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.content-tile-sub {
    font-size: 11px;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.ct-chip {
    display: inline-flex; align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
}
.ct-chip-dark { background: rgba(0,0,0,.65);   color: #fff; }
.ct-chip-info    { background: rgba(13,202,240,.95); color: #000; }
.ct-chip-country { background: rgba(255,255,255,.92); color: #111; letter-spacing: .5px; font-size:10px; font-weight:700; padding: 2px 7px; }

/* Ad placeholder — pads the empty slots that appear in a row when the
   next card is wide (multi-source) and would otherwise leave a gap.
   Same aspect-ratio as the feed-card so the row stays visually flush.
   Will become an actual ad slot later; for now it's a soft gradient. */
.ad-placeholder {
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 1px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.ad-placeholder::after {
    content: 'Annonceplads';
}

/* Multi-source feed_items get the full row width — they're "developing
   stories" with N source entries and warrant the bigger tile. Uses CSS
   :has() so the wrapping .col adapts whether the card was rendered SSR
   or prepended via live-poll (feed.js). The wider tile reverts to a
   16/9 aspect-ratio so it doesn't become a giant portrait. */
.row > .col:has(article.feed-card[data-multi-source]) {
    flex: 0 0 100%;
    max-width: 100%;
}
.feed-card.feed-card-wide {
    aspect-ratio: 16 / 9;
}
/* Headline is shown larger on the wide tile because there's room. Scoped
   to wide cards so narrow-column overrides further down don't shrink it. */
.feed-card.feed-card-wide .content-tile-title {
    font-size: 28px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Frontpage cards live in narrow col-lg-3 sidebars — scale typography
   down so they fit. /alle, /topic and /country pages keep the original
   34px headline because they sit in col-lg-8 / wider grids. */
#feed-column .content-tile-title,
#social-column .content-tile-title {
    font-size: 18px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
#feed-column .content-tile-body,
#social-column .content-tile-body {
    font-size: 10px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
#feed-column .content-tile-sub,
#social-column .content-tile-sub,
#feed-column .ct-chip,
#social-column .ct-chip {
    font-size: 9px;
}
#feed-column .content-tile-corner.bottom-full,
#social-column .content-tile-corner.bottom-full {
    bottom: 6px; left: 8px; right: 8px; gap: 2px;
}
#feed-column .content-tile-corner.top-start,
#feed-column .content-tile-corner.top-end,
#feed-column .content-tile-corner.top-full,
#social-column .content-tile-corner.top-start,
#social-column .content-tile-corner.top-end,
#social-column .content-tile-corner.top-full {
    top: 6px;
}

/* Topic strip under top-nav — horizontal band of colored pill-badges */
.topic-strip { position: sticky; top: 0; z-index: 1020; }
.topic-strip .badge { transition: transform .1s ease; }
.topic-strip .badge:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.topic-strip .topic-badge-active { outline: 2px solid #111; outline-offset: 1px; }
.topic-strip .country-badge {
    background: #fff !important; color: #111 !important;
    border: 1px solid #dee2e6; font-weight: 700; letter-spacing: .5px;
    padding: 5px 10px !important;
}
.topic-strip .country-badge-more {
    background: #f8f9fa !important; color: #495057 !important;
    border-style: dashed !important;
}
.topic-strip .country-badge-more:hover {
    background: #e9ecef !important;
}

/* Slogan strip — inline inside the navbar between logo and menu items.
   Colour palette set per-type by JS toggling a modifier class. */
.slogan-strip {
    font-family: "Manrope", system-ui, sans-serif;
    transition: background-color .3s ease, color .3s ease;
    min-height: 44px;
    padding: 4px 14px;
    border-radius: 8px;
    overflow: hidden;
}
.slogan-strip.slogan-promotion { background: #ffffff;  color: #111;     border: 1px solid #e9ecef; }
.slogan-strip.slogan-breaking  { background: #ffc107;  color: #111;     border: 1px solid #e0a800; }
.slogan-strip.slogan-question  { background: #4fc3f7;  color: #ffffff;  border: 1px solid #29b6f6; }

.slogan-type-label {
    font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; white-space: nowrap;
    background: rgba(0,0,0,.08);
    color: inherit;
    flex-shrink: 0;
}
.slogan-strip.slogan-breaking  .slogan-type-label { background: #111; color: #ffc107; }
.slogan-strip.slogan-question  .slogan-type-label { background: rgba(255,255,255,.25); color: #fff; }

.slogan-headline {
    font-weight: 700; font-size: 15px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slogan-headline::after {
    content: "▍"; display: inline-block; margin-left: 2px;
    animation: slogan-caret-blink 1s steps(2) infinite;
    opacity: .65;
}
.slogan-strip.slogan-typed .slogan-headline::after { content: ""; }
.slogan-content {
    line-height: 1.1; opacity: .85; font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes slogan-caret-blink { 0%, 50% { opacity: .85; } 50.01%, 100% { opacity: 0; } }

.slogan-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.slogan-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .35; transition: opacity .2s;
}
.slogan-dot.active { opacity: 1; }
.topic-strip .vr { min-height: 20px; }

/* Slim feed card — low-relevance headlines in the /alle right column.
   Just a coloured topic-dot + headline + metadata, no image. */
.feed-card-slim { display: block; transition: background-color .1s ease; }
.feed-card-slim:hover { background-color: #f8f9fa; }
.feed-card-slim:last-child > div { border-bottom: 0 !important; }
.feed-card-slim-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}