/* ===========================================================================
   DotCity Hub Banner - fit corrections
   File:   assets/css/hub-banner-fit-20260809.css
   Loaded: only by the six category hubs that enqueue it
           (art, culture, fashion, film, sport, students).

   This is NOT a second banner system. It carries two corrections to the
   existing .dch component, kept in a separate file so that
   assets/css/hub-banner-20260802c.css - which is served with a one-year
   Cache-Control and whose filename is its only cache key - does not have to
   be edited in place.

   ---------------------------------------------------------------------------
   1. Banner media must cover the banner box below 900px.

   page-templates/tpl-static-prototype.php prints an inline mobile block
   containing:

       @media(max-width:900px){ ...
         .static-prototype-page img,
         .static-prototype-page video { max-width:100%!important; height:auto }
       ... }

   `.static-prototype-page video` and `.dch-media > video` both score 0-1-1.
   The inline block is later in document order, so `height:auto` wins and the
   banner video renders at its intrinsic 16:9 height - 219px inside a 300px
   banner at 390px wide, leaving an 81px dead strip of --dch-base under the
   footage. Images take the same declaration and overflow instead of covering.

   Raising specificity to 0-2-1 restores the component's intended behaviour
   without editing the prototype template or the shared banner stylesheet.

   2. Single title - the accent dot moves into the H1.

   The eyebrow was removed from these six hubs because it restated the H1
   ("Manchester . Fashion" above "Manchester Fashion"). The eyebrow carried
   the pulsing accent dot, so the dot is re-attached to the title. The rule is
   scoped to a title that is the FIRST child of .dch-identity, i.e. a hub with
   no eyebrow, so hubs still running an eyebrow are untouched.
   =========================================================================== */

@media (max-width: 900px) {
  .dch .dch-media > img,
  .dch .dch-media > video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: var(--dch-focus);
  }
}

.dch .dch-identity > .dch-title:first-child::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline-end: 0.34em;
  border-radius: 50%;
  background: var(--dch-accent);
  box-shadow: 0 0 0 3px rgba(var(--dch-veil), 0.45);
  vertical-align: 0.14em;
  animation: dch-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dch .dch-identity > .dch-title:first-child::before { animation: none; }
}

@media (forced-colors: active) {
  .dch .dch-identity > .dch-title:first-child::before { display: none; }
}

/* The shared sheet sets line-height 1.02 on .dch-title. That puts the ink box
   past the line box at every size - 3px over at 29.6px on a 390px viewport,
   more at the 53px desktop size - so descenders sit on the edge of the clip in
   any ancestor that scrolls. 1.12 clears them at both ends and costs a few
   pixels of banner height, which both the 300px mobile box and the desktop box
   already have spare. Applied unconditionally so the two breakpoints agree. */
.dch .dch-title { line-height: 1.12; }