/* =========================================================================
   DTA Collectibles — category hub

   Implements category-hub.html: a category WITH children, which routes rather
   than filters. Loaded only on hubs, on top of archive.css.

   Mockup class -> theme class, where they differ:
     .intro__grid -> .dta-hub__masthead   intro, search, sections and showcase
     .intro       -> .dta-intro           still the intro mu-plugin's markup
     (none)       -> .dta-hub__showcase   wraps the covers and their heading,
                                          which the mockup does not draw
     (none)       -> .dta-hub__sections   wraps the sections list, which the
                                          mockup puts at the foot of the page
     (none)       -> .dta-hub__search     the department-scoped search box; not
                                          in the mockup at all, which leaves the
                                          space beside the tallies empty

   Everything else — .ways, .way, .eras, .era, .chips, .chip, .sections,
   .lateral — keeps the mockup's names. .band, .band-head, .products, .chip and
   the breadcrumb are shared and live in archive.css.
   ====================================================================== */

/* =========================================================================
   1. MASTHEAD — intro and sections, with the showcase beside them
   =========================================================================

   The mockup nests the description, the tallies and the covers inside one
   .intro element, and puts the sections list at the foot of the page. That
   .intro element is dta-archive-intro.php's, and this port does not restructure
   another file's markup to get a layout — so all three blocks are SIBLINGS of
   .dta-intro and the grid sits on a wrapper around them.

   Four blocks, three columns, two rows:

     +----------------+----------------+-------------+
     | .dta-intro     | .dta-hub__     | .dta-hub__  |
     +----------------+ search         | showcase    |
     | .dta-hub__sections              |             |
     +---------------------------------+-------------+

   THE MIDDLE COLUMN WAS EMPTY AND IS THE REASON THIS SECTION CHANGED. The intro
   is a heading and two tallies — 352px wide on COMICS, measured — sitting in a
   column 818px wide, so a third of the masthead held nothing at all while the
   sections list beneath it ran the full width. The search box fills it.

   PLACED EXPLICITLY, NOT BY WRAPPING THE LEFT PAIR IN A DIV — a wrapper would
   put the showcase last in the DOM, which is neither the reading order nor the
   order a keyboard tabs through.

   BUT THE SOURCE ORDER ALONE ALREADY PRODUCES THIS LAYOUT, and that is the
   point. The grid auto-places row by row, so the template's order — intro,
   search, showcase, sections — puts each block in the cell it wants with no
   help from the four rules below. They pin the layout rather than create it, so
   this stylesheet failing to reach the server costs a colour and some spacing
   instead of throwing the sections into the showcase's column and dropping the
   covers to a full-width band underneath. It is also why the collapse at 900px
   only has to undo the pinning: the stacked order is already the right one.

   THE COLUMN SPLIT IS 21fr / 25fr / 480px, WHICH IS 352 / 418 / 480 AT 1440.
   Not a ratio anyone chose for its own sake: 418px is what the field grid below
   needs to put Title and Issue on one row and both Years and Publisher on the
   next without a number input dropping below four comfortable digits, and 352px
   is what is left. It is stated in fr rather than px so the two share what the
   showcase does not take at every width between the 900px collapse and 1440.

   A DEPARTMENT NAME LONGER THAN "Comics" WRAPS, AND THAT IS THE ACCEPTED COST.
   Measured at --t-2xl: Comics 142px, Golden-Age 223, MOVIES & TV 253, Pulps &
   Magazines 352, Sports Memorabilia 362, Movie/TV Memorabilia 414. So the two
   longest wrap to a second line in a 352px column. Sizing the first column to
   its content instead would hand 414px to a heading on the largest department
   and leave the search box 356px, which is the field grid failing on the
   department with the most stock — the wrong thing to protect.

   The rule and the spacing that .dta-intro carries on a leaf move up to the
   wrapper here, otherwise the underline would run beneath the left column only
   and stop halfway across the page.
   ====================================================================== */

:root {
  /* The right column, and the one number the two halves of this layout share.
     The mockup drew 384px for covers sitting beside prose alone. They earn more
     room now that the left column carries the sections list too — three covers
     at 384px are 120px wide, which is a thumbnail rather than a cover worth
     looking at. Widening the column is the whole change; nothing inside the
     showcase has a width of its own. */
  --dta-showcase-w: 480px;
}

.dta-hub__masthead {
  display: grid;
  grid-template-columns: minmax(0, 21fr) minmax(0, 25fr) minmax(0, var(--dta-showcase-w));
  /* Row gap first: --s-7 between the tallies and the sections heading is a hole
     in the middle of one column. The column gap keeps it. */
  gap: var(--s-6) var(--s-7);
  align-items: start;
  border-bottom: var(--rule);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6);
}

body.dta-hub .dta-hub__masthead .dta-intro { grid-column: 1; grid-row: 1; }
body.dta-hub .dta-hub__search              { grid-column: 2; grid-row: 1; }
body.dta-hub .dta-hub__sections            { grid-column: 1 / span 2; grid-row: 2; }

/* Spans both rows so it starts level with the heading and is free to run past
   the tallies, which is the whole reason the sections list fits beside it. */
body.dta-hub .dta-hub__showcase            { grid-column: 3; grid-row: 1 / span 2; }

body.dta-hub .dta-hub__masthead .dta-intro {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* A hub's heading is a step up from a leaf's: it names a department rather
   than a shelf, and it is the first thing a stranger from Google reads. */
body.dta-hub .dta-intro h1,
body.dta-hub .dta-intro__title {
  font-size: var(--t-2xl);
  font-feature-settings: var(--num-tabular);
}

body.dta-hub .dta-intro p {
  max-width: 60ch;
}


/* ---- The scoped search box ---------------------------------------------- */

/* NOT A COPY OF search.css. That file is enqueued on the advanced search page
   only, so nothing it holds is available here; these rules restate the same
   control from the same tokens rather than importing a stylesheet a hub does
   not otherwise need. They are deliberately the same shapes — a 12-column field
   grid with declared spans, labels in Archivo Narrow at --t-sm, a --c-accent
   submit — because it is the same form, and a customer arriving at the results
   page should not find the control redrawn.

   WHAT DIFFERS, AND WHY: no fieldsets, no legends and no help text. The search
   page groups six fieldsets because it offers sixteen parameters; this offers
   five, under a heading that already says what they scope to. A legend over
   five fields is a heading over a heading. */

.dta-hub__search .band-head {
  /* Matches .dta-hub__showcase .band-head — the two sit on the same line and a
     different gap beneath them would show as the forms starting at different
     heights. */
  margin-bottom: var(--s-3);
}

.dta-hub__search .fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* --s-3 both ways, not search.css's --s-3/--s-4. Eleven column gaps at 16px
     would take 176px out of a 418px row and leave the Year fields at 80px; at
     12px they are 96px, measured. The search page's form is 1,077px wide and
     can afford the wider gutter. */
  gap: var(--s-3);
}

.dta-hub__search .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* Same default as search.css, for the same reason: a field with no span is a
     field somebody added without deciding, and full width is the answer that is
     never wrong. */
  grid-column: span 12;
}

.dta-hub__search .field--title  { grid-column: span 8; }
/* --second, not --issue: the field in this slot is Issue on comics, Card number
   on movie paper and a Cover date select on pulps and sports. Naming the
   modifier after the department's field would mean four span rules that all say
   4, and a fifth the day a department gets a field nobody has thought of. */
.dta-hub__search .field--second { grid-column: span 4; }

/* THE COVER DATE ROW IS 6/6, NOT 8/4, AND THE NUMBER CAME OFF THE CONTROL.
   A <select> has to hold its longest option when that option is chosen, and
   pa_month's is "November-December" at 125px in Archivo Narrow at --t-base.
   At span 4 the control is 132px wide, which is 108px inside its padding and
   its arrow — so the label a customer had just picked was clipped. At span 6
   it is 203px, 177px inside, measured on the live pulps hub.

   Title gives up the width because it can: it takes free text and a placeholder
   of "Weird Tales", so a narrower box costs a longer title some scrolling,
   where a narrow select costs a wrong-looking answer to a question already
   answered. The issue variant keeps 8/4 — a card or issue number is three
   characters. */
.dta-hub__search .fields--date .field--title  { grid-column: span 6; }
.dta-hub__search .fields--date .field--second { grid-column: span 6; }

/* AND THE ROW WITH NOTHING BESIDE THE TITLE. Movie paper has no second field
   worth offering, so the title takes the row rather than the row keeping a
   4-column hole where a control used to be. The block is still three rows and
   still 257px, so the masthead geometry does not move between departments —
   which matters more than it sounds: the showcase beside it spans both rows and
   the sections list starts below, so a search box that changed height per
   department would move the Sections heading on four otherwise identical pages. */
.dta-hub__search .fields--single .field--title { grid-column: span 12; }
.dta-hub__search .field--year   { grid-column: span 3; }
.dta-hub__search .field--pub    { grid-column: span 6; }

.dta-hub__search label {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  color: var(--c-text-strong);
  font-weight: var(--w-medium);
}

/* THE SPECIFICITY HERE IS MEASURED, NOT GUESSED, AND IT IS HIGHER THAN
   search.css NEEDS FOR THE SAME CONTROL.

   A hub is a WooCommerce archive, so the body carries `woocommerce` and
   woocommerce.min.css's

       .woocommerce form input[type="number"]  { max-width: 58px; min-height: 36px }

   matches — 0,2,2. The advanced search page is an ordinary WP page, does not
   carry that body class, and so never meets this rule; `.dta-search__form
   input` at 0,2,1 is enough there and is NOT enough here. Written at 0,2,1
   first and measured on the live hub: the Year fields came out 58px wide and
   36px tall inside their 96px tracks, which is exactly the stranded-label
   failure search.css documents against OceanWP's own 50px cap.

   Qualifying with .fields takes these to 0,3,2 and 0,3,3, which wins on
   specificity rather than on load order — layout.php enqueues this stylesheet
   late as a convenience and says in its own comment not to rely on that.
   Re-measured after the change: all five inputs 44px tall, Year 96px wide.

   NO !important: it is not needed, and it would then apply to anything anyone
   later puts in this block. */
body.dta-hub .dta-hub__search .fields input,
body.dta-hub .dta-hub__search .fields select {
  font-family: var(--f-narrow);
  font-size: var(--t-base);
  color: var(--c-text-strong);
  background: var(--c-surface);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  min-height: 44px;
  width: 100%;
}

body.dta-hub .dta-hub__search .fields input[type="number"] {
  max-width: none;
}

/* THE COVER DATE CONTROL IS A <select> AND IT INHERITS THE INPUT RULES ABOVE
   RATHER THAN GETTING ITS OWN. Two rule sets for two controls that have to look
   identical in the same row is the drift this stylesheet keeps avoiding
   elsewhere; the only thing a select needs on top is room for its own arrow,
   which the UA draws inside the padding box. search.css §3 records that OceanWP
   already gives selects 44px and inputs 40px, so this is the rule that makes the
   two agree here rather than the one that fights the theme. */

.dta-hub__search .fields input:focus-visible,
.dta-hub__search .fields select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-color: var(--c-border-focus);
}

/* Chrome draws a dropdown arrow on <input list> and clicking it does nothing.
   Same rule and the same scoping reason as search.css §3: input[list] rather
   than every input, because the same pseudo-element is the picker on date and
   time inputs and a blanket rule would disarm the first one somebody adds. */
.dta-hub__search input[list]::-webkit-calendar-picker-indicator {
  display: none;
}

/* The UA sheet already hides this, measured — stated because an inherited
   `datalist { display: block }` would put a phantom row carrying 25 options
   between the control and the button. */
.dta-hub__search datalist {
  display: none;
}

.dta-hub__search .actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

.dta-hub__search .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-text-invert);
  font-family: var(--f-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-base);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-6);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
}

.dta-hub__search .btn:hover,
.dta-hub__search .btn:focus-visible {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-text-invert);
}

/* The way out to the other eleven parameters. A link rather than a second
   button: it is the same destination the form posts to, with nothing filled
   in, so anything that makes it look like a second action is a lie about what
   it does. */
.dta-hub__search .actions .all {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  color: var(--c-text);
}

.dta-hub__search .actions .all:hover,
.dta-hub__search .actions .all:focus-visible {
  color: var(--c-accent);
}

/* ---- Featured covers -------------------------------------------------- */

/* .dta-hub__showcase is not a mockup class. category-hub.html leaves the covers
   unheaded, so there was no wrapper to name; this follows .dta-hub__masthead's
   convention — a wrapper this port adds carries the dta-hub__ prefix, and every
   class the mockup did name keeps its own.

   The heading itself is .band-head, the shared block-heading pattern behind
   "Recently added in …" and "Other sections" (section 1b below). Reusing it is
   the point: one rule sets the size, weight and colour of every block heading on
   the page, so this one cannot drift from the others. It carries no .more link
   and no count — three covers drawn fresh each day are not a set to browse to
   the end of, so a "view all" would have nowhere to go and a count would imply
   there is more of it. */
.dta-hub__showcase .band-head {
  /* The only local value. --s-5 beneath a heading is right across a full-width
     band and too much above a 384px column of thumbnails. */
  margin-bottom: var(--s-3);
}

.intro-covers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

.intro-covers a {
  display: block;
  text-decoration: none;
}

/* COVERS CONTAIN RATHER THAN CROP. This rule said `cover` until Sept 11, on the
   reasoning that a consistent 2:3 block of them reads as a shelf while the
   loop's box has to hold five archetypes at once. The first half is true and
   the second half was the mistake: a hub's showcase holds whatever the whole
   subtree holds, which is exactly the loop's problem, and archive.css settled
   it there with `contain` on a --c-surface-sunk ground.

   Measured on staging, twelve covers across the four department hubs, as
   width/height of the file actually served:

     COMICS              0.692  0.680  0.642
     Pulps & Magazines   0.714  0.711  0.681
     Sports Memorabilia  0.630  0.630  0.630
     Movie/TV            0.767  1.082  1.234

   Against a 0.667 frame at 152x228, `cover` was cropping 4.4px off the top and
   bottom of the CGC slab in the Comics showcase — which is the label, the part
   somebody is looking at on a graded book. That is the small case. On Movie/TV
   it was taking 46% of the width off a lobby card and showing a vertical strip
   through the middle of it.

   `contain` costs at most 8px of letterbox on the nine portrait covers and
   shows all of every one. It does NOT rescue the two landscape ones: at 2/3
   they now letterbox by up to 105px of the 228 instead of being cropped. That
   is the honest picture of a landscape object in a portrait frame, and it is a
   real decision rather than a defect — see the note below.

   THE FRAME IS STILL 2/3 AND THAT IS THE OPEN HALF. Nine of the twelve sit
   between 0.630 and 0.714, so 2/3 fits the catalogue's portrait paper almost
   exactly. Moving to the loop's 3/4 would cut the worst Movie/TV letterbox from
   105px to 80px and pillarbox all nine portrait covers by 7-24px, which trades
   a bad case on one hub for a small cost on every hub. archive.css takes the
   third option — one shared box plus `aspect-ratio: 4/3` on the three landscape
   leaf terms — and that mechanism does not reach here, because the Movie/TV hub
   is not one archetype: its three covers today are a three-sheet, a lobby card
   and a pressbook. Left at 2/3 pending a decision on whether the showcase gets
   a per-hub frame. */
.intro-covers img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border: var(--rule);
  background: var(--c-surface-sunk);
  display: block;
}

.intro-covers a:hover img { opacity: .85; }

.intro-covers .cap {
  display: block;
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  color: var(--c-text);
  line-height: var(--lh-snug);
  padding-top: var(--s-1);
  font-feature-settings: var(--num-tabular);
}

.intro-covers .cap b {
  display: block;
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

.intro-covers a:hover .cap { color: var(--c-accent); }

/* The shared block chrome — .band, .band-head, .chips, .chip — used to live
   here, because the hub was the first page to use it. The series archive is the
   second, so it has moved up into archive.css exactly as the note here said it
   should, rather than being copied a second time. Nothing in this file defines
   it any more; the rules below only adjust it in context.
   ====================================================================== */

/* =========================================================================
   2. WAYS IN
   ====================================================================== */

.ways { margin-bottom: var(--s-7); }

.ways > h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  margin: 0 0 var(--s-5);
}

.way { margin-bottom: var(--s-6); }

.way .lbl {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
  display: block;
  margin-bottom: var(--s-1);
}

.way .hint {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  display: block;
  margin-bottom: var(--s-3);
  max-width: 60ch;
}

/* ---- Era tiles -------------------------------------------------------- */

.eras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
}

.era {
  border: var(--rule);
  border-top: 3px solid var(--c-dark);
  padding: var(--s-4);
  text-decoration: none;
  display: block;
}

.era:hover {
  border-color: var(--c-border-focus);
  border-top-color: var(--c-accent);
}

.era b {
  display: block;
  font-size: var(--t-md);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  line-height: var(--lh-tight);
}

.era .n {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  color: var(--c-text);
  display: block;
  margin: var(--s-1) 0 var(--s-2);
  font-feature-settings: var(--num-tabular);
}

.era .n i {
  font-style: normal;
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

.era .sub {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  color: var(--c-text);
  display: block;
  line-height: var(--lh-snug);
  font-feature-settings: var(--num-tabular);
}

.era:hover b { color: var(--c-accent); }

/* =========================================================================
   3. SECTIONS LIST — the routing, in the masthead
   =========================================================================

   Moved out of the foot of the page and into the left column, under the tallies
   and beside the showcase. It is the fifteen ways into the department and it was
   the last thing on the page, below a taster of six recent arrivals.

   The heading is .band-head, as the showcase's is, so all four block headings on
   a hub come from one rule. No count on it — the tally two lines above already
   reads "15 sections" and saying it twice in three inches is not emphasis.
   ====================================================================== */

.dta-hub__sections .band-head {
  margin-bottom: var(--s-3);
}

/* Column count is left to the shorthand rather than pinned — the left column is
   ~910px wide at a 1600 viewport and ~500px at 1100, so a fixed count is wrong
   at one end or the other. Only the minimum is raised, from the mockup's 200px,
   which was drawn against a list running the full width of the page:

     1600  3 columns, 283px   one name wraps
     1440  2 columns, 408px   every name on its line
     1280  2 columns, 328px   every name on its line
     1200  2 columns, 288px   one name wraps
     1100  1 column           (900px collapses the masthead anyway)

   280px is the value that never squeezes more than one of the fifteen names on
   to a second line, and that keeps two columns down to 1200 rather than
   dropping to a single 608px one — fifteen rows in one column runs half again
   as tall as the showcase beside it. A wrapped name is not a defect: the row is
   a flex line, so the count stays flush right and only the long titles take a
   second line. Several at once is what reads as a squeeze. */
.dta-hub__sections .sections {
  columns: 3 280px;
}

/* THE COUNTS ARE READABLE NOW, and this is the one place the promotion forces a
   colour change. The mockup sets them in --c-border-focus (#dddddd), which is
   about 1.4:1 on white — fine for a de-emphasised list at the foot of the page,
   and not fine for the figures someone is choosing between. --c-text (#666) is
   5.7:1 and is what every other count on this page already uses: the chip
   figures, the era sub-lines, the tallies' labels. Revert this one rule if the
   list ever moves back down. */
.dta-hub__sections .sections span {
  color: var(--c-text);
}

/* THE MOCKUP'S OWN VALUE, kept, and overridden for the masthead below.

   `columns: 3 200px` was drawn against a full-page-width list. In a left column
   it is 200px that does the work, not the 3: measured at a 1280 viewport the
   list takes three 240px columns and three of the fifteen names wrap. */
.sections {
  columns: 3 200px;
  column-gap: var(--s-6);
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sections li {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  border-bottom: 1px dotted var(--c-border);
}

.sections a { color: var(--c-text); text-decoration: none; }
.sections a:hover { color: var(--c-accent); text-decoration: underline; }

.sections span {
  color: var(--c-border-focus);
  font-feature-settings: var(--num-tabular);
}

/* =========================================================================
   4. THE LATERAL ROW, at the foot of a hub
   =========================================================================

   On a leaf this row sits above the grid and is styled in archive.css. Here it
   closes the page, so it takes a rule above rather than below.
   ====================================================================== */

body.dta-hub .siblings {
  border-top: var(--rule);
  border-bottom: 0;
  padding: var(--s-5) 0 var(--s-8);
  margin: 0;
}

/* =========================================================================
   5. NARROW
   ====================================================================== */

@media (max-width: 900px) {
  .dta-hub__masthead {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  /* Back to source order, which is already the order we want stacked: heading
     and tallies, search, showcase, sections. */
  body.dta-hub .dta-hub__masthead .dta-intro,
  body.dta-hub .dta-hub__search,
  body.dta-hub .dta-hub__sections,
  body.dta-hub .dta-hub__showcase {
    grid-column: 1;
    grid-row: auto;
  }

  /* The field grid stops being 418px wide when it stacks, so the row shapes
     that were measured for that width are wrong below here: Title at 8/12 of a
     phone is a box with four characters in it. One field per row instead, which
     is what .field's own default already says — these three modifiers are the
     exception being withdrawn, not a new rule. */
  .dta-hub__search .field--title,
  .dta-hub__search .field--second,
  .dta-hub__search .field--year,
  .dta-hub__search .field--pub {
    grid-column: span 12;
  }

  /* Except the Years, which are a pair and read as one control. Half each keeps
     them on one line at every width down to 320px, measured. */
  .dta-hub__search .field--year { grid-column: span 6; }
  /* The cap moves to the wrapper so the heading narrows with the covers rather
     than running the full width of a stacked page above them. Same number as
     the column it just left. */
  .dta-hub__showcase { max-width: var(--dta-showcase-w); }
}

@media (max-width: 760px) {
  body.dta-hub .dta-intro h1,
  body.dta-hub .dta-intro__title { font-size: var(--t-xl); }
  .sections { columns: 1; }
}