/* SATC shared theme components.
   Pages compose these classes in their markup instead of styling their own
   headings, kickers, descriptions and buttons. Font sizes come from the fluid
   scale in typography.css; text colors follow the surface rules in
   brand-2026.css. This file owns structure, spacing, decoration and buttons. */

/* Spacing between a kicker and the title under it, site-wide. */
:root{--satc-kicker-gap:5px}

/* Section head: kicker + title + description, optionally beside an action. */
.satc-section-head{margin-bottom:clamp(28px,3vw,42px)}
.satc-section-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.satc-section-head--split>:first-child{flex:1 1 420px;max-width:760px}

.satc-kicker{display:flex;align-items:center;gap:12px;width:fit-content;margin:0 0 var(--satc-kicker-gap)}
.satc-kicker::before{content:"";flex:0 0 32px;height:1px;background:currentColor}
.satc-kicker:has(>i)::before{display:none}
.satc-kicker>i{color:var(--satc-gold)}

.satc-title{margin:0}
.satc-title>span{color:var(--satc-wild-hillside)}

.satc-desc{max-width:68ch;margin-bottom:0}

.satc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.satc-actions--center{justify-content:center}

/* Buttons: one geometry, two variants. Each variant only swaps the three
   color variables, so a context (like .satc-on-dark) can retune them. */
.satc-btn{
  --satc-btn-bg:transparent;
  --satc-btn-line:currentColor;
  --satc-btn-fg:inherit;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:var(--btn-py) var(--btn-px);
  border:1px solid var(--satc-btn-line);
  border-radius:var(--radius-control);
  background:var(--satc-btn-bg);
  color:var(--satc-btn-fg);
  -webkit-text-fill-color:currentColor;
  font-weight:var(--btn-weight);
  line-height:1.45;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease;
}
.satc-btn:hover,.satc-btn:focus-visible{transform:translateY(var(--btn-lift))}

.satc-btn--solid{--satc-btn-bg:var(--btn-bg);--satc-btn-line:var(--btn-bg);--satc-btn-fg:var(--btn-fg)}
.satc-btn--solid:hover,.satc-btn--solid:focus-visible{--satc-btn-bg:var(--btn-bg-hover);--satc-btn-line:var(--btn-bg-hover)}

.satc-btn--outline{--satc-btn-line:var(--btn2-line);--satc-btn-fg:var(--btn2-fg)}
.satc-btn--outline:hover,.satc-btn--outline:focus-visible{--satc-btn-bg:var(--btn2-fill-hover);--satc-btn-line:var(--btn2-fill-hover);--satc-btn-fg:var(--satc-white)}

/* `translate` (not `transform`) so the nudge composes with the LTR arrow
   mirror that localization.css applies through `transform`. */
.satc-btn :is(.fa-arrow-left,.fa-arrow-right){transition:translate var(--motion-fast) ease}
.satc-btn:hover .fa-arrow-left{translate:-4px 0}
[dir=ltr] .satc-btn:hover .fa-arrow-left{translate:4px 0}

/* Dark context: any section on a dark color or photograph. */
.satc-on-dark .satc-btn--outline{--satc-btn-bg:rgb(57 39 30 / 22%);--satc-btn-line:var(--btn2d-line);--satc-btn-fg:var(--btn2d-fg)}
.satc-on-dark .satc-btn--outline:hover,.satc-on-dark .satc-btn--outline:focus-visible{--satc-btn-bg:var(--btn2d-fill-hover);--satc-btn-line:var(--btn2d-fill-hover);--satc-btn-fg:var(--btn2d-fg-hover)}

/* Image, badge and logo links: Bootstrap's link underline must not reach
   their badges, numbers or image alt text. */
:is(.project-media,.related-project-media,.article-card-media,.card-media,.news-media,.footer-logo,.footer-social>a){text-decoration:none}

/* Card titles stop at two lines with an ellipsis, so cards in one row keep
   the same rhythm whatever the title length. */
:is(.news-card,.article-card,.project-card,.archive-project-card,.related-project-card) :is(h2,h3){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* Project and news titles stand apart from their description: bold, in the
   dark Wild Hillside brown (description copy stays Root Brew), and filling
   each line instead of the balanced wrap used for large headings. The
   surface class lifts this above the older per-page card title rules. */
.shared-layout main :is(.news-card,.article-card,.project-card,.archive-project-card,.related-project-card).satc-surface :is(h2,h3),
.shared-layout main :is(.news-card,.article-card,.project-card,.archive-project-card,.related-project-card).satc-surface :is(h2,h3) a{font-weight:700;color:var(--satc-wild-hillside);-webkit-text-fill-color:var(--satc-wild-hillside);text-wrap:wrap}