/* ============================================================================
   Selected Works section - shared include (selected-work.php)
   Base rules mirror the homepage (home-new.css) exactly so the section is
   structurally identical wherever it renders.
   Below the base, a light-theme override scoped to .page-case-study recolours
   the section chrome to the BY BANKS cream light theme on case study pages.
   The image-tile cards keep their dark scrim (text sits over a photo) so they
   stay readable on either background.
   ============================================================================ */

/* JetBrains Mono - declared here so the component carries its own font
   dependency wherever it is loaded (What We Do, case study pages, etc).
   Harmless if global.css already declares it; the browser loads it once. */
@font-face {
  font-family: "JetBrains Mono";
  src: url('/assets/fonts/JetBrainsMono-VariableFont.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

.sw-root {
  background: var(--black);
  padding: clamp(80px, 11vw, 132px) clamp(20px, 5vw, 40px);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
.sw-inner { max-width: 1240px; margin: 0 auto; color: var(--cream); }

.sw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.sw-head-text { max-width: 720px; }
.sw-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.sw-h2 { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 14px 0 0; color: var(--cream); text-wrap: balance; }
.sw-sub { font-size: 18px; line-height: 1.6; color: rgba(241, 237, 228, 0.7); margin: 14px 0 0; text-wrap: pretty; }
.sw-scroll { display: flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(241, 237, 228, 0.45); white-space: nowrap; padding-bottom: 6px; }
.sw-scroll svg { width: 14px; height: 14px; }

.sw-rail { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.sw-rail::-webkit-scrollbar { display: none; }

.sw-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; }
.sw-nav-progress { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.sw-nav-count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.08em; color: var(--cream); white-space: nowrap; }
.sw-nav-count em { font-style: normal; color: rgba(241, 237, 228, 0.35); padding: 0 5px; }
.sw-nav-count [data-sw-total] { color: rgba(241, 237, 228, 0.45); }
.sw-nav-track { position: relative; flex: 1; max-width: 260px; height: 2px; border-radius: 999px; background: rgba(241, 237, 228, 0.14); overflow: hidden; }
.sw-nav-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--accent); transition: width 0.25s ease; }
.sw-nav-btns { display: flex; gap: 10px; }
.sw-nav-btn {
  appearance: none; cursor: pointer; width: 46px; height: 46px; border-radius: 50%;
  background: none; border: 1px solid rgba(241, 237, 228, 0.22); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.sw-nav-btn svg { width: 19px; height: 19px; }
.sw-nav-btn:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  .sw-nav-btn:not(:disabled):hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}
@media (max-width: 560px) {
  .sw-nav { margin-top: 18px; }
  .sw-nav-track { max-width: none; }
}

.sw-card {
  position: relative; flex: 0 0 372px; height: 580px; scroll-snap-align: start;
  overflow: hidden; border-radius: 18px; background: var(--black-light);
  border: 1px solid rgba(241, 237, 228, 0.12); text-decoration: none; display: block;
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}
.sw-card-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.sw-card-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30, 29, 30, 0.82) 0%, rgba(30, 29, 30, 0.55) 52%, rgba(30, 29, 30, 0.3) 100%);
}
.sw-card-body { position: relative; z-index: 2; padding: 38px 38px 0; }
.sw-eyebrow { position: relative; height: 13px; }
.sw-eyebrow span { position: absolute; inset: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; transition: opacity 0.28s ease; }
.sw-eyebrow-sector { color: rgba(241, 237, 228, 0.5); opacity: 1; }
.sw-eyebrow-type { color: var(--accent); opacity: 0; }
.sw-name { font-size: 28px; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--cream); margin-top: 10px; text-wrap: balance; }
.sw-tagline { font-size: 14.5px; line-height: 1.55; color: rgba(241, 237, 228, 0.58); margin: 13px 0 0; max-width: 34ch; text-wrap: pretty; }
.sw-view { display: flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--accent); transition: gap 0.2s ease; }
.sw-view svg { width: 15px; height: 15px; }

.sw-phone {
  position: absolute; bottom: -296px; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 314px; background: #e7e2d6; border-radius: 36px; padding: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px #d8d2c4;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sw-phone-screen { position: relative; width: 100%; aspect-ratio: 780 / 1578; border-radius: 26px; overflow: hidden; background: #111 center / cover no-repeat; }

@media (hover: hover) {
  .sw-card:hover { border-color: rgba(241, 237, 228, 0.28); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
  .sw-card:hover .sw-phone { transform: translateX(-50%) translateY(-20px); }
  .sw-card:hover .sw-view { gap: 11px; }
  .sw-card:hover .sw-eyebrow-sector { opacity: 0; }
  .sw-card:hover .sw-eyebrow-type { opacity: 1; }
}
@media (hover: none) {
  .sw-phone { transform: translateX(-50%) translateY(-20px); }
}

.sw-cta { margin-top: 44px; padding-top: 34px; border-top: 1px solid #29282a; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sw-cta-text { max-width: 52ch; }
.sw-cta-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.sw-cta-line { font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--cream); margin-top: 10px; text-wrap: balance; }
.sw-cta-btn { flex: none; }

@media (max-width: 900px) {
  .sw-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* One full card with a sliver of the next peeking on the right.
     44vw fitted two cards but crushed the content and left the fixed-width
     phone mockup wider than its own card below ~715px. */
  .sw-card { flex: 0 0 84vw; }
  .sw-phone { width: min(74vw, 314px); }
}
@media (max-width: 560px) {
  .sw-h2 { font-size: 33px; }
  .sw-sub { font-size: 15px; }
  .sw-card { flex: 0 0 84vw; height: 548px; }
  .sw-card-body { padding: 28px 24px 0; }
  .sw-phone { width: 74vw; }
  .sw-cta { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-card, .sw-phone, .sw-view, .sw-eyebrow span, .sw-nav-fill, .sw-nav-btn { transition: none; }
}

/* ============================================================================
   Light theme - case study pages only (body.page-case-study)
   ============================================================================ */
.page-case-study .sw-root { background: var(--cream); }
.page-case-study .sw-inner { color: var(--black); }
.page-case-study .sw-h2 { color: var(--black); }
.page-case-study .sw-sub { color: rgba(23, 22, 23, 0.66); }
.page-case-study .sw-scroll { color: rgba(23, 22, 23, 0.45); }
.page-case-study .sw-nav-count { color: var(--black); }
.page-case-study .sw-nav-count em { color: rgba(23, 22, 23, 0.35); }
.page-case-study .sw-nav-count [data-sw-total] { color: rgba(23, 22, 23, 0.45); }
.page-case-study .sw-nav-track { background: rgba(23, 22, 23, 0.14); }
.page-case-study .sw-nav-btn { border-color: rgba(23, 22, 23, 0.22); color: var(--black); }
@media (hover: hover) {
  .page-case-study .sw-nav-btn:not(:disabled):hover { background: var(--accent); border-color: var(--accent); color: #fff; }
}
.page-case-study .sw-cta { border-top-color: rgba(23, 22, 23, 0.12); }
.page-case-study .sw-cta-line { color: var(--black); }