/* Stratum — components.
   Cards, buttons, widgets, forms and the small pieces shared across templates.
   Card style variants are set on the body by inc/setup.php, so a card never
   needs to know which style is active. */

/* ------------------------------------------------------------------- cards */

.stx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--stx-radius);
  background: var(--stx-plane1);
  border: 1px solid var(--stx-hairline);
  overflow: clip;
}

.stx-card[data-plane="2"] { background: var(--stx-plane2); }
.stx-card[data-plane="3"] { background: var(--stx-plane3); }

.stx-card__link { display: block; }

.stx-card__media { aspect-ratio: 3 / 2; overflow: clip; background: var(--stx-plane3); }
.stx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.stx-card:hover .stx-card__media img { transform: scale(1.03); }

/* A card without a featured image gets a monogram plate rather than a grey
   rectangle, so mixed archives keep an even rhythm. */
.stx-card__media--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--stx-z5) 22%, transparent), transparent 60%),
    var(--stx-plane3);
}

.stx-card__glyph {
  font-family: var(--stx-font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--stx-fg) 22%, transparent);
  text-transform: uppercase;
}

.stx-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .1rem; }

.stx-card__title { font-size: var(--stx-fs-lg); margin: 0 0 .45rem; line-height: 1.12; }
.stx-card__title a { text-decoration: none; }
.stx-card__title a:hover { color: var(--stx-z1); }

.stx-card__excerpt { color: var(--stx-fg-mid); font-size: var(--stx-fs-sm); margin: 0 0 .7rem; }

/* Row cards sit beside a lead, so they run horizontally and drop the excerpt.
   The media takes a fixed width and stretches to the card's height; giving it
   both an aspect ratio and a full height let it compute wider than its own
   column, which is what pushed the text out of alignment between cards. */
.stx-card--row { flex-direction: row; align-items: stretch; }
.stx-card--row .stx-card__link { flex: 0 0 8.5rem; display: block; }
.stx-card--row .stx-card__media { aspect-ratio: auto; width: 100%; height: 100%; min-height: 100%; }
.stx-card--row .stx-card__media img { height: 100%; }
.stx-card--row .stx-card__title { font-size: var(--stx-fs-md); }
.stx-card--row .stx-card__body { padding: .85rem 1rem; justify-content: center; }

.stx-card--lead .stx-card__media { aspect-ratio: 16 / 9; }
.stx-card--lead .stx-card__title { font-size: clamp(var(--stx-fs-xl), 3vw, var(--stx-fs-2xl)); }
.stx-card--lead .stx-card__body { padding: clamp(1rem, 2.2vw, 1.6rem); }

.stx-card--wide { flex-direction: row; }
.stx-card--wide .stx-card__link { flex: 0 0 40%; }
.stx-card--wide .stx-card__media { height: 100%; aspect-ratio: auto; min-height: 12rem; }

@media (max-width: 40rem) {
  .stx-card--wide { flex-direction: column; }
  .stx-card--wide .stx-card__media { min-height: 0; aspect-ratio: 3 / 2; }
}

/* Card style variants. */

.stx-card-hairline .stx-card { background: transparent; }
.stx-card-hairline .stx-card__body { padding-inline: 0; }

.stx-card-bare .stx-card { background: transparent; border: 0; border-radius: 0; }
.stx-card-bare .stx-card__body { padding: .9rem 0 0; }
.stx-card-bare .stx-card__media { border-radius: var(--stx-radius); }

/* Cutout: the image sits proud of the plate, which is the one place the theme
   lets an element break its container. */
.stx-card-cutout .stx-card { overflow: visible; background: transparent; border: 0; }
.stx-card-cutout .stx-card__media { border-radius: var(--stx-radius); box-shadow: var(--stx-elev-2); }
.stx-card-cutout .stx-card__body {
  margin: -1.6rem .8rem 0;
  background: var(--stx-plane1);
  border: 1px solid var(--stx-hairline);
  border-radius: var(--stx-radius);
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- spotlight */

.stx-spot { position: relative; display: grid; }

.stx-spot__media { grid-area: 1 / 1; aspect-ratio: 21 / 9; border-radius: var(--stx-radius); overflow: clip; }
.stx-spot__media img { width: 100%; height: 100%; object-fit: cover; }

.stx-spot__body {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  max-width: min(100%, 34rem);
  margin: clamp(.8rem, 2vw, 1.6rem);
  padding: clamp(1rem, 2.2vw, 1.6rem);
  border-radius: var(--stx-radius);
  background: color-mix(in srgb, var(--stx-plane1) 88%, transparent);
  border: 1px solid var(--stx-rim);
  backdrop-filter: blur(14px);
}

.stx-spot__title { font-size: clamp(var(--stx-fs-lg), 3vw, var(--stx-fs-2xl)); margin: 0 0 .4rem; }
.stx-spot__title a { text-decoration: none; }
.stx-spot__excerpt { color: var(--stx-fg-mid); font-size: var(--stx-fs-sm); }

/* ----------------------------------------------------------------- buttons */

.stx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .62rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--stx-radius-sm);
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.stx-btn--primary { background: var(--stx-z1); color: var(--stx-substrate); }
.stx-btn--primary:hover { background: var(--stx-z3); transform: translateY(-1px); }

.stx-btn--ghost { border-color: var(--stx-rim); color: var(--stx-fg-mid); background: transparent; }
.stx-btn--ghost:hover { border-color: var(--stx-z1); color: var(--stx-z1); }

.stx-icon {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: var(--stx-radius-sm);
  border: 1px solid var(--stx-hairline);
  background: color-mix(in srgb, var(--stx-plane2) 70%, transparent);
  color: var(--stx-fg-mid);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.stx-icon:hover { color: var(--stx-z1); border-color: var(--stx-z1); }

@media (min-width: 60rem) { .stx-icon--menu { display: none; } }

/* ------------------------------------------------------------------ search */

.stx-search { display: flex; gap: .5rem; }

.stx-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .7rem .9rem;
  border-radius: var(--stx-radius-sm);
  border: 1px solid var(--stx-rim);
  background: var(--stx-plane3);
  color: var(--stx-fg);
}

.stx-search__input::placeholder { color: var(--stx-fg-dim); }

.stx-search__submit {
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: var(--stx-radius-sm);
  background: var(--stx-z1);
  color: var(--stx-substrate);
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
}

/* ----------------------------------------------------------------- widgets */

.stx-widget { border-radius: var(--stx-radius); border: 1px solid var(--stx-hairline); }
.stx-widget__body { padding: 1.1rem; }

.stx-widget__title {
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--stx-z5);
  margin: 0 0 .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--stx-hairline);
}

.stx-widget ul,
.stx-widget ol { list-style: none; margin: 0; padding: 0; }

.stx-storylist { display: flex; flex-direction: column; gap: .85rem; }

.stx-storylist__item { display: flex; gap: .7rem; align-items: flex-start; }

.stx-storylist__rank {
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-sm);
  color: var(--stx-z5);
  font-variant-numeric: tabular-nums;
  padding-top: .1rem;
}

.stx-storylist__media { flex: 0 0 3.6rem; border-radius: var(--stx-radius-sm); overflow: clip; aspect-ratio: 3 / 2; }

.stx-storylist__title { display: block; text-decoration: none; font-family: var(--stx-font-display); font-weight: 600; font-size: var(--stx-fs-sm); line-height: 1.25; }
.stx-storylist__title:hover { color: var(--stx-z1); }

.stx-storylist__meta { display: block; font-family: var(--stx-font-utility); font-size: calc(var(--stx-fs-xs) * .92); color: var(--stx-fg-dim); margin-top: .2rem; }

.stx-sectionlist { display: flex; flex-direction: column; }

.stx-sectionlist__link {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--stx-hairline);
  text-decoration: none;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.stx-sectionlist li:last-child .stx-sectionlist__link { border-bottom: 0; }
.stx-sectionlist__link:hover { color: var(--stx-z1); }
.stx-sectionlist__count { color: var(--stx-fg-dim); font-variant-numeric: tabular-nums; }

.stx-panel { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.stx-panel__text { margin: 0; color: var(--stx-fg-mid); font-size: var(--stx-fs-sm); }

.stx-authorcard { display: flex; gap: .8rem; align-items: flex-start; }
.stx-authorcard__avatar { border-radius: 999px; }
.stx-authorcard__name { font-family: var(--stx-font-display); font-weight: 700; text-decoration: none; }
.stx-authorcard__bio { margin: .3rem 0 0; font-size: var(--stx-fs-sm); color: var(--stx-fg-mid); }

.stx-deflist { margin: 0; }
.stx-deflist__term { font-family: var(--stx-font-utility); font-size: var(--stx-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--stx-z5); margin-top: .8rem; }
.stx-deflist__term:first-child { margin-top: 0; }
.stx-deflist__def { margin: .2rem 0 0; font-size: var(--stx-fs-sm); color: var(--stx-fg-mid); }

/* -------------------------------------------------------------------- slot */

.stx-slot { min-height: 1px; }

/* ------------------------------------------------------------------- delta */

.stx-delta {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  font-variant-numeric: tabular-nums;
}

.stx-delta--up { color: var(--stx-up); }
.stx-delta--down { color: var(--stx-down); }
.stx-delta__label { color: var(--stx-fg-mid); }

/* -------------------------------------------------------------- pagination */

.stx-pagination { margin-top: clamp(1.6rem, 4vw, 2.6rem); }

.stx-pagination__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.stx-pagination a,
.stx-pagination span {
  display: inline-grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding-inline: .7rem;
  border-radius: var(--stx-radius-sm);
  border: 1px solid var(--stx-hairline);
  font-family: var(--stx-font-utility);
  font-size: var(--stx-fs-xs);
  text-decoration: none;
}

.stx-pagination .current { background: var(--stx-z1); color: var(--stx-substrate); border-color: transparent; }
.stx-pagination a:hover { border-color: var(--stx-z1); color: var(--stx-z1); }