/* ---------- Aktuelt: filter pills + news rows ---------- */

/* Fjerner den grønne hero-gradienten for selve ENKELTARTIKKELEN (single.php,
   ikke Aktuelt-lista - der skal den grønne fargen fortsatt være med) - der
   ligger hele brødteksten (the_content()) inni samme .sb-hero-seksjon som
   tittelen, så gradienten løp rett gjennom artikkelteksten (bruker-
   forespørsel 2026-08-29). single.php har ingen page-template-klasse (det er
   et innlegg, ikke en Side) - "single-post" er WordPress sin egen, faste
   klasse for alle enkeltinnlegg, se body_class() på en artikkel. */
.single-post .sb-hero { background: var(--color-bg); }

.sb-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }

.sb-news-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(43,42,38,0.16); }

.sb-news-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-muted); }

.sb-news-tag {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 20px;
    padding: 2px 9px;
    width: fit-content;
}

.sb-news-title { font-weight: 600; margin: 0 0 3px; }
.sb-news-excerpt { margin: 0; color: var(--color-link); font-size: 0.92rem; }

.sb-example-pill {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--color-accent);
    color: #FFFFFF;
    width: fit-content;
}

@media (min-width: 681px) {
    .sb-news-row { display: grid; grid-template-columns: 120px 110px 1fr 110px; gap: 18px; align-items: baseline; }
}

/* ---------- Rovdyr: observasjonslogg ---------- */
.sb-log-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(43,42,38,0.16); }

@media (min-width: 681px) {
    .sb-log-row { display: grid; grid-template-columns: 110px 150px 1fr 130px; gap: 16px; align-items: baseline; }
}

/* ---------- Beiteområdet: key points ---------- */
.sb-keypoint-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(43,42,38,0.16); }
.sb-keypoint-row:last-child { border-bottom: 1px solid rgba(43,42,38,0.16); }

@media (min-width: 681px) {
    .sb-keypoint-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
}

/* ---------- Beiteområdet: aggregate NIBIO stats grid ---------- */
/* 6 boxes now that sau/lam are shown separately - 3 columns gives two even rows
   instead of a lopsided 4+2 split at 4 columns. */
.sb-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0; }
@media (min-width: 681px) { .sb-stats-grid { grid-template-columns: repeat(3, 1fr); } }

/* 4-box variant (Sunndal Sau og Geit's medlemmer/besetninger stats) - a plain 4
   columns fits without the lopsided-split problem the 6-box grid above has. */
@media (min-width: 681px) { .sb-stats-grid--four { grid-template-columns: repeat(4, 1fr); } }

.sb-stat-box { background: #FFFFFF; border-radius: 6px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(43,42,38,0.08); }
.sb-stat-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--color-deep); line-height: 1; }
.sb-stat-label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-top: 6px; }

/* ---------- Simple (single-column, no icon) CTA box variant ---------- */
/* used on Beiteomradet/Rovdyr closing CTAs, vs. the front page's icon+2-col banner */
@media (min-width: 681px) {
    .sb-cta-box--simple { display: block; }
}

/* ---------- Om beitelaget: alternating section backgrounds ---------- */
.sb-section-alt { background: var(--color-bg-alt); border-top: 1px solid rgba(43,42,38,0.14); border-bottom: 1px solid rgba(43,42,38,0.14); }

/* ---------- For medlemmer: skjema-oversikt + tydelig avgrensede skjemaer ---------- */
/* IKKE sticky - .sb-site-header (layout.css) er allerede sticky med top:0 og
   en mye høyere z-index, så et forsøk på å gjøre denne sticky også kolliderte
   rett med den mens man scrollet (så ut som et rotete overlapp) i stedet for
   å legge seg pent under. Selve poenget - hoppe rett til et skjema uten å
   scrolle forbi de andre - virker uansett via lenkene sine #anker, det er
   bare selve menylinjen som ikke blir stående synlig lenger nede på siden. */
.sb-medlem-nav {
    background: var(--color-bg);
    border-bottom: 1px solid rgba(43,42,38,0.14);
    padding: 14px 16px;
}
.sb-medlem-nav .sb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sb-medlem-nav-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}
.sb-medlem-nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-medlem-nav-links .sb-pill { text-decoration: none; }

/* Selve skjema-boksen - egen bakgrunn/kant/skygge rundt HVERT skjema, slik
   at det er helt tydelig hvor ett skjema slutter og et eventuelt neste
   begynner, i stedet for at CF7-feltene bare fulgte rett etter hverandre på
   en ellers ensfarget seksjonsbakgrunn. Ingen hover-løft (ulikt .sb-card) -
   dette er noe man skal skrive i, ikke klikke på som en lenke. */
.sb-medlem-form-box {
    background: #FFFFFF;
    border: 1px solid rgba(43,42,38,0.14);
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(43,42,38,0.08);
}
.sb-section-alt .sb-medlem-form-box { background: var(--color-bg); }

/* Ankerpunktene (#sesongrapport osv.) skal ikke havne skjult under
   .sb-site-header (layout.css), som ER sticky med top:0 - samme
   "scroll-margin"-teknikk som løser dette problemet i alle moderne
   nettlesere uten JavaScript. 130px dekker headeren sin faktiske høyde med
   litt margin på begge trinn (mobil: 12px+58px logo+12px ≈ 82px; desktop:
   16px+82px logo+16px ≈ 114px). */
.sb-medlem-form-box, section[id] { scroll-margin-top: 130px; }