/* =====================================================================
   VadUguns — "Bāka naktī" design system
   Dobeles novada ziņu portāls · statisks HTML/CSS/JS prototips
   ---------------------------------------------------------------------
   Aesthetic: editorial-premium "beacon at night".
   Deep ink-navy chrome · warm paper body · amber guiding-light accent ·
   signal-red for breaking/subscribe. Fraunces (display serif) + Manrope.

   CLASS INDEX (reuse these — do not invent new component styles):
     Layout ........ .wrap .section .section--soft .section--ink
                     .grid .grid--main (1fr/300px) .grid--2 .grid--3 .grid--4
     Buttons ....... .btn .btn--amber .btn--ink .btn--signal .btn--ghost
                     .btn--block .btn--sm  + .icon-btn
     Forms ......... .field .field__label .input .textarea .select
                     .check .upload .form-note .form-banner(.is-error/.is-ok)
     Pills/badges .. .pill .pill--{cat} .badge .badge--live .num
     Header ........ .topbar .masthead .brand .mainnav .drawer .searchmodal
     Footer ........ .footer
     Page hero ..... .pagehero .eyebrow .pagehero__title .lead
     Cards ......... .card .artcard .artcard--hero .artcard--wide
                     .artcard__media .artcard__body .meta
                     .ranklist .rankitem  .classified .eventcard
     Sidebar ....... .box .box__head .box__body .subbox .adslot
     Article ....... .article .article__title .byline .share .prose
                     .tagrow .authorbox .comments .comment
     Tabs .......... .tabs .tab
     Pricing ....... .plans .plan .plan--feature .plan__head .featlist
     Auth .......... .auth .auth__aside .auth__panel
     Utilities ..... .reveal [data-reveal] .stack .cluster .center .muted
   ===================================================================== */

/* Lora (display serif — bez opsz ass, korektas latviešu garumzīmes) + Manrope.
   NB: Fraunces un Newsreader nomainīti — to opsz ass plānina garumzīmes (ā ē ī ū); Lora tās atveido korekti.
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@400..800&display=swap');

/* ----------------------------------------------------------------- *
 * 1. DESIGN TOKENS
 * ----------------------------------------------------------------- */
:root {
  /* Brand — beacon at night */
  --ink:        #0e1a2b;   /* deepest navy — chrome, headlines       */
  --ink-2:      #14233a;   /* navy band                              */
  --ink-3:      #1d3553;   /* lifted navy surfaces                   */
  --navy-line:  rgba(255,255,255,.12);
  --navy-line-2:rgba(255,255,255,.20);

  --paper:      #faf8f4;   /* warm paper page bg                     */
  --paper-soft: #f3efe7;   /* soft section bg                        */
  --paper-mute: #ece6da;   /* muted fill / placeholder               */
  --card:       #ffffff;

  --amber:      #f2a516;   /* guiding light — primary accent         */
  --amber-deep: #d98a08;
  --amber-soft: #fbe9c4;
  --amber-glow: rgba(149, 7, 0,.42);

  --signal:     #d7263d;   /* breaking news / subscribe              */
  --signal-deep:#b41d31;
  --signal-soft:#fbe1e4;

  --text:       #16202b;   /* body text on paper                     */
  --text-soft:  #3c4754;
  --muted:      #6b7480;   /* meta / captions                        */
  --on-ink:     #f6f3ec;   /* text on navy                           */
  --on-ink-mut: #aeb9c6;

  --border:     #e7e0d2;   /* warm hairline on paper                 */
  --border-2:   #d9d0bf;
  --ring:       rgba(149, 7, 0,.55);

  /* Category hues (sophisticated, muted — legible as pills) */
  --cat-sabiedriba: #1f6fb2;
  --cat-novada:     #0e8a7b;
  --cat-kultura:    #7e3daf;
  --cat-sports:     #2f9e44;
  --cat-izglitiba:  #c2410c;
  --cat-ekonomika:  #0f6e8c;
  --cat-viedoklis:  #9b2242;
  --cat-kriminals:  #3a4654;
  --cat-dzive:      #b83280;
  --cat-vesture:    #8a6d2f;
  --cat-dazadi:     #5a6573;

  /* Type */
  --display: 'Lora', 'Georgia', 'Times New Roman', serif;
  --sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius / shadow / rhythm */
  --r-xs: 4px;  --r-sm: 7px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;
  --sh-sm: 0 1px 2px rgba(14,26,43,.06), 0 2px 8px rgba(14,26,43,.05);
  --sh-md: 0 8px 26px rgba(14,26,43,.09);
  --sh-lg: 0 24px 60px rgba(14,26,43,.16);
  --sh-amber: 0 10px 30px var(--amber-glow);

  --wrap: 1300px;
  --gap: clamp(1rem, 2.4vw, 1.6rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------- *
 * 2. RESET + BASE
 * ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* paper grain + faint beacon glow on the page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(149, 7, 0,.10), transparent 60%),
    radial-gradient(760px 600px at -6% 4%, rgba(31,111,178,.06), transparent 55%);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--amber); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--border); }

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.display { font-family: var(--display); }
strong, b { font-weight: 700; }

/* ----------------------------------------------------------------- *
 * 3. LAYOUT
 * ----------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 3.5vw, 2rem); }
.section { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.section--tight { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.section--soft { background: var(--paper-soft); }
.section--ink  { background: var(--ink); color: var(--on-ink); position: relative; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--main { grid-template-columns: minmax(0,1fr) 320px; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
.grid--main-l { grid-template-columns: 320px minmax(0,1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
@media (max-width: 1000px){
  .grid--main, .grid--main-l { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.sticky { position: sticky; top: 88px; }

/* Section heading with amber "guiding-line" beam */
.sechead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.sechead__t { position: relative; font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 1.7rem); color: var(--ink); padding-left: 16px; }
.sechead__t::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px; border-radius: 3px; background: linear-gradient(var(--amber), var(--amber-deep)); box-shadow: 0 0 14px var(--amber-glow); }
.section--ink .sechead__t { color: #fff; }
.sechead__link { font-family: var(--sans); font-weight: 700; font-size: .82rem; letter-spacing: .02em; color: var(--ink); display: inline-flex; align-items: center; gap: .35rem; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.sechead__link:hover { color: var(--amber-deep); border-color: var(--amber); }
.section--ink .sechead__link { color: var(--on-ink); }
.section--ink .sechead__link:hover { color: var(--amber); }

/* ----------------------------------------------------------------- *
 * 4. BUTTONS
 * ----------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  line-height: 1; padding: .82em 1.3em; border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  transition: transform .15s var(--ease), box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn--amber  { --btn-bg: var(--amber); --btn-fg: var(--ink); --btn-bd: var(--amber); }
.btn--amber:hover { box-shadow: var(--sh-amber); background: #ffb52e; }
.btn--ink    { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--signal { --btn-bg: var(--signal); --btn-fg: #fff; --btn-bd: var(--signal); }
.btn--signal:hover { background: var(--signal-deep); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--border-2); }
.btn--ghost:hover { --btn-bd: var(--ink); box-shadow: var(--sh-sm); }
.btn--onink  { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: var(--navy-line-2); }
.btn--onink:hover { --btn-bd: var(--amber); color: var(--amber); }
.btn--block  { display: flex; width: 100%; }
.btn--sm     { font-size: .82rem; padding: .62em 1em; border-radius: var(--r-sm); }
.btn--lg     { font-size: 1rem; padding: 1em 1.6em; }

.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; color: inherit; transition: background .2s, color .2s, transform .15s; }
.icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------- *
 * 5. FORMS
 * ----------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label { font-family: var(--sans); font-weight: 700; font-size: .82rem; color: var(--ink); letter-spacing: .01em; }
.field__label .req { color: var(--signal); }
.field__hint { font-size: .78rem; color: var(--muted); }
.input, .textarea, .select {
  width: 100%; font-family: var(--sans); font-size: .96rem; color: var(--text);
  background: var(--card); border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  padding: .8em .9em; transition: border-color .18s, box-shadow .18s, background .18s;
}
.input::placeholder, .textarea::placeholder { color: #9aa1aa; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }
.textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7em center; padding-right: 2.4em; }
/* input with leading icon */
.input-ic { position: relative; }
.input-ic > svg { position: absolute; left: .85em; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.input-ic .input { padding-left: 2.6em; }
.input-ic .pw-toggle { position: absolute; right: .5em; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--muted); }
.input-ic .pw-toggle:hover { color: var(--ink); background: var(--paper-soft); }

/* checkbox / radio */
.check { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; color: var(--text-soft); cursor: pointer; line-height: 1.45; }
.check input { appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--border-2); border-radius: 6px; background: var(--card); display: grid; place-content: center; transition: background .15s, border-color .15s; }
.check input[type=radio] { border-radius: 999px; }
.check input::after { content: ""; width: 11px; height: 11px; transform: scale(0); transition: transform .15s var(--ease); background: var(--ink); clip-path: polygon(14% 52%, 0 65%, 40% 100%, 100% 22%, 86% 9%, 38% 71%); }
.check input[type=radio]::after { clip-path: none; border-radius: 999px; background: var(--ink); }
.check input:checked { background: var(--amber); border-color: var(--amber); }
.check input:checked::after { transform: scale(1); }
.check a { color: var(--amber-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* selectable option card (persona / plan toggles) */
.optcard { display: flex; align-items: center; gap: .85rem; border: 1.5px solid var(--border-2); border-radius: var(--r-md); padding: .9rem 1rem; background: var(--card); cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; }
.optcard input { position: absolute; opacity: 0; }
.optcard:hover { border-color: var(--amber); }
.optcard:has(input:checked) { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); background: #fffdf7; }
.optcard__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-soft); color: var(--ink); }
.optcard:has(input:checked) .optcard__ic { background: var(--amber); }
.optcard > span:last-child { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.optcard__t { display: block; font-weight: 700; font-size: .92rem; color: var(--ink); font-family: var(--sans); line-height: 1.25; }
.optcard__d { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; }

/* file upload dropzone */
.upload { border: 2px dashed var(--border-2); border-radius: var(--r-md); padding: 1.6rem; text-align: center; color: var(--muted); background: var(--paper-soft); transition: border-color .2s, background .2s, color .2s; cursor: pointer; }
.upload:hover, .upload.is-drag { border-color: var(--amber); background: #fffdf7; color: var(--text-soft); }
.upload svg { width: 30px; height: 30px; margin: 0 auto .55rem; color: var(--amber-deep); }
.upload strong { color: var(--ink); }
.upload__hint { font-size: .76rem; margin-top: .35rem; }
.upload-previews { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.upload-previews .thumb { position: relative; width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.upload-previews .thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-previews .thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 999px; background: rgba(14,26,43,.8); color: #fff; display: grid; place-items: center; font-size: 13px; }

.form-note { font-size: .8rem; color: var(--muted); }
.form-banner { display: none; align-items: flex-start; gap: .6rem; border-radius: var(--r-sm); padding: .75rem .9rem; font-size: .88rem; font-weight: 600; border: 1.5px solid; }
.form-banner.show { display: flex; }
.form-banner.is-ok    { color: #1c6b3f; background: #e9f7ee; border-color: #2f9e44; }
.form-banner.is-error { color: var(--signal-deep); background: var(--signal-soft); border-color: var(--signal); }
.form-banner svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }

/* character counter */
.charcount { font-size: .76rem; color: var(--muted); text-align: right; }
.charcount.is-high { color: var(--signal); }

/* sticky form footer (classifieds price + submit) */
.formbar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--r-md); padding: .9rem 1.2rem; box-shadow: var(--sh-lg); margin-top: 1.4rem; }
.formbar__price { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--amber); }
.formbar__price small { display: block; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-mut); }
/* Form wrapper that hosts the sticky .formbar: pad the bottom so the last field
   can never sit under the bar at the end of scroll (≈ bar height + breathing room). */
.has-formbar { padding-bottom: 6rem; }

/* ----------------------------------------------------------------- *
 * 6. PILLS / BADGES / NUMBERS
 * ----------------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: .35em; font-family: var(--sans); font-weight: 700; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--cat-dazadi); padding: .34em .7em; border-radius: 999px; line-height: 1; }
.pill svg { width: 12px; height: 12px; }
.pill--sabiedriba { background: var(--cat-sabiedriba); }
.pill--novada     { background: var(--cat-novada); }
.pill--kultura    { background: var(--cat-kultura); }
.pill--sports     { background: var(--cat-sports); }
.pill--izglitiba  { background: var(--cat-izglitiba); }
.pill--ekonomika  { background: var(--cat-ekonomika); }
.pill--viedoklis  { background: var(--cat-viedoklis); }
.pill--kriminals  { background: var(--cat-kriminals); }
.pill--dzive      { background: var(--cat-dzive); }
.pill--vesture    { background: var(--cat-vesture); }
.pill--dazadi     { background: var(--cat-dazadi); }
.pill--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border-2); }
.pill--soft  { background: var(--paper-soft); color: var(--text-soft); }

.badge { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .32em .65em; border-radius: 999px; }
.badge--ok      { color: #1c6b3f; background: #e3f5ea; }
.badge--warn    { color: #8a5a00; background: #fbeccb; }
.badge--muted   { color: var(--muted); background: var(--paper-mute); }
.badge--signal  { color: #fff; background: var(--signal); }
.badge--live    { color: #fff; background: var(--signal); }
.badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: pulse 1.6s infinite; }

.num { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--amber-deep); line-height: 1; }

/* beacon dot */
.bdot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--signal); box-shadow: 0 0 0 0 var(--signal); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%{ box-shadow: 0 0 0 0 rgba(149, 7, 0,.55);} 70%{ box-shadow: 0 0 0 10px rgba(149, 7, 0,0);} 100%{ box-shadow: 0 0 0 0 rgba(149, 7, 0,0);} }

/* ----------------------------------------------------------------- *
 * 7. HEADER (topbar / masthead / nav / drawer / search)
 * ----------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 60; }

.topbar { background: var(--ink-2); color: var(--on-ink-mut); border-bottom: 1px solid var(--navy-line); font-size: .84rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.topbar__l, .topbar__r { display: flex; align-items: center; gap: .85rem; }
.topbar a { color: var(--on-ink-mut); transition: color .18s; }
.topbar a:hover { color: var(--amber); }
.topbar .sep { width: 1px; height: 14px; background: var(--navy-line-2); }
.topbar .weather { display: inline-flex; align-items: center; gap: .35rem; color: var(--on-ink); }
.topbar .socials { display: inline-flex; gap: .25rem; }
.topbar .socials a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; }
.topbar .socials a:hover { background: rgba(255,255,255,.1); }
.topbar .socials svg { width: 15px; height: 15px; }
@media (max-width: 860px){ .topbar { display: none; } }

/* masthead: navy with amber light-sweep behind the wordmark */
.masthead { position: relative; background:
    radial-gradient(620px 200px at 18% -40%, rgba(149, 7, 0,.20), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, #0c1726 100%);
  color: #fff; border-bottom: 1px solid var(--navy-line); overflow: hidden; }
.masthead::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 4px 4px; }
.masthead__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; }

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand__mark { flex: 0 0 auto; width: 44px; height: 44px; filter: drop-shadow(0 4px 14px var(--amber-glow)); }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--display); font-weight: 700; font-size: clamp(1.55rem, 3.6vw, 2.15rem); letter-spacing: -.02em; color: #fff; }
.brand__name b { color: var(--amber); font-weight: 700; }
.brand__tag { font-family: var(--sans); font-weight: 600; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--on-ink-mut); margin-top: .35rem; }

.masthead__actions { display: flex; align-items: center; gap: .35rem; }
.masthead__actions .icon-btn { color: #fff; }
.masthead .vsep { width: 1px; height: 26px; background: var(--navy-line-2); margin-inline: .25rem; }
.subscribe-cta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 800; font-size: .9rem; color: #fff; background: var(--signal); padding: .7em 1.15em; border-radius: 999px; transition: background .2s, transform .15s, box-shadow .2s; }
.subscribe-cta:hover { background: var(--signal-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(149, 7, 0,.4); }
.login-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .88rem; color: #fff; padding: .5em .4em; }
.login-link:hover { color: var(--amber); }
.hamburger { color: #fff; display: none; }
@media (max-width: 860px){
  .hamburger { display: inline-grid; }
  .masthead__actions .login-link span, .masthead__actions .eavize { display: none; }
}

/* category nav band */
.mainnav { background: var(--ink-3); border-bottom: 3px solid var(--amber); }
.mainnav__in { display: flex; align-items: center; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.mainnav__in::-webkit-scrollbar { display: none; }
.mainnav a { position: relative; white-space: nowrap; font-family: var(--sans); font-weight: 700; font-size: .86rem; color: var(--on-ink); padding: .85em .85em; transition: color .18s; }
.mainnav a::after { content: ""; position: absolute; left: .85em; right: .85em; bottom: 0; height: 3px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); }
.mainnav a:hover, .mainnav a.is-active { color: var(--amber); }
.mainnav a:hover::after, .mainnav a.is-active::after { transform: scaleX(1); }
.mainnav a.is-util { color: var(--on-ink-mut); }
.mainnav .grow { flex: 1; }
@media (max-width: 860px){ .mainnav { display: none; } }

/* breaking ticker */
.ticker { display: flex; align-items: stretch; background: var(--ink); color: #fff; border-bottom: 1px solid var(--navy-line); font-size: .84rem; }
.ticker__lbl { display: inline-flex; align-items: center; gap: .45rem; background: var(--signal); color: #fff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; padding: .55em .9em; white-space: nowrap; }
.ticker__track { overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker__move { display: inline-flex; gap: 2.5rem; white-space: nowrap; padding-left: 1rem; animation: ticker 30s linear infinite; }
.ticker__move a:hover { color: var(--amber); }
.ticker:hover .ticker__move { animation-play-state: paused; }
@keyframes ticker { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (max-width: 640px){ .ticker { display: none; } }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(8,15,25,.55); opacity: 0; transition: opacity .25s; }
.drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 88vw); background: var(--ink); color: #fff; transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; box-shadow: var(--sh-lg); }
.drawer.is-open { visibility: visible; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--navy-line); }
.drawer__body { padding: 1rem 1.2rem; overflow-y: auto; }
.drawer__body .searchform { margin-bottom: 1.1rem; }
.drawer nav a { display: block; padding: .75em 0; font-weight: 700; border-bottom: 1px solid var(--navy-line); color: #fff; }
.drawer nav a:hover { color: var(--amber); }
.drawer__foot { margin-top: auto; padding: 1.1rem 1.2rem; border-top: 1px solid var(--navy-line); display: grid; gap: .6rem; }

/* search modal */
.searchform { display: flex; gap: .5rem; }
.searchform .input { background: rgba(255,255,255,.08); border-color: var(--navy-line-2); color: #fff; }
.searchform .input::placeholder { color: var(--on-ink-mut); }
.searchmodal { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.searchmodal__scrim { position: absolute; inset: 0; background: rgba(8,15,25,.6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s; }
.searchmodal__card { position: absolute; left: 50%; top: 14vh; transform: translate(-50%, -16px); width: min(640px, 92vw); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 1.4rem; opacity: 0; transition: opacity .22s, transform .22s; }
.searchmodal.is-open { visibility: visible; }
.searchmodal.is-open .searchmodal__scrim { opacity: 1; }
.searchmodal.is-open .searchmodal__card { opacity: 1; transform: translate(-50%, 0); }
.searchmodal__card .input { background: var(--card); border-color: var(--border-2); color: var(--text); }
.searchmodal__card .input::placeholder { color: #9aa1aa; }
.searchmodal h3 { font-size: 1rem; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.searchmodal .hint { margin-top: .7rem; font-size: .8rem; color: var(--muted); }

/* ----------------------------------------------------------------- *
 * 8. FOOTER
 * ----------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-ink-mut); position: relative; }
.footer::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--amber), var(--signal)); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-block: clamp(2.4rem, 5vw, 3.4rem); }
@media (max-width: 900px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; font-family: var(--sans); font-weight: 800; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer a { color: var(--on-ink-mut); transition: color .18s; }
.footer a:hover { color: var(--amber); }
.footer__col p { font-size: .9rem; line-height: 1.7; }
.footer__nav li { margin-bottom: .55rem; }
.footer .brand__name { font-size: 1.6rem; }
.footer .socials { display: flex; gap: .5rem; margin-top: .3rem; }
.footer .socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--navy-line); }
.footer .socials a:hover { border-color: var(--amber); color: var(--amber); }
.footer .stores { display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem; }
.footer .store { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--navy-line); border-radius: 10px; padding: .5rem .8rem; font-size: .8rem; }
.footer .store:hover { border-color: var(--amber); }
.footer .store svg { width: 22px; height: 22px; }
.footer__bottom { border-top: 1px solid var(--navy-line); padding-block: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.footer__credit b { color: var(--amber); }

/* ----------------------------------------------------------------- *
 * 9. PAGE HERO (informational pages)
 * ----------------------------------------------------------------- */
.pagehero { background: var(--card); border-bottom: 1px solid var(--border); }
.pagehero__in { padding-block: clamp(1.8rem, 4vw, 3rem); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 800; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--signal); margin-bottom: .9rem; }
.eyebrow svg { width: 15px; height: 15px; }
.pagehero__title { position: relative; font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 600; color: var(--ink); padding-left: 20px; }
.pagehero__title::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 6px; border-radius: 3px; background: linear-gradient(var(--amber), var(--amber-deep)); box-shadow: 0 0 16px var(--amber-glow); }
.lead { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--text-soft); max-width: 70ch; margin-top: 1rem; line-height: 1.6; }

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; color: var(--muted); }
.crumbs a:hover { color: var(--amber-deep); }
.crumbs .sep { opacity: .5; }

/* ad placeholders */
.adslot { display: grid; place-items: center; text-align: center; color: var(--muted); background: repeating-linear-gradient(135deg, var(--paper-soft), var(--paper-soft) 12px, #efeae0 12px, #efeae0 24px); border: 1px dashed var(--border-2); border-radius: var(--r-sm); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.adslot--leader { min-height: 130px; }
.adslot--box { min-height: 250px; }
.adslot--tall { min-height: 600px; }
.adslot--sq { min-height: 300px; }
.adslot span { opacity: .7; }

/* ----------------------------------------------------------------- *
 * 10. CARDS
 * ----------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-sm); }

/* article card */
.artcard { position: relative; display: flex; flex-direction: column; gap: .7rem; }
.artcard__media { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16/10; background: var(--paper-mute); }
.artcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.artcard:hover .artcard__media img { transform: scale(1.05); }
.artcard__media .pill { position: absolute; left: .7rem; top: .7rem; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.artcard__title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.18; color: var(--ink); transition: color .18s; }
.artcard:hover .artcard__title { color: var(--amber-deep); }
.artcard__body { display: flex; flex-direction: column; gap: .5rem; }
.artcard__excerpt { font-size: .9rem; color: var(--text-soft); line-height: 1.55; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; font-size: .76rem; color: var(--muted); font-weight: 600; }
.meta .dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .6; }
.meta svg { width: 14px; height: 14px; }

/* hero card (overlay) */
.artcard--hero .artcard__media { aspect-ratio: 16/11; border-radius: var(--r-lg); }
.artcard--hero .artcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,25,0) 30%, rgba(8,15,25,.85) 100%); }
.artcard--hero .artcard__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1.1rem, 3vw, 2rem); color: #fff; }
.artcard--hero .artcard__title { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.4rem); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.artcard--hero:hover .artcard__title { color: #fff; }
.artcard--hero .meta { color: rgba(255,255,255,.85); }
.artcard--hero .artcard__media img { animation: kenburns 20s ease-in-out infinite alternate; }
@keyframes kenburns { from{ transform: scale(1);} to{ transform: scale(1.08);} }

/* wide / horizontal card */
.artcard--wide { flex-direction: row; gap: 1rem; align-items: stretch; }
.artcard--wide .artcard__media { flex: 0 0 42%; aspect-ratio: 4/3; }
.artcard--wide .artcard__body { justify-content: center; }
@media (max-width: 480px){ .artcard--wide { flex-direction: column; } .artcard--wide .artcard__media { flex-basis: auto; } }

/* compact list item with number */
.ranklist { display: flex; flex-direction: column; }
.rankitem { display: flex; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.rankitem:last-child { border-bottom: 0; }
.rankitem .num { font-size: 1.5rem; min-width: 1.6ch; }
.rankitem__t { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.22; color: var(--ink); transition: color .18s; }
.rankitem:hover .rankitem__t { color: var(--amber-deep); }
.rankitem__thumb { flex: 0 0 auto; width: 76px; height: 60px; border-radius: var(--r-sm); object-fit: cover; }

/* play icon for video cards */
.artcard__play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.artcard__play span { width: 54px; height: 54px; border-radius: 999px; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: var(--sh-md); transition: transform .2s; }
.artcard:hover .artcard__play span { transform: scale(1.1); }
.artcard__play svg { width: 22px; height: 22px; color: var(--ink); margin-left: 3px; }

/* classified card */
.classified { display: flex; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; box-shadow: var(--sh-sm); transition: box-shadow .2s, border-color .2s, transform .15s; }
.classified:hover { box-shadow: var(--sh-md); border-color: var(--border-2); transform: translateY(-2px); }
.classified__media { flex: 0 0 140px; height: 110px; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-mute); }
.classified__media img { width: 100%; height: 100%; object-fit: cover; }
.classified__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.classified__title { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
.classified__price { font-family: var(--display); font-weight: 700; color: var(--amber-deep); font-size: 1.15rem; }
.classified.is-featured { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-soft), var(--sh-sm); }
@media (max-width: 520px){ .classified { flex-direction: column; } .classified__media { flex-basis: auto; width: 100%; height: 180px; } }

/* event card */
.eventcard { display: flex; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; box-shadow: var(--sh-sm); transition: box-shadow .2s, transform .15s; cursor: pointer; align-items: stretch; }
.eventcard:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.datechip { flex: 0 0 auto; width: 66px; border-radius: var(--r-sm); background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem 0; text-align: center; }
.datechip__d { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--amber); }
.datechip__m { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: .2rem; }
.datechip__w { font-size: .64rem; color: var(--on-ink-mut); margin-top: .15rem; }
.eventcard__body { display: flex; flex-direction: column; gap: .35rem; }
.eventcard__title { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }

/* ----------------------------------------------------------------- *
 * 11. SIDEBAR BOXES
 * ----------------------------------------------------------------- */
.box { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; }
.box + .box { margin-top: 1.2rem; }
.box__head { display: flex; align-items: center; gap: .55rem; background: var(--ink); color: #fff; padding: .8rem 1.05rem; font-family: var(--sans); font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.box__head .bdot { margin-left: auto; }
.box__head svg { width: 17px; height: 17px; color: var(--amber); }
.box__body { padding: 1.05rem; }
.box__body--flush { padding: 0; }
/* Stat-card bodies: keep left-aligned to match Par mums (Reklāma's quick-stat
   cards are the only .box__body.center, so this only un-centers those three). */
.box__body.center { text-align: left; }
.box .divrow { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.05rem; border-bottom: 1px solid var(--border); }
.box .divrow:last-child { border-bottom: 0; }
.box .divrow svg { width: 18px; height: 18px; color: var(--amber-deep); flex: 0 0 auto; }
.box .divrow b { display: block; color: var(--ink); }
.box .divrow small { color: var(--muted); }

/* subscribe sidebar box */
.subbox { background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--signal); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 1.2rem; }
.subbox__kick { font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.subbox__h { font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--ink); margin: .2rem 0 .8rem; }
.subbox__opt { display: flex; align-items: baseline; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.subbox__opt:last-of-type { border-bottom: 0; }
.subbox__opt .price { font-family: var(--display); font-weight: 700; color: var(--amber-deep); }

/* generic callout */
.callout { display: flex; gap: .8rem; align-items: flex-start; background: #fffaf0; border: 1px solid var(--amber-soft); border-left: 4px solid var(--amber); border-radius: var(--r-md); padding: 1rem 1.1rem; }
.callout svg { width: 22px; height: 22px; color: var(--amber-deep); flex: 0 0 auto; }
.callout--signal { background: var(--signal-soft); border-color: #f3c2c8; border-left-color: var(--signal); }
.callout--signal svg { color: var(--signal); }
.callout b { color: var(--ink); }

/* numbered steps */
.steps { display: grid; gap: 1.1rem; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.step__n { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--signal); line-height: 1; }
.step__t { font-weight: 700; color: var(--ink); margin-bottom: .15rem; }

/* feature with icon (benefits row) */
.benefit { display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem; }
.benefit__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-deep); display: grid; place-items: center; }
.benefit__ic svg { width: 22px; height: 22px; }
.benefit__k { font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ----------------------------------------------------------------- *
 * 12. ARTICLE (single)
 * ----------------------------------------------------------------- */
.article { max-width: 760px; }
.article__title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 600; line-height: 1.08; color: var(--ink); margin: .7rem 0; }
.article__sub { font-family: var(--display); font-weight: 400; font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--text-soft); line-height: 1.4; }
.byline { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: 1.1rem 0; border-block: 1px solid var(--border); margin: 1.3rem 0; }
.byline__av { width: 46px; height: 46px; border-radius: 999px; background: var(--ink); color: var(--amber); display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.byline__who b { color: var(--ink); }
.byline__who small { display: block; color: var(--muted); font-size: .8rem; }
.byline .share { margin-left: auto; }
.share { display: inline-flex; gap: .5rem; }
.share a, .share button { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--border-2); display: grid; place-items: center; color: var(--text-soft); transition: all .18s; }
.share a:hover, .share button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.share svg { width: 17px; height: 17px; }

figure.article__figure { margin: 1.4rem 0; }
figure.article__figure img { width: 100%; border-radius: var(--r-md); }
figure.article__figure figcaption { font-size: .82rem; color: var(--muted); font-style: italic; margin-top: .5rem; }

/* prose typography (article body, policy pages) */
.prose { font-size: 1.075rem; line-height: 1.8; color: var(--text); }
.prose > * + * { margin-top: 1.15em; }
.prose p { max-width: 68ch; }
.prose h2 { font-size: 1.6rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.28rem; margin-top: 1.5em; }
.prose a { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--signal); }
.prose ul, .prose ol { max-width: 68ch; padding-left: 1.3em; display: grid; gap: .5em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 1.3em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 999px; background: var(--amber); }
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--amber-deep); font-family: var(--display); font-weight: 700; }
.prose blockquote { border-left: 4px solid var(--amber); background: var(--paper-soft); padding: 1rem 1.3rem; border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--ink); }
.prose figure img, .prose img { border-radius: var(--r-md); }
.prose figcaption { font-size: .82rem; color: var(--muted); font-style: italic; margin-top: .4rem; }
.prose hr { margin-block: 2em; }
.prose .dropcap::first-letter { font-family: var(--display); font-weight: 700; font-size: 3.6em; float: left; line-height: .8; padding: .05em .12em 0 0; color: var(--amber-deep); }

/* legal document helpers */
.legal-toc { background: var(--paper-soft); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.1rem 1.3rem; }
.legal-toc h4 { font-family: var(--sans); font-weight: 800; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.legal-toc li { margin-bottom: .4rem; }
.legal-toc a { color: var(--text-soft); font-weight: 600; }
.legal-toc a:hover { color: var(--amber-deep); }
.legal-meta { font-size: .82rem; color: var(--text-soft); }
.legal-sec h2 { counter-increment: lsec; }
.legal-sec h2::before { content: counter(lsec, decimal-leading-zero); font-family: var(--display); color: var(--amber-deep); margin-right: .5em; }
.legal-body { counter-reset: lsec; }

/* tags / author / comments */
.tagrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tagrow .tag { font-size: .8rem; font-weight: 700; color: var(--text-soft); background: var(--paper-soft); border: 1px solid var(--border); padding: .35em .7em; border-radius: 999px; }
.tagrow .tag:hover { border-color: var(--amber); color: var(--amber-deep); }

.authorbox { display: flex; gap: 1rem; background: var(--paper-soft); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.2rem; }
.authorbox__av { width: 60px; height: 60px; border-radius: 999px; background: var(--ink); color: var(--amber); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem; flex: 0 0 auto; }

.comments { margin-top: 2rem; }
.comment { display: flex; gap: .9rem; padding: 1.1rem 0; border-top: 1px solid var(--border); }
.comment--reply { margin-left: 3rem; }
.comment__av { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: 0 0 auto; background: var(--cat-sabiedriba); }
.comment__meta { font-size: .8rem; color: var(--muted); }
.comment__meta b { color: var(--ink); }
.comment__actions { display: flex; gap: 1rem; margin-top: .4rem; font-size: .8rem; font-weight: 700; }
.comment__actions button:hover { color: var(--amber-deep); }

/* ----------------------------------------------------------------- *
 * 13. TABS
 * ----------------------------------------------------------------- */
.tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--border); }
.tab { position: relative; font-family: var(--sans); font-weight: 700; font-size: .92rem; color: var(--text-soft); padding: .9em 1.2em; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color .18s, background .18s; }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); background: var(--card); }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--amber); }
.tab .count { color: var(--muted); font-weight: 600; }

/* ----------------------------------------------------------------- *
 * 14. PRICING / PLANS
 * ----------------------------------------------------------------- */
.plans { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
/* Plans collapse so 3 navy-headed cards never clip/overflow on small screens.
   1-up ≤860px (3-up is too tight below ~900px); guaranteed safe at 390px. */
@media (max-width: 860px){ .plans { grid-template-columns: 1fr; } }
.plan { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; display: flex; flex-direction: column; }
.plan__head { background: var(--ink); color: #fff; padding: 1.2rem 1.3rem; }
.plan__kick { font-weight: 800; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.plan__name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: #fff; margin-top: .2rem; }
.plan__desc { color: var(--on-ink-mut); font-size: .86rem; margin-top: .3rem; }
.plan__price { display: flex; align-items: baseline; gap: .4rem; padding: 1.1rem 1.3rem; background: var(--paper-soft); border-bottom: 1px solid var(--border); }
.plan__price b { font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--amber-deep); line-height: 1; }
.plan__price small { color: var(--muted); font-size: .82rem; }
.plan__body { padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.plan__foot { padding: 0 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.plan--feature { border: 2px solid var(--signal); box-shadow: var(--sh-lg); }
.plan__ribbon { position: absolute; top: 1.1rem; right: -2.4rem; transform: rotate(45deg); background: var(--signal); color: #fff; font-weight: 800; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem 2.6rem; box-shadow: var(--sh-sm); }
.plan--feature .plan__price b { color: var(--signal); }
/* Unavailable plan (e.g. "Drukātais" while prices aren't set) — read as
   intentional, not missing content: muted surface + de-emphasised body.
   Template adds .plan--unavailable on the card plus a "Pagaidām nav pieejams" badge. */
.plan--unavailable { background: var(--paper-soft); box-shadow: none; }
.plan--unavailable .plan__body { opacity: .72; }
.plan--unavailable .plan__price { background: var(--paper-mute); }

.featlist { display: grid; gap: .7rem; }
.featlist li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--text-soft); }
.featlist svg { width: 18px; height: 18px; color: var(--cat-sports); flex: 0 0 auto; margin-top: .1em; }
.policy-links { font-size: .76rem; color: var(--muted); }
.policy-links a { color: var(--amber-deep); text-decoration: underline; }

/* subscription manage card */
.subcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; }
.subcard.is-expired { opacity: .72; }
.subcard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--ink); color: #fff; padding: .8rem 1.1rem; }
.subcard__head .lbl { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.subcard__head svg { width: 18px; height: 18px; color: var(--amber); }
.subcard__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--border); padding: 1.1rem; }
.subcard__foot .k { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.subcard__foot .v { font-family: var(--display); font-weight: 600; color: var(--ink); }
.subcard__foot .v.amber { color: var(--amber-deep); }

/* ----------------------------------------------------------------- *
 * 15. AUTH (split layout)
 * ----------------------------------------------------------------- */
.auth { min-height: calc(100vh - 84px); display: grid; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 920px){
  .auth { grid-template-columns: 1fr; }
  /* Form first, marketing below — returning users reach the fields immediately. */
  .auth__panel { order: 1; }
  .auth__aside { order: 2; padding: clamp(1.6rem, 6vw, 2.4rem); }
}
.auth__aside { position: relative; background:
    radial-gradient(700px 320px at 24% 0%, rgba(149, 7, 0,.22), transparent 65%),
    linear-gradient(160deg, var(--ink) 0%, #0b1422 100%);
  color: #fff; padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.auth__aside::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 4px 4px; pointer-events: none; }
.auth__aside > * { position: relative; }
.auth__aside h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 1.2rem 0; }
.auth__benefits { display: grid; gap: 1rem; margin-top: 1.4rem; }
.auth__benefits li { display: flex; gap: .8rem; align-items: flex-start; }
.auth__benefits svg { width: 22px; height: 22px; color: var(--amber); flex: 0 0 auto; }
.auth__benefits b { display: block; color: #fff; }
.auth__benefits small { color: var(--on-ink-mut); }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4rem); background: var(--paper); }
.auth__card { width: 100%; max-width: 440px; }
/* Inline text links in the form card (e.g. "Atjaunot paroli?", consent links)
   must not rely on colour alone — underline + the deeper signal red for AA at
   small sizes. Buttons and the pill tabs keep their fill / no underline. */
.auth__card a:not(.btn):not(.btn-google) { color: var(--signal-deep); text-decoration: underline; text-underline-offset: 2px; }
/* Pill-style tabs are links but read as toggles — no underline, keep their state colours. */
.auth__card .auth__tabs a { text-decoration: none; color: var(--text-soft); }
.auth__card .auth__tabs a.is-active { color: #fff; }
.auth__tabs { display: flex; gap: .3rem; background: var(--paper-soft); border: 1px solid var(--border); border-radius: 999px; padding: .3rem; margin-bottom: 1.6rem; }
.auth__tabs a { flex: 1; text-align: center; font-weight: 700; font-size: .9rem; padding: .6em; border-radius: 999px; color: var(--text-soft); }
.auth__tabs a.is-active { background: var(--ink); color: #fff; }
.auth-or { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .82rem; margin: 1.2rem 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; border: 1.5px solid var(--border-2); border-radius: var(--r-md); padding: .8em; font-weight: 700; background: var(--card); transition: box-shadow .2s, border-color .2s; }
.btn-google:hover { box-shadow: var(--sh-sm); border-color: var(--ink); }
.auth-single { max-width: 540px; margin-inline: auto; }

/* ----------------------------------------------------------------- *
 * 16. UTILITIES
 * ----------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack--sm { gap: .55rem; }
.stack--lg { gap: 1.6rem; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.center { text-align: center; }
.muted { color: var(--muted); }
.amber { color: var(--amber-deep); }
.signal { color: var(--signal); }
.fw-700 { font-weight: 700; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.hide-mob { } @media (max-width: 640px){ .hide-mob { display: none !important; } }
.show-mob { display: none; } @media (max-width: 640px){ .show-mob { display: block; } }

/* Reveal entrance — gated on .js so content is NEVER hidden without JS.
   Pure-CSS on-load animation with fill-mode:both → always ends visible
   (no IntersectionObserver dependency, so nothing can get stuck hidden). */
html.js [data-reveal] { animation: rise .7s var(--ease) both; }
html.js [data-reveal].in { animation: rise .7s var(--ease) both; }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); animation: rise .6s var(--ease) forwards; }
.reveal-stagger > *:nth-child(1){ animation-delay: .05s; }
.reveal-stagger > *:nth-child(2){ animation-delay: .12s; }
.reveal-stagger > *:nth-child(3){ animation-delay: .19s; }
.reveal-stagger > *:nth-child(4){ animation-delay: .26s; }
.reveal-stagger > *:nth-child(5){ animation-delay: .33s; }
.reveal-stagger > *:nth-child(6){ animation-delay: .40s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal], [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(8,12,20,.9); padding: 4vh 4vw; }
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--r-sm); box-shadow: var(--sh-lg); }
.lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.lightbox__close:hover { background: rgba(255,255,255,.24); }

/* toast (copy link etc.) */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 110; background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 999px; box-shadow: var(--sh-lg); font-weight: 700; font-size: .88rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; display: inline-flex; align-items: center; gap: .5rem; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--amber); }

/* prototype gallery (index.html) */
.gallery-hero { background:
    radial-gradient(800px 360px at 80% -10%, rgba(149, 7, 0,.22), transparent 60%),
    linear-gradient(160deg, var(--ink), #0b1422); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.gallery-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .18s, box-shadow .2s, border-color .2s; }
.gallery-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--amber); }
.gallery-card__top { aspect-ratio: 16/10; background: linear-gradient(160deg, var(--ink-3), var(--ink)); position: relative; display: grid; place-items: center; color: var(--amber); }
.gallery-card__top svg { width: 40px; height: 40px; opacity: .85; }
.gallery-card__b { padding: .9rem 1rem; }
.gallery-card__b b { display: block; color: var(--ink); font-family: var(--display); font-weight: 600; }
.gallery-card__b small { color: var(--muted); font-size: .78rem; }
.gallery-group { font-family: var(--sans); font-weight: 800; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-deep); margin: 2rem 0 1rem; display: flex; align-items: center; gap: .7rem; }
.gallery-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* =====================================================================
   LIGHT THEME — gaišāka palete (v2)
   Gaišs hroms (topbar/masthead/nav/ticker/footer), gaišas kartiņu galvas,
   gaiši pelēki reklāmas bloki. Tumšie akcenti paliek tikai dažviet
   (CTA joslas .section--ink, pieslēgšanās sānu panelis .auth__aside,
   mobilā izvēlne .drawer). Selektori ar vienādu specifiku pārraksta
   iepriekšējos pēc avota secības.
   ===================================================================== */
:root {
  --chrome:      #ffffff;   /* baltais hroms              */
  --chrome-soft: #f4f1ea;   /* topbar / ticker / footer   */
  --chrome-line: #e6dfd0;   /* malas uz gaišā hroma       */
  --head-soft:   #f3efe6;   /* gaišas kartiņu/planu galvas*/
  --ad-grey:     #edeef1;   /* reklāmas bloki — gaiši pelēki */
  --ad-grey-bd:  #e0e3e7;
}

/* — Augšējā josla — */
.topbar { background: var(--chrome-soft); color: var(--text-soft); border-bottom: 1px solid var(--chrome-line); }
/* Account / E-avīze links are the only actions in the strip — give them a clear
   resting affordance (weight + amber-deep + underline) vs the static date/weather. */
.topbar a { color: var(--amber-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.topbar a:hover { color: var(--amber-deep); text-decoration-thickness: 2px; }
/* Social icon links stay icon-only (no underline / inherited weight). */
.topbar .socials a { color: var(--text-soft); font-weight: 600; text-decoration: none; }
.topbar .sep { background: var(--border-2); }
.topbar .weather { color: var(--ink); }
.topbar .socials a:hover { background: rgba(14,26,43,.06); }

/* — Masthead (balts ar smalku dzintara mirdzumu) — */
.masthead { background:
    radial-gradient(560px 200px at 16% -70%, rgba(149, 7, 0,.14), transparent 70%),
    var(--chrome);
  border-bottom: 1px solid var(--chrome-line); }
.masthead::after { display: none; }
.brand__name { color: var(--ink); }
.brand__tag  { color: var(--muted); }
.masthead__actions .icon-btn { color: var(--ink); }
.masthead__actions .icon-btn:hover { background: var(--paper-soft); }
.masthead .vsep { background: var(--border-2); }
.login-link { color: var(--ink); }
.login-link:hover { color: var(--amber-deep); }
.hamburger { color: var(--ink); }

/* — Kategoriju navigācija (balta + dzintara apakšmala) — */
.mainnav { background: var(--chrome); border-bottom: 2px solid var(--amber); }
.mainnav a { color: var(--text); }
.mainnav a:hover, .mainnav a.is-active { color: var(--amber-deep); }
.mainnav a.is-util { color: var(--muted); }

/* — Aktuālo ziņu lente (gaiša) — */
.ticker { background: var(--chrome-soft); color: var(--text); border-bottom: 1px solid var(--chrome-line); }
.ticker__move a { color: var(--text-soft); }
.ticker__move a:hover { color: var(--amber-deep); }

/* — Kājene (gaiša) — */
.footer { background: var(--chrome-soft); color: var(--text-soft); }
.footer h4 { color: var(--ink); }
.footer a { color: var(--text-soft); }
.footer a:hover { color: var(--amber-deep); }
.footer__col p { color: var(--text-soft); }
.footer .socials a { border-color: var(--chrome-line); color: var(--text-soft); }
.footer .socials a:hover { border-color: var(--amber); color: var(--amber-deep); }
.footer .store { border-color: var(--chrome-line); color: var(--text-soft); }
.footer .store:hover { border-color: var(--amber); }
.footer__bottom { border-top-color: var(--chrome-line); }

/* — Gaišas kartiņu / planu / abonementu galvas — */
.box__head { background: var(--head-soft); color: var(--ink); border-bottom: 1px solid var(--border); }
.box__head svg { color: var(--amber-deep); }
.plan__head { background: var(--head-soft); color: var(--ink); border-bottom: 1px solid var(--border); }
.plan__kick { color: var(--amber-deep); }
.plan__name { color: var(--ink); }
.plan__desc { color: var(--muted); }
.subcard__head { background: var(--head-soft); color: var(--ink); border-bottom: 1px solid var(--border); }
.subcard__head svg { color: var(--amber-deep); }

/* — Datuma plāksnīte (gaiša) — */
.datechip { background: var(--head-soft); border: 1px solid var(--border); }
.datechip__d { color: var(--signal); }
.datechip__m { color: var(--ink); }
.datechip__w { color: var(--muted); }

/* — Lipīgā cenas josla (gaiša) — */
.formbar { background: var(--card); color: var(--ink); border: 1px solid var(--border-2); border-top: 3px solid var(--amber); }
.formbar__price { color: var(--amber-deep); }
.formbar__price small { color: var(--muted); }

/* — Reklāmas bloki: vienkārši gaiši pelēki — */
.adslot { background: var(--ad-grey); border: 1px solid var(--ad-grey-bd); color: #97a0ab; }
.adslot span { opacity: 1; }

/* =====================================================================
   RED PRIMARY (v3) — galvenā krāsa sarkana (kā vaduguns.lv) + īstais logo.
   Pārdefinē akcenta marķierus uz sarkanu: visi bijušie dzintara akcenti
   (joslas, pogas, saites, ikonas, nav, datumi) kļūst sarkani.
   ===================================================================== */
:root {
  --primary:      #950700;
  --primary-deep: #6e0500;
  --amber:        #950700;   /* akcents tagad sarkans */
  --amber-deep:   #6e0500;
  --amber-soft:   #f6e3e0;
  --amber-glow:   rgba(149, 7, 0,.36);
  --ring:         rgba(149, 7, 0,.5);
}
/* primārā poga — sarkana ar baltu tekstu */
.btn--amber { --btn-bg: var(--amber); --btn-fg: #fff; --btn-bd: var(--amber); }
.btn--amber:hover { background: var(--amber-deep); box-shadow: var(--sh-md); }
.callout { background: #fff5f6; }

/* īstais logo (melns wordmark uz gaišā masthead) */
.brand__logo { height: 54px; width: auto; display: block; }
@media (max-width: 860px){ .brand__logo { height: 42px; } }

/* ====================================================================
   PASŪTĪTĀJA REVĪZIJA (2026-06-16)
   Pievienots pēdējais = augstākā prioritāte. Mērķi:
   • precīzā vecā portāla sarkanā krāsa #950700 — VISUR
   • pamanāmāks logo, novietots pa vidu
   • tumši sarkana izvēlne ar baltiem burtiem
   • abonēšanas bloks izceļas ar sarkanu
   • izceltas darbības, ar kurām redakcija pelna (abonements, e-avīze,
     sludinājumi, reklāma)
   ==================================================================== */

/* — #5: precīzā vecā sarkanā #950700 visos akcentu tokenos — */
:root {
  --signal:      #950700;  --signal-deep: #6e0500;  --signal-soft: #f6e3e0;
  --primary:     #950700;  --primary-deep:#6e0500;
  --amber:       #950700;  --amber-deep:  #6e0500;  --amber-soft:  #f6e3e0;
  --amber-glow:  rgba(149,7,0,.30);
  --ring:        rgba(149,7,0,.50);
}

/* — #1: logo pa vidu un pamanāmāks (3 kolonnu masthead) — */
.masthead__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 100px; }
.masthead__side--l { display: flex; align-items: center; gap: .35rem; justify-self: start; }
.brand { grid-column: 2; justify-self: center; gap: 0; }
.brand__logo { height: 76px; }
.masthead__actions { grid-column: 3; justify-self: end; }
@media (max-width: 860px){
  .masthead__in { min-height: 70px; }
  .brand__logo { height: 46px; }
}

/* — #2: tumši sarkana izvēlne ar baltiem burtiem — */
.mainnav { background: var(--primary); border-bottom: 3px solid var(--primary-deep); }
.mainnav a { color: #fff; }
.mainnav a.is-util { color: rgba(255,255,255,.80); }
.mainnav a:hover, .mainnav a.is-active { color: #fff; background: rgba(255,255,255,.12); }
.mainnav a::after { background: #fff; }

/* — #3: abonēšanas bloks — pilns sarkans, izceļas — */
.subbox { background: var(--primary); border: 0; color: #fff; box-shadow: 0 16px 34px rgba(149,7,0,.30); }
.subbox__kick { color: rgba(255,255,255,.82); }
.subbox__h { color: #fff; }
.subbox__opt { border-bottom-color: rgba(255,255,255,.24); }
.subbox__opt .price { color: #fff; }
.subbox .btn--amber, .subbox .btn--signal, .subbox .btn--ink { background: #fff; color: var(--primary); border-color: #fff; }
.subbox .btn--amber:hover, .subbox .btn--signal:hover, .subbox .btn--ink:hover { background: #ffe9e6; color: var(--primary-deep); }

/* — #4: izceltas ieņēmumu darbības galvenē (E-avīze blakus Abonē) — */
.masthead__actions .login-link.eavize { border: 1.6px solid var(--primary); color: var(--primary); border-radius: 999px; padding: .5em .9em; font-weight: 800; }
.masthead__actions .login-link.eavize:hover { background: var(--primary); color: #fff; }
/* izvēlnes ieņēmumu saites (Afiša/Sludinājumi) izceltas, nevis pieklusinātas */
.mainnav a.is-util { font-weight: 800; }
.mainnav a[href*="sludinajumi"] { color: #fff; }