.section--support{background:#fff}
.logo-carousel{position:relative; overflow:hidden; margin-top:1.25rem}
.logo-track{display:flex; align-items:center; gap:2.5rem; padding:.5rem 0; width:max-content; animation:scrollLogos 28s linear infinite}
.logo-item{display:flex; align-items:center; justify-content:center; min-width:180px}
.logo-item img{display:block; max-height:60px; width:auto; filter:grayscale(100%); opacity:.85; transition:filter .25s, opacity .25s, transform .25s}
.logo-item img:hover{filter:none; opacity:1; transform:translateY(-2px)}
.logo-carousel:hover .logo-track{animation-play-state:paused}

/* Inline SVG sizing + color control */
.logo-item .logo-svg { display:block; height:60px; width:auto; }
.logo-item .logo-svg path,
.logo-item .logo-svg g { fill: currentColor; }

/* Apply grayscale/hover to inline SVG wrapper (matches <img> behaviour) */
.logo-item.logo-item--svg {
  filter: grayscale(100%);
  opacity: .85;
  transition: filter .25s, opacity .25s, transform .25s;
}
.logo-item.logo-item--svg:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* (Optional) brand colour just for Headspace (if you want it in green, uncomment) */
/* .logo-item[data-logo="headspace"] { color: #00A95C; } */


.section {
  padding: 1.5rem 1rem;
  text-align: center;
}
.section__title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.section__subtitle {
  color: #555;
  margin: 0rem;
}

.supporters-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.supporters-grid video {
  width: 250px;
  height: 140px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: #000;
  object-fit: cover;
}
.supporters-grid img {
  max-width: 250px;
  height: auto;
}

.raffle-featured {
  margin-bottom: 2rem;
}
.raffle-featured img {
  max-width: 300px;
  margin-bottom: 0.5rem;
}

.raffle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
}
.raffle-grid img {
  max-width: 100%;
  height: auto;
  filter: grayscale(30%);
  transition: filter 0.2s;
}
.raffle-grid img:hover {
  filter: grayscale(0%);
}


/* Horizontal swipe rail (works well on mobile) */
.tiktok-rail {
  display: grid;
  grid-auto-flow: column;
  /*grid-auto-columns: clamp(220px, 60vw, 270px); origonal spec*/
  grid-auto-columns: clamp(200px, 40vw, 270px);
  gap: 16px;
  overflow-x: auto;
  padding: 14px 2px;
  scroll-snap-type: x mandatory;
}
.tiktok-rail > * { scroll-snap-align: start; }

.mm-video-card { text-align: left; }

.mm-video-title {
  font-size: 0.95rem;
  margin: 8px 2px 0;
  color: var(--text-weak, #666);
  text-align-last: center;
}

/* 9:16 frame */
.mm-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;             /* modern browsers */
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* Fallback for old browsers (optional) */
@supports not (aspect-ratio: 9/16) {
  .mm-video-frame { height: 560px; }
}

.mm-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play button overlay */
.mm-video-toggle,
.mm-video-audio {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.mm-video-toggle {
  inset: 0;
  display: grid;
  place-items: center;
}
.mm-video-toggle .icon {
  width: 72px;
  height: 72px;
  transition: transform .12s ease;
}
.mm-video-toggle:hover .icon { transform: scale(1.05); }

/* Audio button (bottom-right) */
.mm-video-audio {
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}
.mm-video-audio .icon { width: 22px; height: 22px; }
.mm-video-audio .mm-audio-wave { opacity: .8; }
.mm-video-audio.muted .mm-audio-wave { opacity: .25; }
.mm-video-audio.muted .mm-audio-off { display: block; }
.mm-video-audio .mm-audio-off { display: none; }

/* Hide play button when playing */
.mm-video-card.is-playing .mm-video-toggle { display: none; }

.raffle-featured {
  margin-bottom: 2rem;
  text-align: center;
}
.raffle-featured img {
  max-width: 300px;
  margin-bottom: 0.5rem;
}

.raffle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
}

.raffle-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.raffle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.raffle-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}

.raffle-card p {
  margin: 0;
  font-weight: 600;
  color: #444;
}

/* Grid */
.raffle-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Card */
.raffle-card {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.raffle-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* Media boxes ensure uniform heights */
.media-box {
  position: relative;
  width: 100%;
  background: #f7f7f8;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.media-box--logo { aspect-ratio: 1 / 1; }     /* same height for all logos */
.media-box--product { aspect-ratio: 4 / 3; }  /* same height for all products */

.media-box img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;   /* keeps logos/products undistorted */
  display: block;
}

/* Label */
.raffle-card__label {
  margin: 4px 2px 0;
  font-weight: 600;
  text-align: center;
  color: #333;
}

.tiktok-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 35vw, 250px); /* < 100vw so edges show */
  justify-content: space-between;
  gap: 16px;
  overflow-x: auto;
  padding: 14px clamp(16px, 8vw, 72px);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.mm-video-card { scroll-snap-align: center; }

/* Sponsor logo under each video */
.mm-sponsor {
  margin-top: 8px;
}

/* Use a wide banner shape for session logos (overrides the global 1/1) */
.mm-video-card .media-box--logo {
  aspect-ratio: 1 / 1;          /* consistent height for all logos */
}

/* Optional: keep cards visually tidy */
.mm-video-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ---------- Logo hover/focus effects (works for session + raffle) ---------- */

/* Base: keep logos uniform and slightly muted */
.media-box--logo {
  filter: grayscale(85%) contrast(0.95);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Lift + de-grayscale on hover/focus (only on devices that support hover) */
@media (hover: hover) {
  .media-box--logo:hover {
    filter: none;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 22px rgba(0,0,0,.14);
  }
}

/* Keyboard focus */
.media-box--logo:focus-visible {
  outline: 2px solid var(--accent, #ff9554);
  outline-offset: 3px;
  filter: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

/* Optional “visit” pill that fades in on hover/focus */
.media-box--logo::after {
  content: "Visit site";
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.45);
  padding: 4px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .media-box--logo:hover::after { opacity: 1; transform: translateY(0); }
}
.media-box--logo:focus-visible::after { opacity: 1; transform: translateY(0); }

/* Respect user motion settings */
@media (prefers-reduced-motion: reduce) {
  .media-box--logo { transition: none; }
  .media-box--logo:hover,
  .media-box--logo:focus-visible { transform: none; }
}

/* (Optional) add a quick “shine” sweep: just add class="media-box media-box--logo shine" */
.media-box--logo.shine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.45) 50%, transparent 55%);
  transform: skewX(18deg) translateX(-120%);
  opacity: 0;
}
@media (hover: hover) {
  .media-box--logo.shine:hover::before { 
    animation: logoShine 900ms ease; 
    opacity: .7;
  }
}
@keyframes logoShine {
  to { transform: skewX(18deg) translateX(220%); }
}

/* ------------------ 1) Logos in full colour (no grayscale) ------------------ */

/* Carousel logos */
.logo-item img {
  filter: none;          /* remove grayscale */
  opacity: 1;            /* full strength */
  transition: transform .25s, box-shadow .25s;
}
.logo-item img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Inline SVG in carousel */
.logo-item.logo-item--svg {
  filter: none;
  opacity: 1;
  transition: transform .25s, box-shadow .25s;
}
.logo-item.logo-item--svg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Raffle grid logos */
.raffle-grid img {
  filter: none;          /* remove grayscale */
}

/* Session/raffle “logo box” links */
.media-box--logo {
  filter: none;          /* ensure colour logos */
}

/* ------------------ 2) Always-visible “Visit site” pill ------------------ */
/* Base pill always visible (bottom-right). Uses your --accent variable if set. */
.media-box--logo::after {
  content: "Visit site";
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  padding: 6px 28px 6px 10px; /* pad right for chevron */
  border-radius: 999px;
  pointer-events: none;

  /* glossy gradient with subtle depth */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent, #ff9554) 88%, #000 0%) 0%,
      color-mix(in srgb, var(--accent, #ff9554) 70%, #fff 0%) 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.18),
              inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: 1;
  transform: translateZ(0); /* avoids blur on some GPUs */
  transition: box-shadow .18s ease, filter .18s ease;
}

/* Chevron “>>” that slides a touch on hover/focus for delight */
.media-box--logo::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateX(0);
  transform-origin: center;
  opacity: .95;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}

/* Hover/focus states on the whole logo box */
@media (hover: hover) {
  .media-box--logo:hover::after {
    box-shadow: 0 8px 22px rgba(0,0,0,.22),
                inset 0 0 0 1px rgba(255,255,255,.22);
    /* shimmering highlight */
    animation: pillShine 1.1s ease forwards;
  }
  .media-box--logo:hover::before {
    transform: rotate(-45deg) translateX(2px);
  }
}
.media-box--logo:focus-visible::after {
  outline: 2px solid #fff;            /* inner halo */
  box-shadow: 0 10px 26px rgba(0,0,0,.26),
              0 0 0 3px color-mix(in srgb, var(--accent, #ff9554) 45%, transparent 55%);
}
.media-box--logo:focus-visible::before {
  transform: rotate(-45deg) translateX(3px);
}

/* Shine sweep animation across the pill */
@keyframes pillShine {
  0%   { filter: none; }
  30%  { filter: brightness(1.08); }
  60%  { filter: brightness(1); }
  100% { filter: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .media-box--logo::after,
  .media-box--logo::before { transition: none; animation: none; }
}

/* Venue sponsor */
.section--venue .venue-head { text-align: center; }

.venue-badge {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 999px;
}

.venue-wrap {
  display: grid;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}

/* Side-by-side on wider screens */
@media (min-width: 820px) {
  .venue-wrap {
    grid-template-columns: min(420px, 36vw) 1fr;
    gap: 24px;
  }
}

/* Wide banner box for venue logo; uses your existing media-box styles */
.media-box--logo-wide { aspect-ratio: 3 / 1; }   /* consistent height for the venue logo */

.venue-logo { background: #f7f7f8; }             /* matches your card backgrounds */

.venue-copy__title {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.venue-actions .button { margin-top: 6px; }

/* Center the single logo and keep it a consistent banner shape */
.venue-only { display: grid; place-items: center; }
.media-box--logo-wide { aspect-ratio: 3 / 1; max-width: min(520px, 72vw); }
.venue-logo { background: #f7f7f8; }