/* ============================================================
   THEME 13 — polish.css  (Work Agent C: videos / gallery / quote / footer)
   Linked AFTER common.css so these rules win on equal-specificity clashes.
   Every colour still derives from --t13-primary / --t13-accent / --t13-p-*
   tokens defined in common.css:57-160 — nothing hardcoded here.
   ============================================================ */

/* ---------- 1. VIDEO FILMSTRIP — edge padding ----------
   padding-inline mirrors the container's own inset math (gutter below the
   1280px breakpoint, gutter + half the leftover viewport above it) so the
   first card's left edge lines up with every other band's left edge — plus
   a flat +12px on top, since thumbnails read visually heavier than plain
   text/image grids and the client asked twice for more visible breathing
   room ("give padding from both right and left side").
   Measured before this change (1440px viewport, via CDP getBoundingClientRect):
   first card left = 120px (correct, matched the container formula) but the
   LAST card's right edge sat at x=1553 — 113px past the 1440px viewport
   itself, i.e. the "peek" from overflow:visible (kept below, §2 needs it
   for the hover lift/shadow) was eating 100% of the intended right gutter,
   so the right side had zero visible padding. clip-path reproduces
   overflow:hidden horizontally ONLY, at the same inset as padding-inline,
   while -9999px top/bottom leaves vertical hover motion (§2) completely
   unclipped — plain overflow-x:clip can't do this split: per the CSS
   overflow spec, pairing a non-visible overflow-x with a "visible"
   overflow-y silently promotes the y-axis to "auto", which would clip the
   card's hover lift/shadow too. */
.t13-videos .swiper {
  --t13-vid-inset: calc(max(var(--t13-gutter), calc((100vw - var(--t13-container)) / 2 + var(--t13-gutter))) + 12px);
  padding-inline: var(--t13-vid-inset);
  clip-path: inset(-9999px var(--t13-vid-inset));
}

/* ---------- 2. VIDEO CARDS — hover lift + shadow ----------
   Existing inner-image zoom (common.css:407-408) stays; this adds a whole-
   card lift/scale + a two-layer shadow (ambient ink + a warm accent halo,
   echoing §3's colour-temperature nudge) on top of it, plus a crisper
   play-button pop. Strengthened from the previous -6px/1.015 pass, which
   the client still read as too subtle.
   :hover is gated behind (hover:hover) so a tap on a touch device can't
   leave the card stuck "hovered" until the next tap elsewhere; :focus-visible
   stays unconditional so keyboard users get the same affordance everywhere. */
.t13-vcard {
  transition: transform .3s var(--t13-ease-ctrl), box-shadow .3s var(--t13-ease-ctrl);
  will-change: transform;
}
.t13-vcard:focus-visible {
  transform: translateY(-10px) scale(1.035);
  box-shadow: var(--t13-glass-shadow-hi), 0 14px 32px color-mix(in srgb, var(--t13-accent) 20%, transparent);
  z-index: 2;
}
@media (hover: hover) {
  .t13-vcard:hover {
    transform: translateY(-10px) scale(1.035);
    box-shadow: var(--t13-glass-shadow-hi), 0 14px 32px color-mix(in srgb, var(--t13-accent) 20%, transparent);
    z-index: 2;
  }
}
.t13-vcard__play span {
  transform: scale(.78);
  transition: transform .32s var(--t13-ease-ctrl);
}
.t13-vcard:focus-visible .t13-vcard__play span {
  transform: scale(1.06);
}
@media (hover: hover) {
  .t13-vcard:hover .t13-vcard__play span {
    transform: scale(1.06);
  }
}

/* ---------- 3. VIDEO CARDS — warmer colour temperature ----------
   Warm nudge on the thumbnail (kept subtle — not orange), and the scrim
   gradient blended further toward --t13-accent instead of pure navy so the
   filmstrip reads more inviting/civic-warm. Bumped once more from the
   previous saturate(1.08)/sepia(.05)/scrim 76:24 pass per client feedback
   ("increase the color temperature... by some extent"); brightness was
   nudged DOWN slightly (1.02 -> 1.015) rather than up, since saturate +
   sepia already read brighter — this keeps skin tones from blowing out. */
.t13-vcard__img {
  filter: saturate(1.12) contrast(1.04) sepia(.08) brightness(1.015);
}
.t13-vcard__scrim {
  --t13-vcard-scrim: color-mix(in srgb, var(--t13-p-900) 70%, var(--t13-accent) 30%);
  background: linear-gradient(to top, var(--t13-vcard-scrim) 0%, color-mix(in srgb, var(--t13-vcard-scrim) 0%, transparent) 62%);
}

/* ---------- 4. GALLERY — light hover polish ---------- */
.t13-gallery__item {
  transition: transform .3s var(--t13-ease-ctrl), box-shadow .3s var(--t13-ease-ctrl);
}
.t13-gallery__item:hover,
.t13-gallery__item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--t13-glass-shadow-hi);
}

/* ---------- 5. QUOTE — light spacing polish ---------- */
.t13-quote__avatar {
  transition: transform .3s var(--t13-ease-ctrl);
}
.t13-quote__grid:hover .t13-quote__avatar {
  transform: scale(1.03);
}

/* ---------- 6. FOOTER — link hover motion ----------
   Quick-links + contact list links get a lift/underline-grow. Scoped to
   `.t13-footer ul a` (0,2,1) so it doesn't touch the social icon buttons,
   whose own hover (translateY + fill) still wins at (0,2,1) same weight but
   declared right after — see the refinement below.
   All :hover-only rules in this section are gated behind (hover:hover) so a
   tap on a touch device can't leave a link "stuck" in its hovered look until
   the next tap elsewhere; :focus-visible stays unconditional so keyboard
   users keep the same affordance on every device. */
/* Scoped to Quick Links only. The Follow-Us (icon+badge) and Contact (icon+text)
   rows carry their own hover (badge fill / colour) — a full-width underline there
   would slice under the round icon badges and the translateX no-ops on their
   inline-flex/inline anchors. */
.t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a {
  position: relative;
  display: inline-block;
  /* scale grows from the fixed left edge, not the text's own centre, so a
     left-aligned Quick Link doesn't visually creep left into the list's
     own margin on hover. */
  transform-origin: left center;
  transition: color .22s var(--t13-ease-ctrl), transform .22s var(--t13-ease-ctrl);
}
.t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a::after {
  content: "";
  position: absolute; left: 0; bottom: -3px; width: 0; height: 1px;
  background: currentColor;
  transition: width .28s var(--t13-ease-ctrl);
}
.t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:focus-visible {
  color: var(--t13-p-500);
  transform: translateX(4px) scale(1.045);
}
.t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:focus-visible::after {
  width: 100%;
}
@media (hover: hover) {
  .t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:hover {
    color: var(--t13-p-500);
    transform: translateX(4px) scale(1.045);
  }
  .t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:hover::after {
    width: 100%;
  }
}

/* Follow-Us (social) links — the CURRENT markup (footer.blade.php) renders
   `.t13-footer__social-list a > .t13-footer__social-ico + span`, not the
   legacy icon-only `.t13-footer__socials a` this section used to refine
   (that class isn't emitted anywhere any more — grepped the whole repo).
   Left the legacy rule below untouched (harmless dead weight, zero cost)
   and added the real fix here: the row nudges right like the Quick Links,
   and the round icon badge itself gets a scale "pop", on top of its
   existing colour/background fill hover from common.css:463. */
.t13-footer .t13-footer__social-list a {
  transition: transform .22s var(--t13-ease-ctrl);
}
.t13-footer .t13-footer__social-list a:focus-visible {
  transform: translateX(4px);
}
@media (hover: hover) {
  .t13-footer .t13-footer__social-list a:hover {
    transform: translateX(4px);
  }
}
.t13-footer__social-ico {
  /* re-declares common.css:462's background-color/color durations verbatim
     alongside the new transform, since a later `transition` shorthand on the
     same selector replaces rather than merges with the earlier one. */
  transition: transform .22s var(--t13-ease-ctrl), background-color .2s, color .2s;
}
.t13-footer .t13-footer__social-list a:focus-visible .t13-footer__social-ico {
  transform: scale(1.14);
}
@media (hover: hover) {
  .t13-footer .t13-footer__social-list a:hover .t13-footer__social-ico {
    transform: scale(1.14);
  }
}

/* Legacy — refines a class no longer emitted by footer.blade.php (kept for
   safety in case it returns; see the real, current-markup fix above). */
.t13-footer__socials a:hover,
.t13-footer__socials a:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--t13-p-500) 28%, transparent);
}

/* ---------- 7. TOUCH — :active press feedback (all viewports) ----------
   The hover treatments above are either gated behind (hover:hover) (video
   cards §2, gallery §4, footer §6) or simply carry no transform on hover at
   all (buttons, read-more, the "See the record" .t13-ix-forward links) — so
   tapping any of them on a touch device gave zero visual confirmation the
   tap registered. :active fires on real finger-contact (and briefly on a
   desktop mouse-down too, which reads fine as a quick "click" confirm), so
   these rules are deliberately NOT gated behind (hover:hover); they layer
   ON TOP OF, not instead of, the treatments above, using a PRESS-DOWN
   (scale <1) language kept distinct from the desktop hover's LIFT-UP so the
   two never read as the same motion. Video cards / gallery items reuse
   their own already-declared §2/§4 transition (.3s) so the press eases out
   exactly like the hover lift does; buttons/links get a dedicated ~150ms
   per the mobile-polish brief's ~120-160ms guidance. Neutralised for
   prefers-reduced-motion in §9 below, alongside the existing hover/focus
   entries. */
.t13-btn {
  /* Re-declares common.css:220-221's transition list verbatim (same gotcha
     as §6 above: a later `transition` shorthand on the same selector
     replaces rather than merges with an earlier one) purely to fold in
     `opacity` for the new press-dip below. */
  transition: color .15s var(--t13-ease-ctrl), background-color .15s var(--t13-ease-ctrl),
              border-color .15s var(--t13-ease-ctrl), transform .15s var(--t13-ease-ctrl),
              opacity .15s var(--t13-ease-ctrl);
}
.t13-ix-forward {
  transition: transform .15s var(--t13-ease-ctrl), opacity .15s var(--t13-ease-ctrl);
}
.t13-readmore {
  /* Merges motion.css:173's gap/color transition verbatim — same gotcha. */
  transition: gap .25s var(--t13-ease-ctrl), color .2s var(--t13-ease-ctrl),
              transform .15s var(--t13-ease-ctrl), opacity .15s var(--t13-ease-ctrl);
}
.t13-btn:active,
.t13-ix-forward:active,
.t13-readmore:active {
  transform: scale(.97);
  opacity: .85;
}

.t13-vcard:active {
  transform: scale(.97);
  box-shadow: var(--t13-glass-shadow-hi);
}
.t13-gallery__item:active {
  transform: scale(.97);
  box-shadow: var(--t13-glass-shadow-hi);
}

.t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:active {
  color: var(--t13-p-500);
  transform: translateX(2px) scale(.97);
}
.t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:active::after {
  width: 100%;
}
.t13-footer .t13-footer__social-list a:active {
  transform: scale(.92);
}
.t13-footer .t13-footer__social-list a:active .t13-footer__social-ico {
  transform: scale(1.06);
}

/* ---------- 8. MOBILE PASS — videos / gallery / quote ---------- */
@media (max-width: 768px) {
  .t13-vcard__caption { font-size: 13px; padding: 8px 14px 14px; }
  .t13-vcard__play span { width: 52px; height: 52px; }
  /* a touch stronger than the old -3px/1.01 (still gentler than desktop's
     -10px/1.035 — less room, and touch devices rarely match hover:hover
     anyway) so the lift reads on the phones the client asked us to focus on. */
  .t13-vcard:focus-visible { transform: translateY(-5px) scale(1.02); }

  .t13-gallery__grid { gap: 8px; }

  .t13-quote__avatar { width: 120px; height: 120px; flex-basis: 120px; border-width: 4px; }
  .t13-quote__grid { gap: 1.25rem; }
}
@media (max-width: 768px) and (hover: hover) {
  .t13-vcard:hover { transform: translateY(-5px) scale(1.02); }
}

@media (max-width: 480px) {
  /* Below 480px the general §1 formula already collapses to plain
     --t13-gutter (100vw - container is always negative here), so this only
     needs to redeclare the SAME custom property the base rule uses — keeps
     padding-inline and clip-path in lockstep instead of drifting if either
     is ever edited independently. */
  .t13-videos .swiper { --t13-vid-inset: calc(var(--t13-gutter) + 12px); }
  .t13-vcard__caption { font-size: 12px; padding: 6px 12px 12px; }
  .t13-vcard__play span { width: 46px; height: 46px; }

  .t13-gallery__grid { grid-auto-rows: 130px; gap: 6px; }

  .t13-quote__avatar { width: 88px; height: 88px; flex-basis: 88px; border-width: 3px; }
  .t13-quote__text { line-height: 1.2; }
  .t13-quote__cite { margin-top: .875rem; }
}

/* ---------- 9. A11Y — reduced motion ----------
   common.css:716-720 already forces every transition/animation to ~0ms for
   prefers-reduced-motion, so the hover transforms above still land their end
   state instantly instead of animating. This just also removes the lift's
   depth cue (shadow) drift for anyone who'd find it distracting.
   Listed here regardless of whether a rule above is (hover:hover)-gated or
   not — this block wins on equal specificity purely by coming later in the
   file, on ANY device where both media features happen to match at once.
   §7's new :active press states are included below too — an instant 0ms
   scale-snap is still a perceptible jump, so it gets neutralised exactly
   like the existing hover/focus-visible entries. */
@media (prefers-reduced-motion: reduce) {
  .t13-vcard:hover,
  .t13-vcard:focus-visible,
  .t13-vcard:active,
  .t13-gallery__item:hover,
  .t13-gallery__item:focus-visible,
  .t13-gallery__item:active,
  .t13-btn:active,
  .t13-ix-forward:active,
  .t13-readmore:active,
  .t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:hover,
  .t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:focus-visible,
  .t13-footer ul:not(.t13-footer__social-list):not(.t13-footer__contact) a:active,
  .t13-footer .t13-footer__social-list a:hover,
  .t13-footer .t13-footer__social-list a:focus-visible,
  .t13-footer .t13-footer__social-list a:active,
  .t13-footer .t13-footer__social-list a:hover .t13-footer__social-ico,
  .t13-footer .t13-footer__social-list a:focus-visible .t13-footer__social-ico,
  .t13-footer .t13-footer__social-list a:active .t13-footer__social-ico,
  .t13-footer__socials a:hover,
  .t13-footer__socials a:focus-visible {
    transform: none;
  }
}