/*!
 * IDDS Skin Variants — parametric per-domain identity engine.
 *
 * Each domain gets a UNIQUE identity from a combination of body classes emitted
 * from its settings (see frontend/magz/index.blade.php):
 *   • palette      -> brand_primary_hex / brand_accent_hex (via _brand-vars)
 *   • background    -> body.bg-{grid|dots|diag|rings|soft|mesh|topo|plain}
 *   • header        -> body.hd-{bar|solid|glass|underline|split}
 *   • card shape    -> body.cs-{round|sharp|soft|pill|outline}
 *   • section head  -> body.sh-{underline|side|block|dot}
 *   • layout        -> body.ly-{classic|center|boxed|wide|editorial}
 *
 * Selectors are bound to the REAL magz markup (article.article .inner,
 * .line.top > div, nav.menu, .sidebar .block, article.featured, .headline) and
 * use enough specificity (+!important where legacy style.css fights back) so a
 * preset visibly changes colour AND layout/shape/background.
 */

body.skin-magz {
    --skin-pat:  color-mix(in srgb, var(--idds-primary) 14%, transparent);
    --skin-pat2: color-mix(in srgb, var(--idds-primary) 9%, transparent);
}

/* ==========================================================================
   CANVAS TONE — per-domain coloured base (so no dinas is plain white)
   The page background follows the brand hue; the tone class controls how
   strongly. Guarded to light theme so dark mode keeps its own dark canvas.
   ========================================================================== */
/* Soft professional canvas — brand-tinted, never loud mint/neon */
html[data-bs-theme="light"] body.skin-magz            { --idds-bg: hsl(var(--idds-primary-h) 30% 96.8%); }
html[data-bs-theme="light"] body.skin-magz.tn-soft    { --idds-bg: hsl(var(--idds-primary-h) 24% 97.6%); }
html[data-bs-theme="light"] body.skin-magz.tn-tint    { --idds-bg: hsl(var(--idds-primary-h) 36% 95.4%); }
html[data-bs-theme="light"] body.skin-magz.tn-bold    { --idds-bg: hsl(var(--idds-primary-h) 42% 92.8%); }
body.skin-magz { background-color: var(--idds-bg) !important; }
/* Keep the content column readable on a coloured canvas. */
html[data-bs-theme="light"] body.skin-magz.tn-bold .article:not(.main-article) .inner,
html[data-bs-theme="light"] body.skin-magz.tn-bold .sidebar .block,
html[data-bs-theme="light"] body.skin-magz.tn-bold .sidebar .widget { background: var(--idds-surface); }

/* ==========================================================================
   BACKGROUND PATTERNS
   ========================================================================== */
body.bg-grid {
    background-color: var(--idds-bg);
    background-image:
        linear-gradient(var(--skin-pat) 1px, transparent 1px),
        linear-gradient(90deg, var(--skin-pat) 1px, transparent 1px);
    background-size: 44px 44px; background-attachment: fixed;
}
body.bg-dots {
    background-color: var(--idds-bg);
    background-image: radial-gradient(var(--skin-pat) 2px, transparent 2.1px);
    background-size: 22px 22px; background-attachment: fixed;
}
body.bg-diag {
    background-color: var(--idds-bg);
    background-image: repeating-linear-gradient(45deg, var(--skin-pat) 0 2px, transparent 2px 15px);
    background-attachment: fixed;
}
body.bg-rings {
    background-color: var(--idds-bg);
    background-image: radial-gradient(1100px 480px at 100% -6%, var(--skin-pat), transparent 60%);
    background-repeat: no-repeat; background-attachment: fixed;
}
body.bg-soft {
    background-color: var(--idds-bg);
    background-image:
        radial-gradient(900px 420px at 4% -10%, var(--skin-pat), transparent 55%),
        radial-gradient(760px 380px at 100% 2%, var(--skin-pat2), transparent 55%);
    background-repeat: no-repeat; background-attachment: fixed;
}
body.bg-mesh {
    background-color: var(--idds-bg);
    background-image:
        radial-gradient(520px 320px at 14% 8%,  var(--skin-pat),  transparent 60%),
        radial-gradient(520px 320px at 86% 16%, var(--skin-pat2), transparent 60%),
        radial-gradient(640px 420px at 50% 108%, var(--skin-pat), transparent 60%);
    background-repeat: no-repeat; background-attachment: fixed;
}
body.bg-topo {
    background-color: var(--idds-bg);
    background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 19px, var(--skin-pat) 19px 20px);
    background-attachment: fixed;
}
body.bg-blob {
    background-color: var(--idds-bg);
    background-image:
        radial-gradient(620px 520px at 100% 0, var(--skin-pat), transparent 55%),
        radial-gradient(540px 480px at 0 100%, var(--skin-pat2), transparent 55%);
    background-repeat: no-repeat; background-attachment: fixed;
}
body.bg-corner {
    background-color: var(--idds-bg);
    background-image: conic-gradient(from 210deg at 100% 0, var(--skin-pat), transparent 26%);
    background-repeat: no-repeat; background-attachment: fixed;
}
/* bg-plain: no background image (still shows the tinted canvas) */

/* ==========================================================================
   HEADER TREATMENTS
   ========================================================================== */
/* Every header treatment is now COLOURED + white text (professional gov
   portal look). idds-pro.css sets the coloured baseline; these add distinct
   flavours. White link colour is enforced for all coloured navs below. */
body.hd-bar nav.menu,
body.hd-solid nav.menu,
body.hd-glass nav.menu,
body.hd-underline nav.menu,
body.hd-split nav.menu {
    border: 0 !important;
}
body.hd-bar nav.menu .nav-list > li > a,
body.hd-bar nav.menu ul.float-end > li > a,
body.hd-bar nav.menu .nav-list > li > a i,
body.hd-solid nav.menu .nav-list > li > a,
body.hd-solid nav.menu ul.float-end > li > a,
body.hd-solid nav.menu .nav-list > li > a i,
body.hd-glass nav.menu .nav-list > li > a,
body.hd-glass nav.menu ul.float-end > li > a,
body.hd-glass nav.menu .nav-list > li > a i,
body.hd-underline nav.menu .nav-list > li > a,
body.hd-underline nav.menu ul.float-end > li > a,
body.hd-underline nav.menu .nav-list > li > a i,
body.hd-split nav.menu .nav-list > li > a,
body.hd-split nav.menu ul.float-end > li > a,
body.hd-split nav.menu .nav-list > li > a i { color: #fff !important; }

/* bar: accent underline on the nav (NOT header::after — Magz uses
   header.primary { display:contents }, which orphans absolute ::after and
   paints a full-width brand line mid-page through the leaders block). */
body.hd-bar header.primary::after { content: none !important; display: none !important; }
body.hd-bar nav.menu {
    box-shadow: inset 0 -4px 0 var(--idds-primary) !important;
}

/* solid: flat single-colour bar */
body.hd-solid nav.menu {
    background: var(--idds-primary) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--idds-primary) 30%, transparent) !important;
}

/* glass: translucent brand glass — distinct from solid/gradient baselines */
body.hd-glass nav.menu {
    background: color-mix(in srgb, var(--idds-primary) 78%, transparent) !important;
    backdrop-filter: saturate(1.8) blur(18px) !important;
    -webkit-backdrop-filter: saturate(1.8) blur(18px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 10px 28px color-mix(in srgb, var(--idds-primary) 28%, transparent) !important;
    border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

/* underline: gradient bar with a thick contrasting accent bottom edge */
body.hd-underline nav.menu { box-shadow: inset 0 -4px 0 var(--idds-accent) !important; }

/* split: strongly branded firstbar + a darker solid nav below it */
body.hd-split .firstbar {
    background: linear-gradient(120deg, var(--idds-primary), color-mix(in srgb, var(--idds-primary) 60%, var(--idds-accent))) !important;
    border: 0 !important;
}
body.hd-split .firstbar .form-control,
body.hd-split .firstbar .gov-ident__date { color: #fff !important; }
body.hd-split .firstbar .gov-ident__date { opacity: .85; }
body.hd-split nav.menu { background: color-mix(in srgb, var(--idds-primary) 82%, #000 18%) !important; }

/* ==========================================================================
   CARD SHAPES  (bound to real .inner / sidebar / featured / headline)
   ========================================================================== */
body.cs-sharp .article:not(.main-article) .inner,
body.cs-sharp .sidebar .block,
body.cs-sharp .sidebar .widget,
body.cs-sharp article.featured,
body.cs-sharp .headline {
    border-radius: 0 !important; border: 1px solid var(--idds-border-strong) !important; box-shadow: none !important;
}
body.cs-pill .article:not(.main-article) .inner,
body.cs-pill .sidebar .block,
body.cs-pill .sidebar .widget,
body.cs-pill article.featured,
body.cs-pill .headline { border-radius: 22px !important; overflow: hidden; }
body.cs-soft .article:not(.main-article) .inner,
body.cs-soft .sidebar .block,
body.cs-soft .sidebar .widget,
body.cs-soft article.featured,
body.cs-soft .headline {
    border-radius: 20px !important; border-color: transparent !important; box-shadow: 0 14px 34px rgba(16,24,40,.12) !important;
}
body.cs-outline .article:not(.main-article) .inner,
body.cs-outline .sidebar .block,
body.cs-outline .sidebar .widget,
body.cs-outline article.featured,
body.cs-outline .headline {
    border-radius: 12px !important; border: 1.5px solid var(--idds-border-strong) !important; box-shadow: none !important;
}
body.cs-round .article:not(.main-article) .inner,
body.cs-round .sidebar .block,
body.cs-round article.featured,
body.cs-round .headline { border-radius: 16px !important; }

/* ==========================================================================
   SECTION HEADINGS  (.line.top > div)
   ========================================================================== */
body.sh-side .line.top > div { padding-left: 14px; }
body.sh-side .line.top > div::after { left: 0; top: 0; bottom: 0; width: 5px; height: auto; }

body.sh-block .line.top > div {
    background: transparent;
    color: var(--idds-primary-800, var(--idds-primary-700, var(--idds-primary)));
    padding: .15rem 0 .55rem;
    border-radius: 0;
    display: inline-block;
    border-bottom: 2px solid color-mix(in srgb, var(--idds-primary) 35%, transparent);
}
body.sh-block .line.top > div::after { display: none; }

body.sh-dot .line.top > div { padding-left: 20px; }
body.sh-dot .line.top > div::after {
    left: 0; bottom: auto; top: 50%; transform: translateY(-50%);
    width: 11px; height: 11px; border-radius: 50%;
}

/* ==========================================================================
   LAYOUT / PLACEMENT  (structure comes from home.blade; CSS refines it)
   ========================================================================== */
/* ly-center: symmetric, centred masthead + navigation + section titles.      */
@media (min-width: 992px) {
    body.ly-center .firstbar .row { justify-content: center; text-align: center; }
    body.ly-center #menu-list { justify-content: center !important; position: relative; }
    body.ly-center #menu-list .nav-list { justify-content: center; }
    body.ly-center #menu-list ul.float-end { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
body.ly-center .line.top { text-align: center; }
body.ly-center .line.top > div { display: inline-block; }
body.ly-center .line.top > div::after { left: 50%; transform: translateX(-50%); }
body.ly-center.sh-side .line.top > div::after,
body.ly-center.sh-dot  .line.top > div::after { left: 0; transform: none; }

/* ly-center: centered portal strip + denser card rhythm */
body.ly-center .portal-strip .line.top { text-align: center; }
body.ly-center .portal-services { max-width: 920px; margin-inline: auto; }
body.ly-center .leaders-band { margin-inline: auto; }
body.ly-center .portal-stats { max-width: 920px; margin-inline: auto; }

/* Editorial kicker (home-editorial) */
.edi-kicker {
    margin: 1.35rem 0 1rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--idds-primary) 18%, var(--idds-border, #e5e9f0));
}
.edi-kicker__label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--idds-accent, var(--idds-primary));
}
.edi-kicker__title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: .35rem 0 0;
    line-height: 1.15;
}
body.ly-editorial .edi-kicker__title {
    background: var(--pro-grad, linear-gradient(135deg, var(--idds-primary), var(--idds-accent)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ly-boxed: narrower framed reading shell */
@media (min-width: 992px) {
    body.ly-boxed nav.menu .container,
    body.ly-boxed .firstbar .container-md,
    body.ly-boxed .container-md { max-width: 1080px; }
}
body.ly-boxed .home-boxed-shell {
    background: var(--idds-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--idds-primary) 12%, var(--idds-border, #e5e9f0));
    border-radius: 18px;
    padding: 1.25rem 1.35rem 1.5rem;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .05);
}
body.ly-boxed .portal-services__item { border-radius: 10px; }

/* ly-wide: expansive edge-to-edge */
@media (min-width: 1200px) {
    body.ly-wide nav.menu .container,
    body.ly-wide .firstbar .container-md,
    body.ly-wide .container-md,
    body.ly-wide .container-md--wide { max-width: 1360px; }
}
body.ly-wide section.home.top > .carousel,
body.ly-wide section.home.top > #carouselExampleIndicators { margin-inline: 0; }
body.ly-wide article.featured { min-height: 420px; }
body.ly-wide .portal-services { grid-template-columns: repeat(6, 1fr); gap: .65rem; }

/* ly-editorial: roomy magazine reading */
body.ly-editorial .line.top > div { font-size: 1.55rem; letter-spacing: -.02em; }
body.ly-editorial article.featured .details h1 { font-size: 1.9rem; }
body.ly-editorial .article:not(.main-article) .inner .padding h2 { font-size: 1.2rem; }
body.ly-editorial .container-content { padding-block: 1.75rem; }
body.ly-editorial .article:not(.main-article) .inner { border-radius: 4px; }
body.ly-editorial .portal-services { grid-template-columns: repeat(3, 1fr); }

/* ly-stack: full-width single column */
@media (min-width: 992px) { body.ly-stack .container-md { max-width: 1240px; } }
body.ly-stack .portal-stats { grid-template-columns: repeat(3, 1fr); }
body.ly-stack .leaders-band { max-width: 1000px; }

/* ly-portal: tinted civic content band */
@media (min-width: 992px) { body.ly-portal .container-md { max-width: 1120px; } }
body.ly-portal .container-content {
    background: color-mix(in srgb, var(--idds-primary) 5%, var(--idds-primary-50, #f1f5f9));
    padding-block: var(--idds-space-6);
    border-radius: var(--idds-radius-lg);
    margin-top: var(--idds-space-5);
    border: 1px solid color-mix(in srgb, var(--idds-primary) 10%, transparent);
}
body.ly-portal .portal-services__item { border-top-width: 4px; }

/* ly-magazine: bold cover story */
body.ly-magazine .line.top > div { font-size: 1.6rem; letter-spacing: -.02em; }
body.ly-magazine article.featured { min-height: 440px; }
body.ly-magazine article.featured .details h1 { font-size: 2.1rem; }
body.ly-magazine .portal-strip { margin-bottom: 1.25rem; }

/* ly-grid: dense tile rhythm */
body.ly-grid .portal-services { gap: .55rem; }
body.ly-grid .article:not(.main-article) .inner { border-radius: 10px; }
body.ly-grid .leaders-band { border-radius: 12px; }

/* ly-showcase: full-bleed intro emphasis */
body.ly-showcase .showcase-intro { margin-bottom: 0; padding-bottom: 2rem; }
body.ly-showcase .portal-strip { margin-top: 1.25rem; }

/* ly-classic: baseline (no overrides). */

/* ==========================================================================
   HEADER / MASTHEAD LAYOUTS  (restructures the top of every page)
   ========================================================================== */
/* hl-center: intentional centred composition (brand lockup stays horizontal). */
@media (min-width: 992px) {
    body.hl-center .firstbar .row { flex-direction: row; align-items: center; text-align: left; gap: .6rem; }
    body.hl-center .firstbar .brand { justify-content: center; }
    body.hl-center .firstbar .search { width: 100%; max-width: 560px; margin-inline: auto; }
    body.hl-center .firstbar .gov-ident { align-items: flex-end; }
    body.hl-center #menu-list { justify-content: center !important; position: relative; }
    body.hl-center #menu-list .nav-list { justify-content: center; }
    body.hl-center #menu-list ul.float-end { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}

/* hl-stacked: taller masthead; brand lockup remains side-by-side. */
@media (min-width: 992px) {
    body.hl-stacked .firstbar { padding-block: var(--idds-space-5); }
    body.hl-stacked .firstbar .row { flex-direction: row; align-items: center; text-align: left; gap: .55rem; }
    body.hl-stacked .firstbar .brand img { height: 48px; }
    body.hl-stacked .firstbar .search { width: 100%; max-width: 620px; }
}

/* hl-inline: slim single-bar header — logo lives inside the nav, no firstbar. */
body.hl-inline .firstbar { display: none !important; }
@media (min-width: 992px) {
    body.hl-inline nav.menu .brand { display: flex !important; align-items: center; margin-right: var(--idds-space-5); }
    body.hl-inline nav.menu .brand img { height: 40px; width: auto; }
}

/* hl-classic: baseline masthead (no overrides). */

/* ==========================================================================
   LAYOUT-VARIANT BUILDING BLOCKS (used by dedicated home-*.blade views)
   ========================================================================== */
/* Category nav — chip row --------------------------------------------------- */
.cat-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.cat-nav--chip .cat-nav__item {
    display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem;
    border: 1px solid var(--idds-border); border-radius: 999px; background: var(--idds-surface);
    color: var(--idds-text); font-size: .85rem; font-weight: 600; text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cat-nav--chip .cat-nav__item:hover { background: var(--idds-primary); color: #fff; border-color: var(--idds-primary); }
.cat-nav--chip .cat-nav__icon { opacity: .55; font-size: .72rem; }

/* Category nav — service tiles (portal) ------------------------------------- */
.cat-nav--tile { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.cat-nav--tile .cat-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    padding: 1.2rem .8rem; border-radius: var(--idds-radius-lg); background: var(--idds-surface);
    border: 1px solid var(--idds-border); color: var(--idds-text); text-decoration: none;
    text-align: center; font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-nav--tile .cat-nav__item:hover { transform: translateY(-3px); box-shadow: var(--idds-shadow-md); border-color: var(--idds-primary); }
.cat-nav--tile .cat-nav__icon {
    font-size: 1.4rem; color: var(--idds-primary); background: var(--idds-primary-50);
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
}

/* Stack CTA band ------------------------------------------------------------ */
.stack-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin: 2rem 0; padding: 1.5rem 1.75rem; border-radius: var(--idds-radius-xl); color: #fff;
    background: linear-gradient(120deg, var(--idds-primary), color-mix(in srgb, var(--idds-primary) 55%, var(--idds-accent)));
}
.stack-cta__text { display: flex; flex-direction: column; }
.stack-cta__text strong { font-size: 1.15rem; }
.stack-cta__text span { opacity: .9; font-size: .9rem; }
.stack-cta__btn { background: #fff; color: var(--idds-primary); padding: .6rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.stack-cta__btn:hover { background: rgba(255,255,255,.9); color: var(--idds-primary-700); }

/* Magazine ribbon ----------------------------------------------------------- */
.mag-ribbon { margin: 1.5rem 0 1rem; padding-bottom: .75rem; border-bottom: 3px solid var(--idds-primary); }
.mag-ribbon__kicker { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--idds-primary); }
.mag-ribbon__title { font-size: 2rem; margin: .25rem 0 0; line-height: 1.1; }

/* Grid info tiles ----------------------------------------------------------- */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.grid-stats__item { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; border-radius: var(--idds-radius-lg); background: var(--idds-surface); border: 1px solid var(--idds-border); font-weight: 600; }
.grid-stats__item i { color: var(--idds-primary); font-size: 1.2rem; }

/* Showcase welcome intro ---------------------------------------------------- */
.showcase-intro { background: linear-gradient(160deg, var(--idds-primary-50), transparent); padding: 2.5rem 0; text-align: center; margin-bottom: 1rem; }
.showcase-intro__badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--idds-primary); color: #fff; padding: .3rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.showcase-intro__title { font-size: 2.2rem; margin: 1rem 0 .5rem; }
.showcase-intro__desc { color: var(--idds-text-muted); max-width: 640px; margin: 0 auto 1rem; }
.showcase-intro .cat-nav { justify-content: center; }

/* ==========================================================================
   NEW LAYOUT VARIANTS — CIVIC / AGENCY / MOSAIC
   ========================================================================== */

/* ---- CIVIC: gradient hero band with facts panel --------------------------- */
.civic-hero {
    background:
        radial-gradient(700px 320px at 88% -20%, color-mix(in srgb, var(--idds-accent) 30%, transparent), transparent 65%),
        linear-gradient(135deg, var(--idds-primary), color-mix(in srgb, var(--idds-primary) 55%, var(--idds-accent)));
    color: #fff;
    padding: 2.6rem 0 2.3rem;
    position: relative;
    overflow: hidden;
}
.civic-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(75% 90% at 30% 20%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(75% 90% at 30% 20%, #000 20%, transparent 100%);
}
.civic-hero__inner { display: flex; gap: 2rem; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.civic-hero__badge {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .95rem; border-radius: 999px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.civic-hero__title { color: #fff; font-size: 2.15rem; font-weight: 800; letter-spacing: -.02em; margin: .75rem 0 .4rem; }
.civic-hero__desc { color: rgba(255,255,255,.88); max-width: 560px; margin-bottom: 1.1rem; }
.civic-hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.civic-hero__btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .68rem 1.25rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.civic-hero__btn--solid { background: #fff; color: var(--idds-primary-700, var(--idds-primary)) !important; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.civic-hero__btn--ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff !important; }
.civic-hero__btn:hover { transform: translateY(-2px); }
.civic-hero__panel {
    flex: 0 0 300px; border-radius: 18px; padding: 1.1rem 1.2rem;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.civic-hero__clock { font-weight: 700; font-size: .88rem; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.civic-hero__facts { display: grid; gap: .55rem; }
.civic-hero__facts div { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: rgba(255,255,255,.92); }
.civic-hero__facts i { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); }
@media (max-width: 992px) { .civic-hero__inner { flex-direction: column; align-items: flex-start; } .civic-hero__panel { flex: none; width: 100%; } }

/* ---- AGENCY: formal dark masthead band with gold rule ---------------------- */
.agency-band {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--idds-primary) 78%, #000 22%),
        color-mix(in srgb, var(--idds-primary) 92%, #000 8%));
    color: #fff; padding: 1.8rem 0; border-bottom: 4px solid var(--idds-accent);
}
.agency-band__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.agency-band__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.agency-band__name { color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin: .3rem 0 .55rem; }
.agency-band__rule { display: block; width: 84px; height: 4px; border-radius: 999px; background: var(--idds-accent); }
.agency-band__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.agency-band__date { font-size: .84rem; color: rgba(255,255,255,.85); display: inline-flex; gap: .45rem; align-items: center; }
.agency-band__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.15rem; border-radius: 10px; font-weight: 700; font-size: .86rem;
    background: var(--idds-accent); color: #1a1305 !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--idds-accent) 45%, transparent);
    transition: transform .18s ease;
}
.agency-band__cta:hover { transform: translateY(-2px); }

/* ---- MOSAIC: angled futuristic ribbon with quick cells --------------------- */
.mosaic-ribbon {
    position: relative; color: #fff; padding: 2.4rem 0 3.2rem; overflow: hidden;
    background:
        radial-gradient(640px 300px at 8% -30%, color-mix(in srgb, var(--idds-accent) 34%, transparent), transparent 66%),
        conic-gradient(from 210deg at 78% 20%,
            color-mix(in srgb, var(--idds-primary) 88%, #000 12%),
            var(--idds-primary),
            color-mix(in srgb, var(--idds-primary) 58%, var(--idds-accent)),
            color-mix(in srgb, var(--idds-primary) 88%, #000 12%));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
}
.mosaic-ribbon__grid { display: flex; gap: 2rem; align-items: center; justify-content: space-between; }
.mosaic-ribbon__badge {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .95rem; border-radius: 999px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
    font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.mosaic-ribbon__title { color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: .7rem 0 .35rem; }
.mosaic-ribbon__desc { color: rgba(255,255,255,.85); max-width: 520px; margin: 0; }
.mosaic-ribbon__cells { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: .7rem; flex: 0 0 auto; }
.mosaic-cell {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: .95rem 1.1rem; border-radius: 14px; font-weight: 700; font-size: .82rem;
    color: #fff !important; text-align: center;
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: transform .18s ease, background .18s ease;
}
.mosaic-cell:hover { transform: translateY(-3px); background: rgba(255,255,255,.22); }
.mosaic-cell i { font-size: 1.15rem; }
@media (max-width: 992px) {
    .mosaic-ribbon__grid { flex-direction: column; align-items: flex-start; }
    .mosaic-ribbon__cells { width: 100%; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 576px) { .mosaic-ribbon__cells { grid-template-columns: repeat(2, 1fr); } }

/* Mosaic article rhythm: first card of each 2-col row spans full width */
body.ly-mosaic .home--mosaic .container-content .row [class*="col-lg-6"]:first-of-type { flex: 0 0 100%; max-width: 100%; }

/* Heroes replace the masthead visually — tuck them flush under the nav */
body.ly-civic  section.home.top,
body.ly-agency section.home.top,
body.ly-mosaic section.home.top { padding-top: 0 !important; }

/* Hero titles must stay white regardless of legacy h1 rules */
body.skin-magz .civic-hero__title,
body.skin-magz .agency-band__name,
body.skin-magz .mosaic-ribbon__title { color: #fff !important; }
body.skin-magz .civic-hero a,
body.skin-magz .mosaic-ribbon a { text-decoration: none; }

/* ==========================================================================
   FUTURISTIC PER-LAYOUT FLOURISHES
   ========================================================================== */
/* Gradient-clipped display titles for editorial/magazine/showcase domains.   */
body.ly-magazine .mag-ribbon__title,
body.ly-editorial .line.top > div,
body.ly-showcase .showcase-intro__title {
    background: var(--pro-grad, linear-gradient(135deg, var(--idds-primary), var(--idds-accent)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* Stronger, frostier glass for glass-header domains.                         */
body.hd-glass nav.menu {
    backdrop-filter: saturate(1.7) blur(18px) !important;
    -webkit-backdrop-filter: saturate(1.7) blur(18px) !important;
}
/* Bold-tone domains get a faint aurora glow behind the hero.                 */
html[data-bs-theme="light"] body.skin-magz.tn-bold .home.top { position: relative; }
html[data-bs-theme="light"] body.skin-magz.tn-bold .home.top::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 420px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(600px 300px at 15% 0, color-mix(in srgb, var(--idds-primary) 22%, transparent), transparent 70%),
        radial-gradient(600px 300px at 85% 0, color-mix(in srgb, var(--idds-accent) 18%, transparent), transparent 70%);
}
body.skin-magz.tn-bold .home.top > * { position: relative; z-index: 1; }

/* ==========================================================================
   MAX DINAS DIFFERENTIATION — professional / modern / elegant (2026)
   ========================================================================== */
body.ly-classic article.featured {
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 14px 36px rgba(16,24,40,.08);
}
body.ly-classic .portal-services__item {
    border-left: 3px solid var(--idds-primary);
}

body.ly-center .showcase-intro,
body.ly-center .portal-strip .line.top > div {
    text-align: center;
}
body.ly-center .article:not(.main-article) .inner {
    transition: transform .2s ease, box-shadow .2s ease;
}
body.ly-center .article:not(.main-article) .inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(16,24,40,.1);
}

body.ly-wide .leaders-band { max-width: 1280px; }
body.ly-wide article.featured .details h1 { font-size: 2.15rem; letter-spacing: -.03em; }
body.ly-wide .article:not(.main-article) .inner { border-radius: 6px; }

body.ly-grid .grid-stats__item {
    border-top: 3px solid var(--idds-primary);
    box-shadow: 0 8px 20px rgba(16,24,40,.05);
}
body.ly-grid .article:not(.main-article) .inner {
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--idds-primary) 12%, transparent);
}

body.ly-boxed .home-boxed-shell {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--idds-primary) 4%, #fff), #fff 140px);
}
body.ly-boxed .sidebar .block {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--idds-primary) 10%, transparent);
}

body.ly-editorial .edi-kicker {
    border-bottom-width: 2px;
    margin-bottom: 1.35rem;
}
body.ly-editorial .article:not(.main-article) .inner .padding h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}
body.ly-editorial .sidebar { padding-top: .5rem; }

body.ly-stack .stack-cta {
    margin: 1.75rem auto 2rem;
    max-width: 1000px;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--idds-primary), color-mix(in srgb, var(--idds-primary) 70%, var(--idds-accent)));
    color: #fff;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--idds-primary) 30%, transparent);
}
body.ly-stack .stack-cta__text { display: grid; gap: .2rem; }
body.ly-stack .stack-cta__text strong { font-size: 1.15rem; }
body.ly-stack .stack-cta__text span { opacity: .88; font-size: .92rem; }
body.ly-stack .stack-cta__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; color: var(--idds-primary) !important;
    font-weight: 800; padding: .65rem 1.15rem; border-radius: 999px;
    text-decoration: none !important;
}

body.ly-portal .portal-stats__item {
    background: #fff;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--idds-primary) 12%, transparent);
}
body.ly-portal .leaders-band {
    border: 1px solid color-mix(in srgb, var(--idds-primary) 14%, transparent);
}

body.ly-magazine .mag-ribbon {
    border-bottom-width: 4px;
    border-image: linear-gradient(90deg, var(--idds-primary), var(--idds-accent)) 1;
}
body.ly-magazine article.featured {
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(16,24,40,.12);
}

body.ly-showcase .showcase-intro {
    border-bottom: 1px solid color-mix(in srgb, var(--idds-primary) 12%, transparent);
}
body.ly-showcase .showcase-intro__badge {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--idds-primary) 35%, transparent);
}
body.ly-showcase article.featured { min-height: 460px; }

body.ly-civic .civic-hero {
    box-shadow: 0 18px 40px color-mix(in srgb, var(--idds-primary) 28%, transparent);
}
body.ly-civic .leaders-band {
    margin-top: -1.25rem;
    position: relative; z-index: 2;
}

body.ly-agency .agency-band {
    letter-spacing: .01em;
}
body.ly-agency .portal-services__item {
    border-radius: 4px;
    border-top: 3px solid var(--idds-accent);
}
body.ly-agency .article:not(.main-article) .inner { border-radius: 2px; }

body.ly-mosaic .mosaic-ribbon { margin-bottom: -.5rem; }
body.ly-mosaic .portal-services__item {
    border-radius: 16px;
    background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--idds-primary) 5%, #fff));
}

/* Header layout accents */
body.hl-center .firstbar { text-align: left; }
body.hl-stacked .firstbar .brand { margin-bottom: .35rem; }
body.hl-inline .firstbar { padding-block: .55rem; }

/* Footer must stay dark: Magz styles assume light text (#fff / #d7e0ee).
   A light canvas (tn-*) made titles, tags, and news links invisible. */
body.skin-magz footer.footer {
    background:
        radial-gradient(1100px 420px at 12% -15%,
            color-mix(in srgb, var(--idds-primary) 62%, #0b1220) 0%,
            transparent 58%),
        linear-gradient(175deg,
            color-mix(in srgb, var(--idds-primary) 42%, #0f172a) 0%,
            #0b1220 72%);
    color: #b9c4d4 !important;
}
body.skin-magz footer.footer .block .block-title,
body.skin-magz footer.footer h3,
body.skin-magz footer.footer .title {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: -.01em;
}
body.skin-magz footer.footer a { color: #d7e0ee !important; }
body.skin-magz footer.footer a:hover { color: #fff !important; }
body.skin-magz footer.footer .article-mini h1 a,
body.skin-magz footer.footer .article-mini .detail h1 a {
    color: #e8eef7 !important;
}
body.skin-magz footer.footer .article-mini .detail .time,
body.skin-magz footer.footer .article-mini .detail .category a,
body.skin-magz footer.footer .block .block-body,
body.skin-magz footer.footer .block .block-body p {
    color: #a8b6c9 !important;
}
body.skin-magz footer.footer .tags li a,
body.skin-magz footer.footer .tags-list li a {
    color: #d7e0ee !important;
    border-color: rgba(255, 255, 255, .28) !important;
    background: transparent !important;
}
body.skin-magz footer.footer .tags li a:hover,
body.skin-magz footer.footer .tags-list li a:hover {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--idds-accent, var(--idds-primary)) 70%, #fff) !important;
}
body.skin-magz footer.footer .btn-magz,
body.skin-magz footer.footer .btn-magz.white,
body.skin-magz footer.footer .footer-brand__top {
    color: #e8eef7 !important;
    border-color: rgba(255, 255, 255, .35) !important;
}
body.skin-magz footer.footer .btn-magz:hover,
body.skin-magz footer.footer .btn-magz.white:hover,
body.skin-magz footer.footer .footer-brand__top:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .1) !important;
}
body.skin-magz footer.footer .copyright,
body.skin-magz footer.footer .copyright a,
body.skin-magz footer.footer .footer-nav-horizontal li a,
body.skin-magz footer.footer .footer-nav li a {
    color: #a8b6c9 !important;
}
body.skin-magz footer.footer .footer-nav-horizontal li a:hover,
body.skin-magz footer.footer .footer-nav li a:hover,
body.skin-magz footer.footer .copyright a:hover {
    color: #fff !important;
}
body.skin-magz footer.footer .footer-brand {
    border-bottom-color: rgba(255, 255, 255, .1);
}
body.skin-magz footer.footer .copyright {
    border-top-color: rgba(255, 255, 255, .1);
}

/* ==========================================================================
   ULTIMATE PER-DINAS POLISH (2026) — maximize professional identity
   Each ly-* / cs-* / sh-* / hl-* gets a clearer visual signature so domains
   no longer read as “same portal, different hue”.
   ========================================================================== */

/* Reveal motion ----------------------------------------------------------- */
body.skin-magz .idds-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
body.skin-magz .idds-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    body.skin-magz .idds-reveal { opacity: 1; transform: none; transition: none; }
}

/* Category chip / tile nav ------------------------------------------------ */
body.skin-magz .cat-nav {
    display: flex; flex-wrap: wrap; gap: .55rem;
    margin: .35rem 0 1.25rem;
}
body.skin-magz .cat-nav--chip .cat-nav__item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; border-radius: 999px;
    background: var(--idds-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--idds-primary) 16%, var(--idds-border));
    color: var(--idds-text) !important; font-weight: 700; font-size: .82rem;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
body.skin-magz .cat-nav--chip .cat-nav__item:hover {
    background: var(--idds-primary); color: #fff !important; border-color: var(--idds-primary);
    transform: translateY(-1px);
}
body.skin-magz .cat-nav--tile {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem;
}
@media (max-width: 768px) { body.skin-magz .cat-nav--tile { grid-template-columns: repeat(2, 1fr); } }
body.skin-magz .cat-nav--tile .cat-nav__item {
    display: flex; align-items: center; gap: .55rem;
    padding: .85rem 1rem; border-radius: 12px;
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--idds-primary) 6%, #fff));
    border: 1px solid color-mix(in srgb, var(--idds-primary) 14%, transparent);
    color: var(--idds-text) !important; font-weight: 700; text-decoration: none;
    box-shadow: 0 6px 16px rgba(16,24,40,.04);
    transition: transform .22s ease, box-shadow .22s ease;
}
body.skin-magz .cat-nav--tile .cat-nav__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(16,24,40,.1);
    color: var(--idds-primary-700, var(--idds-primary)) !important;
}
body.skin-magz .cat-nav__icon { color: var(--idds-primary); opacity: .85; font-size: .75rem; }

/* Layout signatures ------------------------------------------------------- */
body.ly-classic .portal-services__item {
    border-radius: 12px;
    border-top-width: 3px;
}
body.ly-classic .line.top > div::after { width: 56px; }

body.ly-wide .container-md--wide { max-width: 1240px; }
body.ly-wide #carouselExampleIndicators.carousel {
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(16,24,40,.12);
}
body.ly-wide .portal-services { gap: 1rem; }

body.ly-center .portal-strip .line.top > div { margin-inline: auto; text-align: center; }
body.ly-center .portal-strip .line.top > div::after { left: 50%; transform: translateX(-50%); }
body.ly-center .portal-services { max-width: 920px; margin-inline: auto; }
body.ly-center .leaders-band { margin-inline: auto; }

body.ly-boxed .home-boxed-shell,
body.ly-boxed .container-content > .container-md {
    background: color-mix(in srgb, var(--idds-surface) 92%, #fff);
    border: 1px solid color-mix(in srgb, var(--idds-primary) 12%, transparent);
    border-radius: 18px;
    padding: 1.25rem 1.35rem 1.5rem;
    box-shadow: 0 14px 36px rgba(16,24,40,.06);
}

body.ly-portal .container-content {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--idds-primary) 7%, transparent),
        transparent 180px);
    border-radius: 18px 18px 0 0;
    padding-top: 1.4rem !important;
}
body.ly-portal .portal-services__item {
    border-radius: 16px;
    background: linear-gradient(165deg, #fff 40%, color-mix(in srgb, var(--idds-primary) 7%, #fff));
}
body.ly-portal .portal-services__ico {
    border-radius: 50%;
    background: var(--pro-grad, linear-gradient(135deg, var(--idds-primary), var(--idds-accent)));
    color: #fff;
}

body.ly-magazine .mag-ribbon {
    display: flex; flex-direction: column; gap: .25rem;
    margin: .25rem 0 1.35rem; padding: 1.1rem 0 1rem;
    border-bottom: 4px solid var(--idds-primary);
}
body.ly-magazine .mag-ribbon__kicker {
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--idds-accent, var(--idds-primary));
}
body.ly-magazine .mag-ribbon__title {
    margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.35rem); font-weight: 800;
    letter-spacing: -.03em; color: var(--idds-primary-700, var(--idds-primary));
}
body.ly-magazine .article:not(.main-article) .inner { border-radius: 4px; }
body.ly-magazine .line.top > div {
    font-size: 1.55rem !important;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.02em;
}

body.ly-editorial .edi-kicker {
    margin: .2rem 0 1.2rem; padding-left: 1rem;
    border-left: 4px solid var(--idds-accent, var(--idds-primary));
}
body.ly-editorial .edi-kicker__label {
    display: block; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--idds-primary);
}
body.ly-editorial .edi-kicker__title {
    margin: .2rem 0 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.025em;
}
body.ly-editorial article.article-list .detail h1 a,
body.ly-editorial .article:not(.main-article) .detail h1 a {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.01em;
}

body.ly-stack .stack-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 1.75rem 0 1rem; padding: 1.35rem 1.5rem;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--idds-primary), color-mix(in srgb, var(--idds-primary) 55%, var(--idds-accent)));
    color: #fff; box-shadow: 0 16px 36px color-mix(in srgb, var(--idds-primary) 32%, transparent);
}
body.ly-stack .stack-cta__text { display: flex; flex-direction: column; gap: .25rem; max-width: 48rem; }
body.ly-stack .stack-cta__text strong { font-size: 1.15rem; }
body.ly-stack .stack-cta__text span { opacity: .9; font-size: .92rem; }
body.ly-stack .stack-cta__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .7rem 1.15rem; border-radius: 999px;
    background: #fff; color: var(--idds-primary) !important; font-weight: 800; text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
body.ly-stack .portal-services { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { body.ly-stack .portal-services { grid-template-columns: repeat(2, 1fr); } }

body.ly-grid .grid-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
    margin: .2rem 0 1.25rem;
}
@media (max-width: 768px) { body.ly-grid .grid-stats { grid-template-columns: repeat(2, 1fr); } }
body.ly-grid .grid-stats__item {
    display: flex; align-items: center; gap: .65rem;
    padding: 1rem 1.05rem; border-radius: 14px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--idds-primary) 12%, transparent);
    box-shadow: 0 8px 20px rgba(16,24,40,.05);
    font-weight: 700; color: var(--idds-text);
}
body.ly-grid .grid-stats__item i {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--idds-primary) 12%, transparent);
    color: var(--idds-primary);
}
body.ly-grid .cat-nav { margin-top: .25rem; }

body.ly-showcase .showcase-intro {
    margin: 0 0 1.4rem; padding: 1.8rem 0 1.6rem;
    background:
        radial-gradient(900px 280px at 10% 0, color-mix(in srgb, var(--idds-primary) 18%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--idds-primary) 8%, #fff), transparent);
}
body.ly-showcase .showcase-intro__badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .85rem; border-radius: 999px;
    background: var(--idds-primary); color: #fff; font-size: .75rem; font-weight: 800;
}
body.ly-showcase .showcase-intro__title {
    margin: .75rem 0 .4rem; font-size: clamp(1.55rem, 2.6vw, 2.4rem);
    font-weight: 800; letter-spacing: -.03em; color: var(--idds-primary-700, var(--idds-primary));
}
body.ly-showcase .showcase-intro__desc {
    margin: 0; max-width: 42rem; color: #475569; font-size: 1.02rem;
}
body.ly-showcase #carouselExampleIndicators.carousel {
    border-radius: 0; margin-bottom: 0;
    box-shadow: none;
}

body.ly-agency .agency-band {
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--idds-primary) 92%, #0b1220),
        color-mix(in srgb, var(--idds-primary) 62%, #1e293b));
}
body.ly-agency .portal-services__item {
    border-left: 3px solid var(--idds-accent);
    border-top-color: transparent;
    border-radius: 2px;
}

body.ly-civic .civic-hero {
    border-radius: 0 0 22px 22px;
}
body.ly-civic .portal-services__item {
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(16,24,40,.07);
}

body.ly-mosaic .mosaic-ribbon {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
body.ly-mosaic .portal-services__item {
    border-radius: 20px;
    border: 0;
    border-top: 0;
    box-shadow: 0 12px 28px rgba(16,24,40,.08);
}

/* Card-shape accents on portal tiles too ---------------------------------- */
body.cs-sharp .portal-services__item,
body.cs-sharp .grid-stats__item,
body.cs-sharp .cat-nav--tile .cat-nav__item { border-radius: 0 !important; }
body.cs-pill .portal-services__item,
body.cs-pill .grid-stats__item { border-radius: 22px !important; }
body.cs-soft .portal-services__item { border-radius: 18px !important; }
body.cs-outline .portal-services__item {
    background: transparent !important;
    border: 1.5px solid color-mix(in srgb, var(--idds-primary) 35%, transparent) !important;
    box-shadow: none !important;
}

/* Section heading flavours already exist; strengthen block/dot ------------ */
body.sh-block .line.top > div {
    display: inline-block;
    padding: .35rem .85rem .45rem;
    background: color-mix(in srgb, var(--idds-primary) 10%, transparent);
    border-radius: 8px;
}
body.sh-dot .line.top > div::before {
    content: ""; display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--idds-accent, var(--idds-primary));
    margin-right: .55rem; vertical-align: middle;
}

/* Masthead polish --------------------------------------------------------- */
body.hl-center .firstbar .brand {
    display: flex; flex-direction: row; align-items: center; gap: .85rem;
}
body.hl-stacked .firstbar .brand__name {
    display: block; font-weight: 800; letter-spacing: -.02em;
    color: var(--idds-primary-700, var(--idds-primary));
}
body.hl-inline .brand__name { color: #fff; font-weight: 700; }

/* Tone bold: stronger card lift ------------------------------------------- */
body.tn-bold .article:not(.main-article) .inner {
    border: 1px solid color-mix(in srgb, var(--idds-primary) 16%, transparent);
}
body.tn-bold .portal-services__item {
    box-shadow: 0 10px 26px color-mix(in srgb, var(--idds-primary) 12%, transparent);
}



/* ==========================================================================
   FUTURE v2 — stronger per-layout / per-group identity (2026)
   ========================================================================== */
body.ly-wide .container-md { max-width: 1280px; }
body.ly-wide #carouselExampleIndicators.carousel {
    border-radius: 0; margin-left: 0; margin-right: 0;
    width: 100%; max-width: 100%;
}
body.ly-boxed .container-content {
    background: var(--idds-surface);
    border-radius: 20px;
    padding: 1.25rem 1.5rem 2rem;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .06);
}
body.ly-stack .stack-cta {
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--idds-primary) 12%, #fff),
        color-mix(in srgb, var(--idds-accent) 10%, #fff));
    border: 1px solid color-mix(in srgb, var(--idds-primary) 18%, transparent);
}
body.ly-grid .article:not(.main-article) .inner {
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid rgba(16, 24, 40, .08);
}
body.ly-magazine .mag-ribbon,
body.ly-editorial .edi-kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-bottom: .75rem;
}
body.ly-center .firstbar .brand { justify-content: flex-start; text-align: left; }
body.ly-center .container-content > .row { justify-content: center; }

body[class*="preset-kec-"] .leaders-band { border-radius: 14px; }
body[class*="preset-kec-"] .portal-services__item {
    border-radius: 12px;
    border-left: 3px solid var(--idds-primary);
}
body[class*="preset-kec-"] .opd-induk-hero__stage {
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
body[class*="preset-kec-"] .tg-body-id {
    margin: .5rem auto 0;
    max-width: 1600px;
    padding: 0 clamp(1rem, 2.5vw, 2rem);
}

body.preset-bappeda .line.top > div,
body.preset-bkad .line.top > div,
body.preset-bapenda .line.top > div,
body.preset-bkpsdm .line.top > div,
body.preset-bakesbangpol .line.top > div,
body.preset-bpbd .line.top > div {
    font-size: 1.05rem;
    letter-spacing: -.02em;
}