/* ==========================================================================
   Steritech Intranet — Homepage (front-page.html) page-level skin.

   Rebuilt from the CURRENT Figma record for home/1440 470:1669:
     - structure ..... 03_figma-sitemap-02/wireframe-contents/home/home.md §2
                       hero 220 · section-quick-links 498 · section-latest-news
                       687 · section-spotlight 378 · section-feedback 150
     - news items .... runs/run-12/report-home-news.md (root-approved set)
     - CTA labels .... home.md §3 (Feedback & OFI) and §4 (Monthly Digest
                       Archive — still the canvas label, run-12 flag open)
     - visual ........ artifacts/figma-snapshots-2/home/01_home-1440_470-1669.png

   Every component inside a section is delivered by the shared library
   (assets/css/components.css, .st-c-*): QuickLinkGrid, NewsCard, CTAButton.
   Nothing shared is redefined here. This file owns only the page-level
   compositions the library has no component for — the hero band, the section
   shell, the spotlight row and the feedback card — and it builds them from
   the global.css tokens (--st-*).

   The 64px section gap comes from the global.css `.st-main > * + *` chain and
   is deliberately not re-declared here.

   Hard rules honoured: word wrap only (never mid-word) · no status pills or
   chips · drawn placeholders only, so the page makes no external request ·
   one H1 (the hero) and one <main>.
   ========================================================================== */

/* Steritech standard: word wrap only. Size to the longest word, never break
   inside one. */
[class*="st-hp-"],
[class*="st-hp-"] * {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Spacing inside every page-level composition is owned by `gap`, matching the
   component library's convention. The doubled class raises specificity above
   the layout engine's generated block-gap margins so source order cannot
   decide it. */
[class*="st-hp-"][class] > *,
[class*="st-hp-"][class] > * + * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   1 · hero 470:1783 — 1080x220. The one page in the file with no PageHeader:
   hero-h1 + hero-sub + CTAButton stand in for it. There is no image on this
   frame, so the treatment is the canvas field: one flat navy fill (#0B1B2B,
   sampled off the canvas render) at radius 8, no wash and no image.
   -------------------------------------------------------------------------- */

.st-hp-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  min-height: 220px;
  padding: 40px;
  border-radius: 8px;
  background: #0b1b2b;
  color: var(--st-surface);
}

/* Size comes from the heading-3 preset carried on the block (32); weight stays
   on the H1 element style (800). The only H1 on the page. */
.st-hp-hero-title {
  color: var(--st-surface);
  max-width: 860px;
}

.st-hp-hero-sub {
  max-width: 720px;
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* --------------------------------------------------------------------------
   2 · Section shell — h2 over one component, gap 16, as every section on the
   frame is built (h2 38 + gap 16 = the 54 the section heights account for).
   -------------------------------------------------------------------------- */

.st-hp-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.st-hp-section-title {
  color: var(--st-text);
}

/* --------------------------------------------------------------------------
   2b · Canvas-measured tuning of the shared components, scoped to this page's
   sections only — the library defaults are untouched for every other page.
   Source: artifacts/figma-snapshots-2/home/01_home-1440_470-1669.png
     QuickLinkGrid  8 cards, 4-up, card 255 wide, column and row gap 20
                    (255x4 + 20x3 = 1080, the main column exactly)
     NewsRow        4 cards, 4-up, card 258 wide, gap 16 (258x4 + 16x3 = 1080)
     radii          quick-link card 10, news card 12
     news media     flat #F3F4F4 field 240 high with one 24 muted glyph
   -------------------------------------------------------------------------- */

.st-hp-section .st-c-ql-grid {
  column-gap: 20px;
  row-gap: 20px;
}

.st-hp-section .st-c-ql-card {
  border-radius: 10px;
}

.st-hp-section .st-c-news-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
}

.st-hp-section .st-c-news-card {
  border-radius: 12px;
}

/* Thumbnail slot carries the approved 16:9 photograph, cover-cropped into the
   canvas geometry (240 high, full card width inside the 4 pad). The flat
   neutral panel stays as the field behind the photo; the library's drawn
   glyph is retired here because every home news card ships real imagery. */
.st-hp-section .st-c-news-media {
  flex: 0 0 240px;
  align-items: stretch;
  height: 240px;
  min-height: 240px;
  overflow: hidden;
  background: var(--st-surface-hover);
}

.st-hp-section .st-c-news-media::before {
  content: none;
}

.st-hp-section .st-c-news-media .wp-block-image {
  display: flex;
  height: 100%;
}

.st-hp-section .st-c-news-media .wp-block-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Card floor: date on the left, `Read more ›` hard right, both on one
   baseline. The link type and chevron are the shared .st-c-ql-link
   affordance — reused by reference, not restyled. */
.st-hp-section .st-c-news-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.st-hp-section .st-c-news-more {
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   3 · spotlight-row 470:9603 — 324 high: leadership video on the left,
   upcoming events on the right, two equal columns.
   -------------------------------------------------------------------------- */

.st-hp-spotlight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.st-hp-video-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-hp-media-label {
  color: var(--st-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* 16:9 leadership-video still from the media library, with the play affordance
   drawn over it. The still fills the slot edge to edge and inherits the media
   radius; the pseudo-elements are lifted above it with z-index. */
.st-hp-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--st-r-media);
  background: var(--st-surface-hover);
}

.st-hp-video .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.st-hp-video .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.st-hp-video::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: var(--st-r-button);
  background: rgba(255, 255, 255, .92);
}

.st-hp-video::after {
  content: "";
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--st-action);
}

.st-hp-events {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.st-hp-events-label {
  color: var(--st-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.st-hp-event {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Calendar date block — a date, not a status pill or an owner chip: square
   corners at the button radius, brand-featured surface, no border. */
.st-hp-event-date {
  display: flex;
  flex: 0 0 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 4px 0;
  border-radius: var(--st-r-button);
  background: var(--st-surface-featured);
}

.st-hp-event-month {
  color: var(--st-action);
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
}

.st-hp-event-day {
  color: var(--st-action);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.st-hp-event-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.st-hp-event-title {
  color: var(--st-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.st-hp-event-meta {
  color: var(--st-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* --------------------------------------------------------------------------
   4 · section-feedback 470:9639 — 150 high: the section is itself the card
   (32 pad + 24 line + 16 gap + 46 button + 32 pad), holding feedback-line
   470:9640 and the CTAButton run-12 relabelled to `Feedback & OFI`.
   -------------------------------------------------------------------------- */

.st-hp-feedback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--st-border);
  border-radius: var(--st-r-row);
  background: var(--st-surface);
}

.st-hp-feedback-line {
  color: var(--st-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* --------------------------------------------------------------------------
   Graceful degradation below the 1440 fixed shell — the design is 1440-fixed
   (no responsive designs exist yet), so this only keeps the page usable on a
   narrower demo screen.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .st-hp-hero {
    padding: 32px 24px;
  }

  .st-hp-spotlight-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The page-scoped 4-up rules above outrank the library's own degradation
   selectors, so the two fixed-count grids are re-collapsed here. */
@media (max-width: 899px) {
  .st-hp-section .st-c-ql-grid,
  .st-hp-section .st-c-news-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .st-hp-section .st-c-ql-grid,
  .st-hp-section .st-c-news-row {
    grid-template-columns: minmax(0, 1fr);
  }
}