/* ==========================================================================
   3DOptix redesign — /use-cases index page-unique CSS.

   Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css
   Enqueued CONDITIONALLY from page-templates/dxr-use-cases.php (handle
   'dxr-page-usecases', dependency 'dxr-shell'), so it ships on this page only
   and can never reorder the shared layer.

   RULES FOR THIS FILE:
   - EVERY selector is scoped to .dxr-page-usecases, the wrapper the template
     emits. Legacy Elementor / Academy / WooCommerce markup keeps its own list
     bullets, paragraph spacing and link underlines. No bare element selectors,
     ever, and nothing here may leak to a sibling page — other agents are
     writing the Blog and Videos templates in parallel.
   - No new colour and no new spacing scale: everything resolves from the token
     layer. The only raw numbers are geometry transcribed verbatim from the
     prototype, and each is named in §0 rather than repeated inline.
   - No new keyframe. The three that exist are enough; the only motion here is
     a border-colour transition, already neutralised by the shared
     prefers-reduced-motion block in dxr-components.css §2.
   - The spectrum gradient appears ZERO times in this file. The two signature
     placements (2px under the nav, 3px atop the footer) are untouched.

   The approved design does not specify this page. Everything below is derived
   from the ONE collection view the prototype does contain — the Academy index,
   '3DOptix Website.dc.html' lines 628-741 — so the list pages of this batch
   read as one system. The .dxr-list__* block names are shared with the sibling
   Blog and Videos templates on purpose: if these three files are ever merged
   into one dxr-list.css, the merge is a copy, not a rewrite.
   ========================================================================== */

/* ==========================================================================
   §0 Page-local custom properties

   Prototype values with no entry in the token layer. Named once here instead
   of repeated as literals below — same convention as dxr-page-technology.css.
   ========================================================================== */
.dxr-page-usecases{
  --dxr-list-head-top:clamp(27px,3.3vw,44px);   /* proto 632 */
  --dxr-list-head-bot:clamp(32px,3.9vw,52px);   /* proto 632 */
  --dxr-list-gap:24px;                          /* proto 659 — NOT --dxr-gap-panels (20px) */
  --dxr-list-chip-radius:6px;                   /* proto 649 — between --dxr-radius-badge and --pill */
  --dxr-list-field-h:52px;                      /* proto 643 */
  --dxr-list-min:var(--dxr-min-3up);            /* 320px: thumbnail + title + 3-line excerpt */
}

/* ==========================================================================
   §1 Page header — dark band (proto 630-639)

   Deliberately NOT .dxr-hero: no glow, no CTA row, no spectrum eyebrow bar.
   An index is a directory, not a pitch. The 64px blueprint is the design's one
   documented 64px instance and .dxr-blueprint--64 already exists for it.

   .dxr-section carries the standard vertical rhythm; this band runs the
   prototype's own tighter pair instead, so the section padding is zeroed and
   the rhythm moves to the inner. A page-local override of a shared value, not
   a system change.
   ========================================================================== */
.dxr-page-usecases .dxr-list__head{padding:0}
.dxr-page-usecases .dxr-list__head-inner{
  padding-top:var(--dxr-list-head-top);
  padding-bottom:var(--dxr-list-head-bot);
}

/* The breadcrumb occupies the eyebrow slot — it is already mono, and it is
   already real content on this page. That is why no dxr_eyebrow() is called. */
.dxr-page-usecases .dxr-list__crumbs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:24px;
  font:400 12px/1 var(--dxr-font-mono);
  color:var(--dxr-on-dark-caption);
}
.dxr-page-usecases .dxr-list__crumbs a{position:relative;color:var(--dxr-on-dark-body-alt)}
.dxr-page-usecases .dxr-list__crumbs a:hover{color:var(--dxr-on-dark)}
/* TOUCH TARGET. The 12px mono line box gives the crumb link a ~12px-tall hit
   area. The pseudo-element enlarges the hit area WITHOUT moving anything:
   12 + 16 + 16 = 44px tall, and 4px of horizontal bleed against the row's 10px
   gap leaves the neighbouring crumb its own 2px of clearance. The band's top
   padding is >=27px and the row's margin-bottom is 24px, so the overhang never
   reaches another control. */
.dxr-page-usecases .dxr-list__crumbs a::after{
  content:"";position:absolute;inset:-16px -4px;
}

/* Prototype 636. Smaller than .dxr-h1--page on purpose — an index H1 is not a
   product H1. The shared type file is off-limits to this batch, so the role is
   authored here rather than added to dxr-components.css §4. */
.dxr-page-usecases .dxr-list__title{
  margin:0 0 14px;
  font:800 clamp(27px,4.2vw,46px)/1.08 var(--dxr-font-sans);
  letter-spacing:-.038em;
  color:var(--dxr-on-dark);
}

/* ==========================================================================
   §2 Controls band — sunken (proto 641-652)

   One band carries the controls, the results line, the grid and the pager, so
   the whole index sits on a single #F5F7FA ground exactly as the prototype
   does. Opens on the header's tight rhythm, closes on the standard one.
   ========================================================================== */
.dxr-page-usecases .dxr-list__body{
  background:var(--dxr-surface-sunken);
  padding:var(--dxr-list-head-top) 0 var(--dxr-section-y);
}

/* --- 2.1 Search field ----------------------------------------------------
   The shared design layer contains NO form-control rules of any kind (there is
   no input / form / search selector in tokens, components or shell), so the
   appearance reset below is required, not defensive. The legacy stylesheet is
   98KB of unprefixed rules and does style bare inputs; every selector here is
   two classes deep, which outranks it. */
.dxr-page-usecases .dxr-list__search{
  display:flex;align-items:stretch;
  max-width:min(100%,720px);
  height:var(--dxr-list-field-h);
  background:var(--dxr-surface);
  border:1px solid var(--dxr-border-strong);
  border-radius:var(--dxr-radius-md);
  overflow:hidden;
}
.dxr-page-usecases .dxr-list__search-input{
  flex:1;min-width:0;
  -webkit-appearance:none;appearance:none;
  margin:0;padding:0 18px;
  border:0;background:transparent;
  /* 16px is a FLOOR, not a design choice: iOS Safari auto-zooms any focused
     form control whose computed font-size is below 16px, and it does not undo
     the zoom on blur — the visitor is left on a 300px visual viewport with 20px
     of the page off-screen to the right. The field is a fixed 52px and the UA
     centres the text, so nothing else moves. */
  font:400 16px/1 var(--dxr-font-sans);
  color:var(--dxr-ink);
}
.dxr-page-usecases .dxr-list__search-input::placeholder{
  color:var(--dxr-text-disabled);opacity:1;
}
.dxr-page-usecases .dxr-list__search-input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Not .dxr-btn: the prototype's submit is a flush-mounted segment of the
   field, with no radius and no independent height. Its colour, weight and
   hover still come from the primary button tokens so the two stay in step. */
.dxr-page-usecases .dxr-list__search-submit{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;white-space:nowrap;
  margin:0;padding:0 26px;border:0;cursor:pointer;
  background:var(--dxr-primary);
  color:var(--dxr-on-dark);
  font:700 13px/1 var(--dxr-font-sans);
  letter-spacing:.05em;text-transform:uppercase;
  transition:background-color .15s ease;
}
.dxr-page-usecases .dxr-list__search-submit:hover{background:var(--dxr-primary-hover)}

/* --- 2.2 Category filters (proto 648-652) --------------------------------
   NOT .dxr-chip — that component is the 9px mono Popular / Coming-soon badge.
   These are prose category names, so they are sans, and the selected state is
   the ink fill the prototype uses. §5 reuses this exact pair for the current
   page number, which is what makes pagination read as the same family.

   There is no "All" chip because the page has never had one: the unfiltered
   URL is pre-filtered to physical-optics. */
.dxr-page-usecases .dxr-list__filters{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:24px;padding-bottom:28px;
  border-bottom:1px solid var(--dxr-border);
}
/* TOUCH TARGET. The `font` shorthand sets line-height:1, so the chip's box is
   9 + 13 + 9 + 2 borders = 33px — 11px under the 44px floor, and this page
   renders ten of them. Raising the padding would visibly fatten the chip at
   every width, so the HIT AREA is enlarged instead and the 33px geometry is
   left exactly as transcribed: 33 + 5 + 5 = 43px, and the 5px of vertical bleed
   equals half the 10px row gap, so stacked rows touch without overlapping. */
.dxr-page-usecases .dxr-list__filter{
  position:relative;
  padding:9px 16px;
  border:1px solid var(--dxr-border);
  border-radius:var(--dxr-list-chip-radius);
  background:var(--dxr-surface);
  color:var(--dxr-body);
  font:600 13px/1 var(--dxr-font-sans);
  transition:border-color .15s ease,color .15s ease;
}
.dxr-page-usecases .dxr-list__filter::after{
  /* -6px, not -5px: the chip box is 9+13+9+2 = 33px, so 33+12 = 45px clears the
     44px touch floor. 6px of vertical bleed still sits inside the 10px filter
     row gap, so stacked rows do not overlap. */
  content:"";position:absolute;inset:-6px 0;
}
.dxr-page-usecases .dxr-list__filter:hover{
  border-color:var(--dxr-accent-rule);
  color:var(--dxr-accent-text);
}
.dxr-page-usecases .dxr-list__filter.is-active,
.dxr-page-usecases .dxr-list__filter.is-active:hover{
  background:var(--dxr-ink);
  border-color:var(--dxr-ink);
  color:var(--dxr-on-dark);
}

/* ==========================================================================
   §3 Results line (proto 654-657)

   The legacy sentence and its parenthetical count, on a shared baseline. The
   count is mono because it is measured; the sentence is prose, so it is not.
   ========================================================================== */
.dxr-page-usecases .dxr-list__results{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:36px 0 22px;
}
/* The heading echoes the visitor's raw ?find_academy= query. An unbroken
   40-character token at the clamp minimum (19px/800) measures ~418px against the
   280px container at a 320px viewport, and nothing in the ancestor chain clips
   or scrolls — the document itself would scroll sideways. `anywhere` only
   engages when the word genuinely does not fit, so ordinary terms are
   unaffected. */
.dxr-page-usecases .dxr-list__results .dxr-h3-product{overflow-wrap:anywhere}
/* ACCESSIBILITY: --dxr-text-subtle is 3.69:1 on white and fails WCAG 2.1 AA at
   this size. It is a client-approved palette value — see the note in
   dxr-tokens.css §1.2. Do not darken it here; escalate. */
.dxr-page-usecases .dxr-list__count{
  font:400 13px/1 var(--dxr-font-mono);
  color:var(--dxr-text-subtle);
}

/* ==========================================================================
   §4 Card grid + card (proto 659-726)
   ========================================================================== */
.dxr-page-usecases .dxr-list__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--dxr-list-min)),1fr));
  gap:var(--dxr-list-gap);
}

/* No card background: the prototype's tutorial cards sit transparent on the
   sunken band (only the band declares #F5F7FA), so the border alone defines
   the card. Matches dxr-page-blog.css. */
.dxr-page-usecases .dxr-list__card{
  display:flex;flex-direction:column;
  border:1px solid var(--dxr-border);
  border-radius:var(--dxr-radius-panel);
  overflow:hidden;
  color:inherit;
  transition:border-color .15s ease;
}
/* Border colour only. The system has exactly three shadows and none of them is
   a card shadow, so no lift and no scale. */
.dxr-page-usecases .dxr-list__card:hover{
  border-color:var(--dxr-accent-rule);
  color:inherit;
}

/* aspect-ratio rather than the prototype's fixed 172px: the card is 390px wide
   at 3-up but narrower as the grid reflows, and one fixed height letterboxes
   every size but its own. object-fit:cover absorbs any source ratio, and
   production use-case thumbnails are already 16:9. The same box governs the
   hatch fallback (rendered with 'height' => 0, so it carries no height class),
   which is what keeps a missing image from changing the card's geometry. */
.dxr-page-usecases .dxr-list__media{
  aspect-ratio:16/9;
  flex-shrink:0;
  overflow:hidden;
}
/* The letterbox ground behind a real thumbnail. :not(.dxr-hatch) is
   load-bearing: the placeholder wears .dxr-list__media too, and a flat
   background here would paint straight over its hatch gradient. */
.dxr-page-usecases .dxr-list__media:not(.dxr-hatch){background:var(--dxr-surface-raised)}
.dxr-page-usecases .dxr-list__media img{
  display:block;width:100%;height:100%;object-fit:cover;
}

.dxr-page-usecases .dxr-list__card-body{
  display:flex;flex-direction:column;flex:1;
  padding:20px;
}

/* Shown on the search branch only, where results span categories. Mono,
   because it is a taxonomy label rather than prose. A <span>, never a link —
   the whole card is an <a> and nested anchors are invalid. */
.dxr-page-usecases .dxr-list__card-term{
  display:block;margin-bottom:10px;
  font:500 10px/1 var(--dxr-font-mono);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--dxr-accent-text);
}

.dxr-page-usecases .dxr-list__card-title{margin:0 0 8px}

/* Excerpts are WordPress's 55-word auto-excerpt and would leave card heights
   wildly unequal. Bounded VISUALLY — the copy itself is never rewritten or
   truncated server-side, so nothing is lost on the use-case page itself. */
.dxr-page-usecases .dxr-list__card-excerpt{
  margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}

/* ==========================================================================
   §5 Pagination — derived, because the prototype has none

   Derivation: the number cell IS the filter chip of §2.2, and the chip's
   selected state IS the current page. That is the only "selected" idiom the
   design owns, so filters and pagination read as one family. Figures stay mono
   because they are measured; the prev/next labels are words, so they drop to
   sans. Left-aligned, because every band in this design aligns to the
   container's left edge and a centred row would be the only centred thing on
   the page.

   The markup is paginate_links()' own output with the legacy arguments, so
   these selectors target WordPress's classes, not ours — scoped under both the
   page class and .dxr-list__pager so they cannot reach legacy pagination.
   ========================================================================== */
.dxr-page-usecases .dxr-list__pager{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:48px;padding-top:28px;
  border-top:1px solid var(--dxr-border);
}
/* 44px, not 40: the cell is a touch target and, as the derivation above says,
   the prototype transcribes no value for it. */
.dxr-page-usecases .dxr-list__pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--dxr-border);
  border-radius:var(--dxr-radius-md);
  background:var(--dxr-surface);
  color:var(--dxr-ink);
  font:500 13px/1 var(--dxr-font-mono);
  transition:border-color .15s ease,color .15s ease;
}
.dxr-page-usecases .dxr-list__pager a.page-numbers:hover{
  border-color:var(--dxr-accent-rule);
  color:var(--dxr-accent-text);
}
.dxr-page-usecases .dxr-list__pager .page-numbers.current{
  background:var(--dxr-ink);
  border-color:var(--dxr-ink);
  color:var(--dxr-on-dark);
}
/* prev / next carry prose ("Next »"), so they leave the mono role. */
.dxr-page-usecases .dxr-list__pager .page-numbers.prev,
.dxr-page-usecases .dxr-list__pager .page-numbers.next{
  padding:0 16px;
  font:600 13px/1 var(--dxr-font-sans);
}
.dxr-page-usecases .dxr-list__pager .page-numbers.dots{
  min-width:auto;padding:0 4px;
  border-color:transparent;background:transparent;
  color:var(--dxr-text-subtle);
}

/* ==========================================================================
   §6 Empty state — derived; the legacy template has none and renders a blank
   div on zero results.
   ========================================================================== */
.dxr-page-usecases .dxr-list__empty{
  max-width:min(100%,620px);
  padding:var(--dxr-pad-panel);
  background:var(--dxr-surface);
  border:1px solid var(--dxr-border);
  border-radius:var(--dxr-radius-panel);
}
/* TOUCH TARGET. The recovery link is the only way out of a zero-result search
   and the shared .dxr-cta-link is a 14px line box. It is padded HERE rather than
   in dxr-components.css because that primitive is shared with pages other agents
   own. 14 + 15 + 15 = 44px. The paragraph's closing margin drops from 20 to 5 so
   the new padding restores, not adds to, the prototype's 20px gap, and the
   negative bottom margin keeps the panel's own padding symmetrical. */
/* The 44px hit area for this link already comes from the shared
   .dxr-cta-link::after{inset:-16px 0} in dxr-components.css. Adding padding
   here stacked a second overlay 31px tall, which reached up into the
   paragraph above. Prototype margin restored instead. */
.dxr-page-usecases .dxr-list__empty-text{margin:8px 0 20px}