/* SCC Hero Wall. Ported from the homepage mockup (.hero2*): a photo wall behind
   a centred welcome, a search bar, four plain links and featured chips. Flat:
   no shadows, 5px controls, 10px tiles. Every selector starts with .scc-hw so it
   beats the theme's heading and link rules; the shared pieces (tokens, the
   two-tone focus ring, visually hidden text) live in scc-foundation.css.
   Tokens read with their values as fallbacks, because the global sheet may be
   deferred. */
.scc-hw {
  --scc-hw-top: 100px;
  --hw-teal-deeper: var(--scc-teal-deeper, #072d3b);
  --hw-teal-dark: var(--scc-teal-dark, #093a4e);
  --hw-lime: var(--scc-lime, #dbde2f);
  --hw-lime-soft: var(--scc-lime-soft, #e8ea6a);
  --hw-magenta: var(--scc-magenta, #c11f70);
  --hw-off-white: var(--scc-off-white, #f8f7f4);
  --hw-gap: var(--scc-photo-gap, 12px);
  position: relative;
  box-sizing: border-box;
  background: var(--hw-teal-deeper);
  color: #fff;
  font-family: var(--scc-font, 'Poppins', system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
}
.scc-hw *, .scc-hw *::before, .scc-hw *::after { box-sizing: border-box; }
.scc-hw [hidden] { display: none !important; }
.scc-hw .scc-hw__hero {
  position: relative;
  display: flex;
  min-height: max(34rem, calc(100svh - var(--scc-hw-top)));
  max-height: 68rem;
  color: #fff;
  overflow: hidden;
}

/* the wall is decoration: photos only, nothing to click or hover */
.scc-hw .scc-hw__wall {
  --hw-cols: 4; --hw-rows: 3;
  position: absolute;
  inset: var(--hw-gap);
  display: grid;
  gap: var(--hw-gap);
  border-radius: 10px;
  overflow: hidden;
  grid-template-columns: repeat(var(--hw-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--hw-rows), minmax(0, 1fr));
}
/* fewer photos than 12: a layout that fills the grid (see scc_blocks_hw_layouts()) */
.scc-hw .scc-hw__wall[data-tiles="10"] { --hw-cols: 5; --hw-rows: 2; }
.scc-hw .scc-hw__wall[data-tiles="9"]  { --hw-cols: 3; --hw-rows: 3; }
.scc-hw .scc-hw__wall[data-tiles="8"]  { --hw-cols: 4; --hw-rows: 2; }
.scc-hw .scc-hw__wall[data-tiles="6"]  { --hw-cols: 3; --hw-rows: 2; }
.scc-hw .scc-hw__tile { position: relative; overflow: hidden; border-radius: 10px; background: var(--hw-teal-dark); contain: paint; }
.scc-hw .scc-hw__tile::after { content: ""; position: absolute; inset: 0; background: var(--scc-veil, rgba(7, 45, 59, .18)); }
.scc-hw .scc-hw__tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.scc-hw .scc-hw__tile img.is-on { opacity: 1; }
/* a soft glow keeps the white text readable over any photo */
.scc-hw .scc-hw__shade {
  position: absolute; z-index: 1; inset: var(--hw-gap); border-radius: 10px; pointer-events: none;
  background: radial-gradient(ellipse 66% 68% at 50% 50%, var(--scc-glow, rgba(7, 45, 59, .72)) 0, var(--scc-glow-mid, rgba(7, 45, 59, .58)) 58%, transparent 100%);
}
.scc-hw .scc-hw__content {
  position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--hw-gap) + clamp(1.5rem, 3vw, 3rem)) calc(var(--hw-gap) + clamp(1.5rem, 3vw, 3rem)) calc(var(--hw-gap) + 4.5rem);
  text-align: center; pointer-events: none;
}
.scc-hw .scc-hw__text { max-width: 46rem; width: 100%; min-width: 0; pointer-events: auto; }
.scc-hw .scc-hw__h {
  margin: 0; color: #fff; overflow-wrap: anywhere;
  font-size: clamp(2.4rem, min(5.4vw, 9svh), 4.9rem); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
}
.scc-hw .scc-hw__support {
  margin: 1.1rem auto 0; max-width: 30rem; text-wrap: balance; color: #fff;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; font-weight: 500;
}
.scc-hw .scc-hw__hint { margin: 0 0 1rem; font-size: .9375rem; font-style: italic; color: #fff; }

/* search: a white field and the page's one lime action */
.scc-hw .scc-hw__search { display: flex; margin: 1.9rem auto 0; max-width: 36rem; text-align: left; }
.scc-hw .scc-hw__search input {
  flex: 1; min-width: 0; height: 3.75rem; margin: 0; padding: 0 1.25rem; border: 0; border-radius: 5px 0 0 5px;
  background: #fff; color: var(--scc-text, #1a1a1a); font: 500 1.0625rem/1 var(--scc-font, 'Poppins', system-ui, sans-serif); outline: 0; box-shadow: none;
}
.scc-hw .scc-hw__search input::placeholder { color: var(--scc-text-secondary, #555); opacity: 1; }
.scc-hw .scc-hw__go {
  flex: none; display: inline-flex; align-items: center; gap: .55rem; height: 3.75rem; margin: 0; padding: 0 1.4rem; border: 0; border-radius: 0 5px 5px 0;
  background: var(--hw-lime); color: var(--hw-teal-dark); font: 700 1rem/1 var(--scc-font, 'Poppins', system-ui, sans-serif); cursor: pointer; transition: background-color .2s; outline: 0;
}
.scc-hw .scc-hw__go:hover { background: var(--hw-lime-soft); }

/* the paths are plain underlined links (no boxes, no borders) */
.scc-hw .scc-hw__paths { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem 1.6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.scc-hw .scc-hw__paths li { margin: 0; padding: 0; }
.scc-hw.scc-hw .scc-hw__paths a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: .4rem .15rem;
  font-size: 1.125rem; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em;
}
.scc-hw.scc-hw .scc-hw__paths a:hover { text-decoration-thickness: 3px; }
.scc-hw .scc-hw__paths a svg { flex: none; }

/* featured events: one chip per row, stacked and centred, each min(34rem, 100%) wide. The date (bold
   magenta) sits inline before the title; the title stays on one line when it fits and wraps to two at most. */
.scc-hw .scc-hw__chips { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 2rem auto 0; padding: 0; list-style: none; max-width: 100%; }
.scc-hw .scc-hw__chips.is-empty-d { display: none; }
.scc-hw .scc-hw__chips li { width: min(34rem, 100%); min-width: 0; display: flex; margin: 0; padding: 0; }
.scc-hw.scc-hw .scc-hw__chips a {
  display: flex; align-items: center; flex: 1; justify-content: space-between; gap: .7rem; min-height: 44px; padding: .3rem .9rem;
  border-radius: 5px; background: var(--hw-off-white); font-size: 1rem; font-weight: 600; line-height: 1.3; text-align: left; color: var(--hw-teal-dark); text-decoration: none;
}
.scc-hw .scc-hw__t { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.scc-hw .scc-hw__t b { margin-right: .3rem; font-weight: 700; color: var(--hw-magenta); white-space: nowrap; }
.scc-hw .scc-hw__chips a svg { flex: none; }
.scc-hw.scc-hw .scc-hw__chips a:hover { background: #fff; }
.scc-hw .scc-hw__chips a:hover .scc-hw__t { text-decoration: underline; text-underline-offset: 3px; }
.scc-hw .scc-hw__chips li.off-d { display: none; }
@media (min-width: 1500px) { .scc-hw.scc-hw .scc-hw__chips a { font-size: 1.0625rem; } }

/* pause (WCAG 2.2.2) and scroll cue: dark backing; the two-tone focus ring is .scc-ring */
.scc-hw .scc-hw__pause, .scc-hw .scc-hw__cue {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0;
  border: 1px solid var(--scc-edge-light, rgba(255, 255, 255, .8)); border-radius: 5px; background: var(--hw-teal-deeper); color: #fff; cursor: pointer; text-decoration: none;
}
.scc-hw .scc-hw__pause {
  right: calc(var(--hw-gap) + .75rem + env(safe-area-inset-right, 0px)); bottom: calc(var(--hw-gap) + .75rem + env(safe-area-inset-bottom, 0px));
  gap: .55rem; padding: 0 1.1rem 0 .95rem; font: 600 1rem/1 var(--scc-font, 'Poppins', system-ui, sans-serif);
}
.scc-hw .scc-hw__cue { left: 50%; bottom: calc(var(--hw-gap) + .75rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: 48px; }
.scc-hw .scc-hw__pause:hover, .scc-hw .scc-hw__cue:hover { background: var(--hw-teal-dark); }
.scc-hw .scc-hw__pause .i-play { display: none; }
.scc-hw .scc-hw__hero.is-held .scc-hw__pause .i-play { display: block; }
.scc-hw .scc-hw__hero.is-held .scc-hw__pause .i-pause { display: none; }
.scc-hw .scc-hw__pause:focus-visible, .scc-hw .scc-hw__cue:focus-visible { border-color: #fff; background: var(--hw-teal-dark); }
@media (prefers-reduced-motion: no-preference) {
  .scc-hw .scc-hw__cue svg { animation: scc-hw-cue 2.6s ease-in-out infinite; }
  .scc-hw .scc-hw__hero.is-held .scc-hw__cue svg { animation: none; }
  @keyframes scc-hw-cue { 0%, 65%, 100% { transform: translateY(0); } 30% { transform: translateY(5px); } }
}
@media (prefers-reduced-motion: reduce) {
  .scc-hw .scc-hw__pause { display: none; }
  .scc-hw .scc-hw__tile img { transition: none; }
}

/* high-contrast / forced-colors mode: system colours, no photos */
@media (forced-colors: active) {
  .scc-hw { background: Canvas; }
  .scc-hw .scc-hw__hero { color: CanvasText; }
  .scc-hw .scc-hw__wall, .scc-hw .scc-hw__shade { display: none; }
  .scc-hw .scc-hw__h, .scc-hw .scc-hw__support, .scc-hw.scc-hw .scc-hw__paths a { color: CanvasText; }
  .scc-hw .scc-hw__pause, .scc-hw .scc-hw__cue { border: 2px solid ButtonText; }
  .scc-hw .scc-hw__go { border: 2px solid ButtonText; }
  .scc-hw .scc-hw__search input { border: 2px solid ButtonText; }
  .scc-hw.scc-hw .scc-hw__chips a { border: 1px solid ButtonText; }
}

/* no photo wall (fewer than 6 photos): the flat teal field, a shorter hero */
.scc-hw.is-flat .scc-hw__hero { min-height: 0; }
.scc-hw.is-flat .scc-hw__content { padding-top: calc(var(--hw-gap) + 3.5rem); }
.scc-hw.is-flat .scc-hw__wall, .scc-hw.is-flat .scc-hw__shade, .scc-hw.is-flat .scc-hw__pause { display: none; }

/* tablets: fewer, larger tiles and more air for the text */
@media (max-width: 1000px) {
  .scc-hw .scc-hw__wall[data-tiles] { --hw-cols: 2; --hw-rows: 3; }
  .scc-hw .scc-hw__tile:nth-child(n+7) { display: none; }
  .scc-hw .scc-hw__shade { background: radial-gradient(ellipse 72% 62% at 50% 50%, var(--scc-glow, rgba(7, 45, 59, .72)) 0, var(--scc-glow-mid, rgba(7, 45, 59, .58)) 60%, transparent 100%); }
  .scc-hw .scc-hw__content { padding-top: calc(var(--hw-gap) + 3.5rem); }
}
/* narrow tablets: the four links as a tidy 2x2 */
@media (min-width: 701px) and (max-width: 820px) {
  .scc-hw .scc-hw__paths { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; justify-items: start; gap: .15rem 2.25rem; }
}
/* short screens: tighter spacing so the stack and the pause control stay in the first screen */
@media (min-width: 701px) and (max-height: 760px) {
  .scc-hw .scc-hw__hero { min-height: max(28rem, calc(100svh - var(--scc-hw-top))); }
  .scc-hw .scc-hw__support { margin-top: .6rem; }
  .scc-hw .scc-hw__search { margin-top: 1.1rem; }
  .scc-hw .scc-hw__paths { margin-top: .6rem; }
  .scc-hw .scc-hw__chips { margin-top: .75rem; }
  .scc-hw .scc-hw__content { padding-top: calc(var(--hw-gap) + .75rem); padding-bottom: calc(var(--hw-gap) + 3.5rem); }
  .scc-hw .scc-hw__h { font-size: clamp(2.1rem, min(5.4vw, 7.2svh), 4rem); }
}
/* tablets that are also short: room for two-line chips above the controls, and no more than two chips */
@media (min-width: 701px) and (max-width: 1000px) and (max-height: 760px) {
  .scc-hw .scc-hw__content { padding-bottom: calc(var(--hw-gap) + 4.75rem); }
}
@media (min-width: 701px) and (max-width: 1000px) and (max-height: 640px) {
  .scc-hw .scc-hw__chips li:nth-child(n+3) { display: none; }
}
/* very short screens (landscape phones, small windows): drop the supporting line and extra chips so the stack and controls fit */
@media (min-width: 701px) and (max-height: 560px) {
  .scc-hw .scc-hw__hero { min-height: max(22rem, calc(100svh - var(--scc-hw-top))); }
  .scc-hw .scc-hw__support { display: none; }
  .scc-hw .scc-hw__chips li:nth-child(n+3) { display: none; }
  .scc-hw .scc-hw__h { font-size: clamp(1.9rem, min(5vw, 8svh), 3rem); }
  .scc-hw .scc-hw__search { margin-top: .9rem; }
  .scc-hw .scc-hw__paths { margin-top: .4rem; }
  .scc-hw .scc-hw__chips { margin-top: .6rem; }
  .scc-hw .scc-hw__content { padding-top: calc(var(--hw-gap) + .5rem); padding-bottom: calc(var(--hw-gap) + 3.25rem); }
}
/* small desktops: a wider glow so the headline keeps its contrast */
@media (min-width: 701px) and (max-width: 1100px), (min-width: 701px) and (max-height: 760px) {
  .scc-hw .scc-hw__shade { background: radial-gradient(ellipse 82% 78% at 50% 50%, var(--scc-glow, rgba(7, 45, 59, .72)) 0, var(--scc-glow-mid, rgba(7, 45, 59, .58)) 62%, transparent 100%); }
}
/* phones: no photos, a flat teal field */
@media (max-width: 700px) {
  .scc-hw .scc-hw__hero { min-height: 0; max-height: none; display: block; }
  .scc-hw .scc-hw__wall, .scc-hw .scc-hw__shade, .scc-hw .scc-hw__pause, .scc-hw .scc-hw__cue { display: none; }
  .scc-hw .scc-hw__content { padding: 2.25rem 1.25rem 2rem; pointer-events: auto; }
  .scc-hw .scc-hw__h { font-size: clamp(2rem, 10vw, 2.8rem); max-width: none; }
  .scc-hw .scc-hw__support { font-size: 1.0625rem; margin-top: .9rem; }
  .scc-hw .scc-hw__search { margin-top: 1.5rem; flex-wrap: wrap; }
  .scc-hw .scc-hw__search input { flex: 1 1 11rem; height: 3.5rem; padding: 0 .75rem; font-size: 1rem; }
  .scc-hw .scc-hw__go { flex: 0 0 auto; height: 3.5rem; padding: 0 .8rem; gap: .35rem; }
  .scc-hw .scc-hw__paths { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; justify-items: start; margin-top: 1rem; gap: .1rem 1.5rem; }
  .scc-hw.scc-hw .scc-hw__paths a { white-space: nowrap; font-size: 1.0625rem; }
  .scc-hw .scc-hw__chips { margin-top: 1.5rem; }
  .scc-hw .scc-hw__chips.is-empty-d { display: flex; }
  .scc-hw .scc-hw__chips.is-empty-m { display: none; }
  .scc-hw .scc-hw__chips li.off-d { display: list-item; }
  .scc-hw .scc-hw__chips li.off-m { display: none; }
}