/* ==========================================================================
   HCR 96.5 FM — Sponsors section (mockup CSS, paste-ready)
   Everything is prefixed `sp-` so it cannot collide with the existing site.
   Font: Source Sans 3 (already loaded by the site), system sans fallback.
   No carousel, no motion: the only interactive change is a slightly
   deeper shadow on hover/focus.
   ========================================================================== */

:root {
  /* site integration: Franz's mock, with Duncan's 23:23 'logos as large as possible' overrides at the end */
  --sp-bg: #F5F6F8;          /* page background */
  --sp-ink: #2B2F36;         /* charcoal: text + Browny's text tile */
  --sp-muted: #5B6470;       /* one-liners, "Supported by" label */
  --sp-slate: #2F4A63;       /* quiet accent (links, HDWSA label) */
  --sp-card: #FFFFFF;
  --sp-line: #C9CFD6;        /* dashed "Become a sponsor" border */
  --sp-radius: 14px;
  --sp-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
  --sp-shadow-hover: 0 2px 4px rgba(0,0,0,.07), 0 8px 22px rgba(0,0,0,.08);
  --sp-font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Sponsors page section
   -------------------------------------------------------------------------- */
.sp-section {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 16px 56px;
  font-family: var(--sp-font);
  color: var(--sp-ink);
}
.sp-title {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sp-intro {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--sp-muted);
  max-width: 40em;
}

/* Grid: 2 columns on phones, 3 from 720px up. Equal tiles, top-aligned so
   captions start on the same line in every row. */
.sp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 14px;
  align-items: start;
}
@media (min-width: 720px) {
  .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
}

/* --------------------------------------------------------------------------
   2. Tile + caption (the whole thing is ONE link, opens in a new tab)
   -------------------------------------------------------------------------- */
.sp-item {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--sp-radius);
}
.sp-item:focus-visible { outline: 2px solid var(--sp-slate); outline-offset: 4px; }

.sp-tile {
  position: relative;
  aspect-ratio: 3 / 2;
  box-sizing: border-box;
  padding: 16% 14%;            /* % padding resolves against width: we use  */
  padding-block: 10.667%;      /* 16% of the tile HEIGHT = 10.667% of width */
  background: var(--sp-card);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  overflow: hidden;            /* keeps scaled logos inside the radius */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .15s ease;
}
.sp-item:hover .sp-tile,
.sp-item:focus-visible .sp-tile { box-shadow: var(--sp-shadow-hover); }
@media (prefers-reduced-motion: reduce) { .sp-tile { transition: none; } }

/* Logo fills the padded box; every logo gets the same optical box.
   multiply melts the white/off-white JPEG backgrounds into the white tile. */
.sp-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(var(--sp-scale, 1));   /* per-logo optical tweak */
}

/* Per-logo optical size tweaks (see README) ------------------------------ */
/* Shire: portrait file with ~13% built-in white margin; nudge up. */
.sp-logo--shire { --sp-scale: 1.18; }
/* Reel Steel: square file whose artwork sits in the middle ~58% of its
   height; nudge up. Its background is #F9F7F3, not pure white, so multiply
   alone leaves a faint square; brightness lifts it to #FFF. */
.sp-logo--reel  { --sp-scale: 1.22; filter: brightness(1.05); }
/* Framed by Tony: the file has ~8% white margin each side of the black
   banner, so at 1.0 the badge reads small next to the others; nudge up so
   the black banner spans ~90% of the padded box width. */
.sp-logo--framed { --sp-scale: 1.1; }

/* --------------------------------------------------------------------------
   3. Text tiles (used until better logo files arrive)
   -------------------------------------------------------------------------- */
.sp-tile--text { padding-inline: 8%; text-align: center; flex-direction: column; gap: 6px; }

/* Browny's: echoes their own white-on-black banner */
.sp-tile--brownys { background: var(--sp-ink); color: #FFFFFF; }
.sp-brownys__name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 1.15;
  text-wrap: balance;
}
.sp-brownys__sub {
  font-weight: 400;
  opacity: .8;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.2;
}

/* HDWSA / Binningup Fishing Club */
.sp-hdwsa__name {
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.2;
  color: var(--sp-ink);
  text-wrap: balance;
}
.sp-hdwsa__sub {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sp-slate);
}

/* Caption (outside the card) */
.sp-caption { display: block; padding: 12px 2px 0; }
.sp-caption__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sp-ink);
}
.sp-caption__line {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--sp-muted);
}

/* 6th tile: "Become a sponsor" (outlined, no shadow) */
.sp-tile--open {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed var(--sp-line);
  flex-direction: column;
  gap: 6px;
  padding-inline: 8%;
  text-align: center;
}
.sp-open__text { font-size: 16px; font-weight: 600; color: var(--sp-ink); }
.sp-open__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-slate);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-open__link::after { content: ""; position: absolute; inset: 0; } /* whole tile tappable */
.sp-open__link:focus-visible { outline: none; }
.sp-tile--open:focus-within { outline: 2px solid var(--sp-slate); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   4. "Supported by" footer strip (sits above the light site footer)
   -------------------------------------------------------------------------- */
.sp-strip {
  display: block;
  background: var(--sp-bg);
  border-top: 1px solid #E3E7EC;
  color: inherit;
  text-decoration: none;
  font-family: var(--sp-font);
}
.sp-strip__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.sp-strip__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sp-muted);
}
.sp-strip__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;             /* single row on desktop, wraps on phones */
  align-items: center;
  gap: 10px;
}
.sp-strip:focus-visible { outline: 2px solid var(--sp-slate); outline-offset: -2px; }

.sp-chip {
  box-sizing: border-box;
  height: 44px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--sp-card);
  box-shadow: var(--sp-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.sp-strip:hover .sp-chip { box-shadow: var(--sp-shadow-hover); }
@media (prefers-reduced-motion: reduce) { .sp-chip { transition: none; } }

.sp-chip__logo {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(var(--sp-scale, 1));
}
/* Chip tweaks: crop built-in whitespace by scaling within a narrower box */
.sp-chip__logo--shire { --sp-scale: 1.3; }                 /* trims the portrait's white margin */
.sp-chip__logo--reel  { aspect-ratio: 1.45; object-fit: cover; --sp-scale: 1.12; filter: brightness(1.05); } /* crops empty top/bottom of the square */
.sp-chip__logo--framed { aspect-ratio: 3.59; object-fit: cover; } /* crops the white side margins: chip shows just the black badge */

/* Small text chips (same styles as the text tiles) */
.sp-chip--text { flex-direction: column; gap: 1px; line-height: 1.05; text-align: center; white-space: nowrap; }
.sp-chip--brownys { background: var(--sp-ink); color: #FFFFFF; }
.sp-chip--brownys .sp-brownys__name { font-size: 11px; }
.sp-chip--brownys .sp-brownys__sub { font-size: 10px; }
.sp-chip--hdwsa .sp-hdwsa__name { font-size: 12px; }
.sp-chip--hdwsa .sp-hdwsa__sub { font-size: 9px; letter-spacing: .14em; }

/* Phones: label on its own line, chips centred on up to 2 rows */
@media (max-width: 719px) {
  .sp-strip__inner { flex-direction: column; gap: 10px; padding: 16px 12px; }
  .sp-strip__row { justify-content: center; gap: 8px; }
  .sp-chip { height: 36px; padding: 6px 12px; }
  .sp-chip--brownys .sp-brownys__name { font-size: 10px; }
  .sp-chip--brownys .sp-brownys__sub { font-size: 9px; }
  .sp-chip--hdwsa .sp-hdwsa__name { font-size: 11px; }
  .sp-chip--hdwsa .sp-hdwsa__sub { font-size: 8px; }
}

/* ==========================================================================
   LIVE overrides (Duncan 23:23): logos as large as possible, clean, no overflow.
   Trimmed files (ImageMagick -trim) so no scale() hacks are needed.
   ========================================================================== */
main .sp-grid { margin-top: 24px; }
.sp-tile { padding: 0 !important; }
.sp-logo {
  width: auto; height: auto;
  max-width: 90%; max-height: 82%;
  object-fit: contain;
  transform: none;
}
/* optical balance: the wide Reel mark reads heavy at full height */
.sp-logo--shire  { --sp-scale: 1; }
.sp-logo--reel   { --sp-scale: 1; max-height: 70%; filter: brightness(1.05); }
.sp-logo--framed { --sp-scale: 1; max-width: 90%; }
.sp-tile--text, .sp-tile--open { padding: 0 8% !important; }

/* Footer strip: taller chips, logos 44px on phones, 48px on desktop */
.sp-chip { height: 60px; padding: 6px 14px; }
.sp-chip__logo { height: 48px; width: auto; max-width: none; transform: none; aspect-ratio: auto; object-fit: contain; }
.sp-chip__logo--reel { aspect-ratio: auto; object-fit: contain; filter: brightness(1.05); }
.sp-chip__logo--framed { aspect-ratio: auto; object-fit: contain; }
.sp-chip--brownys .sp-brownys__name { font-size: 13px; }
.sp-chip--brownys .sp-brownys__sub { font-size: 11px; }
.sp-chip--hdwsa .sp-hdwsa__name { font-size: 14px; }
.sp-chip--hdwsa .sp-hdwsa__sub { font-size: 10px; }
@media (max-width: 719px) {
  .sp-chip { height: 54px; padding: 5px 10px; }
  .sp-chip__logo { height: 44px; }
  .sp-strip__row { gap: 8px; }
  .sp-chip--brownys .sp-brownys__name { font-size: 11.5px; }
  .sp-chip--brownys .sp-brownys__sub { font-size: 10px; }
  .sp-chip--hdwsa .sp-hdwsa__name { font-size: 12.5px; }
  .sp-chip--hdwsa .sp-hdwsa__sub { font-size: 9px; }
}
.hcr-sp-hidden { display: none !important; }

/* strip sits directly on the footer: it takes the footer's mt-auto */
.sp-strip { margin-top: auto; }
.sp-strip + footer { margin-top: 0 !important; }

/* Keep the subtle shadows: the site sets `* { box-shadow: none !important }` and chip-kill.js inline-kills
   shadows on span/li/div, so tiles/chips are custom elements (hcr-tile / hcr-chip) with a stronger rule. */
html body .sp-grid hcr-tile.sp-tile { box-shadow: var(--sp-shadow) !important; }
html body .sp-grid .sp-item:hover hcr-tile.sp-tile,
html body .sp-grid .sp-item:focus-visible hcr-tile.sp-tile { box-shadow: var(--sp-shadow-hover) !important; }
html body .sp-grid hcr-tile.sp-tile--open { box-shadow: none !important; }
html body .sp-strip hcr-chip.sp-chip { box-shadow: var(--sp-shadow) !important; }
html body .sp-strip:hover hcr-chip.sp-chip { box-shadow: var(--sp-shadow-hover) !important; }
.sp-strip__row > li { display: flex; }

/* 9-sponsor list (Duncan 28 Sep 8:39): many text tiles/chips; keep names readable and chips wrapping cleanly */
.sp-tile--hdwsa .sp-hdwsa__name { padding: 0 4px; }
.sp-strip__row { justify-content: flex-start; }
@media (max-width: 719px) { .sp-strip__row { justify-content: center; } .sp-chip--text { white-space: nowrap; } }
div.sp-item { cursor: default; }

/* Found logos (Duncan 28 Sep 8:44). Small files are never shown above ~1x native size. */
.sp-logo--treecare { max-height: 72%; max-width: min(90%, 184px); }
.sp-logo--hdwsa    { max-height: 78%; max-width: min(90%, 295px); }
.sp-logo--morecore { max-width: 80%; max-height: 72%; }
.sp-tile--westpac { flex-direction: column; gap: 10px; }
.sp-westpac__mark { display: block; height: 30%; width: auto; max-width: 60%; }
.sp-westpac__name { font-size: clamp(14px, 1.8vw, 17px); font-weight: 600; color: var(--sp-ink); line-height: 1.2; }
.sp-chip--westpac { gap: 8px; }
.sp-chip__westpac { display: block; height: 22px; width: auto; }
.sp-chip__westpac-name { font-size: 14px; font-weight: 700; color: var(--sp-ink); white-space: nowrap; }
@media (max-width: 719px) { .sp-chip__westpac { height: 20px; } .sp-chip__westpac-name { font-size: 13px; } }