/* ──────────────────────────────────────────────────────────────
   Organizers › Use Cases — Haus Vajbz. One sheet for
   templates/organizers/use_cases.html (the listing) and
   use_case_detail.html, on top of hv/organizers.css. Listing: red hero,
   ruled cards with a square icon tile (the .hvc idea from theme.css:
   tile, title over a rule, → at the foot, title turns red on hover),
   ink CTA. Detail: paper hero with the mono breadcrumb, copy | tile
   splits (every second one flipped here with :nth-child(even of .ou-sec),
   so the template loop stays untouched), the highlights as ruled cells
   with square icon tiles, ink CTA.

   The view (core/views/organizers.py USE_CASES) tags every tile with one
   of seven fic-* classes. They no longer pick a colour: each maps to an
   HV surface treatment so the tiles alternate red / ink / ruled paper
   instead of a rainbow (the full set, none missed):

     fic-amber   red tile, paper icon
     fic-purple  deep-red tile, paper icon
     fic-green   ink tile, paper icon
     fic-teal    graphite (ink-2) tile, paper icon
     fic-blue    paper-2 tile on an ink rule, red icon
     fic-slate   paper-2 tile on an ink rule, ink icon
     fic-rose    paper-3 tile, red icon

   Mobile first; ≥768 two columns, ≥1100 three. Tokens only: radius 0,
   no shadows, no gradients, rules instead of boxes.
   ────────────────────────────────────────────────────────────── */

/* ── Tile: the square that holds the FontAwesome glyph ───────── */
.ou-tile {
  position: relative; aspect-ratio: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ou-tile i { font-size: clamp(3rem, 18vw, 4.6rem); line-height: 1; transition: transform var(--dur) var(--ease); }
/* the mono mark in the tile's corner: the deck's "tag on a photo" */
.ou-tile::before {
  content: '→'; position: absolute; top: 0.6rem; left: 0.75rem;
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1; opacity: 0.7;
}
.ou-tile.fic-amber  { background: var(--red);      color: var(--paper); }
.ou-tile.fic-purple { background: var(--red-deep); color: var(--paper); }
.ou-tile.fic-green  { background: var(--ink);      color: var(--paper); }
.ou-tile.fic-teal   { background: var(--ink-2);    color: var(--paper); }
.ou-tile.fic-blue   { background: var(--paper-2);  color: var(--red); border-color: var(--ink); }
.ou-tile.fic-slate  { background: var(--paper-2);  color: var(--ink); border-color: var(--ink); }
.ou-tile.fic-rose   { background: var(--paper-3);  color: var(--red); }

/* ── Listing hero: the red band, one long title ──────────────── */
.ou-hero__title { font-size: clamp(2.1rem, 8.6vw, 4.8rem); max-width: 16ch; }

/* ── Card grid: rules instead of boxes ───────────────────────── */
.ou-grid { display: grid; gap: 1.6rem var(--gutter); padding-block: 2rem 0.6rem; }
.ou-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; }
.ou-card__body { display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.75rem; flex: 1; }
.ou-card__title {
  font-size: 1.15rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease);
}
.ou-card__desc { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }
.ou-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.3rem; color: var(--red); }
.ou-card__more i { font-size: 0.7rem; transition: transform var(--dur) var(--ease); }
.ou-card:hover .ou-card__title, .ou-card:focus-visible .ou-card__title { color: var(--red); }
.ou-card:hover .ou-card__more i { transform: translateX(3px); }
.ou-card:hover .ou-tile i { transform: scale(1.06); }
.ou-card:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ── Detail hero: breadcrumb over the kicker ─────────────────── */
.ou-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 -0.6rem; }
.ou-crumb a { color: var(--red); text-decoration: none; }
.ou-crumb a:hover, .ou-crumb a:focus-visible { text-decoration: underline; outline: none; }
.ou-crumb i { font-size: 0.55rem; color: var(--text-muted); }
.ou-crumb span { color: var(--text-muted); }
.ou-head__label { color: var(--red); }

/* ── Sections: copy | tile, on a rule ────────────────────────── */
.ou-sec { padding-block: 2.4rem 0; }
.ou-sec > .org-split { padding-top: 2.4rem; border-top: 1px solid var(--line); }
.ou-sec:first-of-type > .org-split { border-top: 0; padding-top: 0; }
.ou-sec__label { color: var(--red); }
.ou-sec__visual { display: flex; justify-content: center; min-width: 0; }
.ou-tile--lg { max-width: 320px; }
.ou-tile--lg i { font-size: clamp(4rem, 22vw, 6rem); }

/* ── Highlights: ruled cells, alternating red / ink tiles ────── */
.ou-highlights { padding-top: 3rem; }
.ou-highlights .org-sec__head { padding-bottom: 1rem; }
.ou-highlight { align-items: flex-start; }
.ou-highlight:nth-child(even) .ou-highlight__icon { background: var(--ink); }
.ou-highlight .org-cell__title { font-size: 1.05rem; padding-top: 0.2rem; }

/* ── CTA on ink: the red button keeps its colour ─────────────── */
.ou-cta .hv-btn i { font-size: 0.85em; }

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .ou-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem var(--gutter); padding-block: 2.8rem 1rem; }
  .ou-tile i { font-size: clamp(3.2rem, 7vw, 4.6rem); }
  .ou-tile--lg { max-width: 360px; }
  .ou-tile--lg i { font-size: clamp(4.4rem, 9vw, 6.4rem); }
  .ou-sec { padding-block: 3rem 0; }
  .ou-sec > .org-split { padding-top: 3rem; }
  /* the old :nth-child(even) row-reverse: tile left, copy right on every second section */
  .ou-sec:nth-child(even of .ou-sec) > .org-split > :first-child { order: 2; }
  .ou-highlights { padding-top: 4rem; }
  .ou-crumb { margin-bottom: -0.4rem; }
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .ou-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem calc(var(--gutter) * 0.75); }
  .ou-tile--lg { max-width: 400px; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ou-tile i, .ou-card__more i, .ou-card__title { transition: none; }
}