/* Shared: straight row divider, edge to edge */
.played-item,
.promo,
.news__item,
.hosts a,
.feed__item,
.mod-skeleton__row {
  position: relative;
  border-top: 0 !important;
}

.played-item::before,
.promo::before,
.news__item::before,
.hosts a::before,
.feed__item::before,
.mod-skeleton__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--border-2);
}

.played-item:first-child::before,
.promo:first-child::before,
.news__item:first-child::before,
.hosts li:first-child a::before,
.feed li:first-child .feed__item::before,
.mod-skeleton__row:first-child::before { display: none; }

/* Shared: carousel
   --vc-caption is the height reserved for the text under the thumb, so the
   arrows can center on the image alone instead of on the whole card. */
.vcarousel {
  position: relative;
  --vc-caption: 3.6em;
}

.vcarousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 14px) / 2);
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.vcarousel__track::-webkit-scrollbar { display: none; }

.vcarousel--single {
  --vc-caption: 0px;
}

.vcarousel--single .vcarousel__track { grid-auto-columns: 100%; gap: 0; }

/* Center column fits two, the sidebar and the wide strip fit one.
   carouselDots() in PHP counts the pages with the same rule. */
.center .vcarousel__track { grid-auto-columns: calc((100% - 14px) / 2); }

/* One at a time outside the centre, and also when the module is half of it:
   two cards in half a column leave nothing readable */
.pos-2 .vcarousel__track,
.pos-4 .vcarousel__track,
.mod-reduced .vcarousel__track { grid-auto-columns: 100%; }

/* One at a time stays one at a time: highlights and slides live on this rule */
.center .vcarousel--single .vcarousel__track { grid-auto-columns: 100%; gap: 0; }

@media (max-width: 900px) {
  .center .vcarousel__track { grid-auto-columns: 100%; }
}

.pos-2 .vcarousel__arrow,
.pos-4 .vcarousel__arrow { width: 32px; height: 32px; font-size: var(--fs-sm); }

.pos-2 .vcarousel__arrow--prev,
.pos-4 .vcarousel__arrow--prev { left: 8px; }

.pos-2 .vcarousel__arrow--next,
.pos-4 .vcarousel__arrow--next { right: 8px; }

.vcarousel__arrow {
  position: absolute;
  top: 0;
  bottom: var(--vc-caption);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: auto 0;
  color: var(--fg);
  background: var(--card);
  border: 0;
  border-radius: 999px;
  transition: background var(--ease), color var(--ease);
}

.vcarousel__arrow:hover {
  color: var(--accent-fg);
  background: var(--accent);
}

.vcarousel__arrow[hidden] { display: none; }
.vcarousel__arrow--prev { left: 10px; }
.vcarousel__arrow--next { right: 10px; }

.vcarousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* One item at a time needs no reserved title height: there is no neighbour
   card to line up with, and the empty line pushed the dots away */
.pos-2 .vcard__title,
.pos-4 .vcard__title,
.pos-2 .acard__name,
.pos-4 .acard__name { min-height: 0; }

.vcarousel__dots span {
  width: 8px;
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  transition: background var(--ease), width var(--ease);
}

.vcarousel__dots span.is-active {
  width: 22px;
  background: var(--muted-fg);
}

/* Shared: media placeholder */
.media-ph {
  background: var(--muted);
  background-size: cover;
  background-position: center;
}

/* Module 5 — On air (markup from utils.js getOnairData)
   gap replaces the Bootstrap ms-2, which left the text too close to the photo */
.onAir > div,
.locOnline > div {
  gap: 16px;
  padding: 4px 2px 8px;
}

.onAir > div > .ms-2,
.locOnline > div > .ms-2 { margin-left: 0 !important; }

/* Empty state injected by utils.js when nothing is on air */
.onAir .bg-block,
.locOnline .bg-block {
  margin-top: 0 !important;
  padding: 26px 16px !important;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-fg);
  background: none !important;
  border: 1px dashed var(--border);
  border-radius: var(--radius) !important;
}

.onAir .bg-block::before,
.locOnline .bg-block::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 10px;
  background: var(--accent);
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.1 2.1M12 3a3 3 0 0 1 3 3v5'/%3E%3Cpath d='M18 11a6 6 0 0 1-9.3 5M6 11a6 6 0 0 0 .5 2.4'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.1 2.1M12 3a3 3 0 0 1 3 3v5'/%3E%3Cpath d='M18 11a6 6 0 0 1-9.3 5M6 11a6 6 0 0 0 .5 2.4'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.onAir .current-img {
  width: 58px;
  height: 58px;
  max-width: 58px !important;
  max-height: 58px !important;
  object-fit: cover;
  border-radius: var(--radius) !important;
}

.onAir small {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.onAir h6 {
  margin: 0 0 2px !important;
  font-size: var(--fs-lg) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.onAir p { font-size: var(--fs-sm); font-weight: 700; color: var(--muted-fg) !important; }
.onAir p small { display: inline; margin: 0; font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }

/* Upcoming programs */
.onair-next { padding: 0 2px 4px; }

.onair-next__label {
  position: relative;
  display: block;
  margin: 10px 0 6px;
  padding-top: 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* Same divider the lists use */
.onair-next__label::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--border-2);
}

.onair-next ul { margin: 0; padding: 0; list-style: none; }

.onair-next li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
}

.onair-next span {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

.onair-next b {
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

/* Module 24 — Host online (markup from utils.js getLocData)
   The spinning rings are gone: the photo is a rounded square like the rest of
   the theme and a tag says it is live. */
.locOnline > div { gap: 16px; padding: 4px 2px 6px; }

.locOnline .outer-circle {
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
}

/* A ring that grows out of the photo and fades, once every three seconds */
.locOnline .outer-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  animation: locHalo 3s ease-out infinite;
  pointer-events: none;
}

@keyframes locHalo {
  0% { transform: scale(1); opacity: 0.7; }
  55% { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

.locOnline .inner-circle {
  display: block;
  width: 68px;
  height: 68px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
}

.locOnline .loc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.locOnline p {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px !important;
  font-size: var(--fs-xs) !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent) !important;
}

.locOnline p::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 999px;
  animation: locLive 1.8s ease-out infinite;
}

@keyframes locLive {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 6px transparent; opacity: 0.55; }
  100% { box-shadow: 0 0 0 6px transparent; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .locOnline p::before,
  .locOnline .outer-circle::after { animation: none; opacity: 0.4; }
}

.locOnline h5 {
  font-size: var(--fs-lg) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

/* Module 23 — Last played (markup from /history) */
.played-list {
  display: flex;
  flex-direction: column;
}

/* Same padding on every row, including the first: any exception breaks the rhythm.
   Scoped by .module-23 to outrank addons.css, which turns the row into an
   inline-block with an absolutely positioned icon and leaves the text off center. */
.module-23 .played-list .played-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 14px 2px;
}

.module-23 .played-list .played-item .list-count {
  position: static;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1;
  border-radius: 0;
  color: var(--accent) !important;
  background: none !important;
}

.module-23 .played-list .played-item .text-large {
  overflow: hidden;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Waiting state from /history when the stream is offline */
.played-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px !important;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--muted-fg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.played-waiting::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: var(--accent);
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: playedPulse 1.6s ease-in-out infinite;
}

@keyframes playedPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .played-waiting::before { animation: none; }
}

/* Skeleton placeholders for dynamic modules */
.mod-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mod-skeleton__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--border-2);
}

.mod-skeleton__row:first-child { border-top: 0; padding-top: 4px; }

.mod-skeleton__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.mod-skeleton__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.mod-skeleton__line { height: 10px; border-radius: 999px; }
.mod-skeleton__line--sm { width: 40%; height: 8px; }

/* Module 7 — Featured */
.hl__body { position: relative; }

.hl {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 400px;
  padding: 28px 56px;
  overflow: hidden;
  color: #fff;
  scroll-snap-align: start;
  isolation: isolate;
  background: var(--surface-2);
  /* contain, never cover: the whole photo has to be readable, the client
     chose the frame and the module cannot cut a head off */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--radius-sm);
}

/* The photo lives on its own layer so the hover zoom never touches the text */
.hl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: inherit;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.45s ease;
}

.hl:hover::before { transform: scale(1.05); }

.hl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.75) 100%);
}

/* Image highlight carries no text, so it carries no veil either */
.hl--plain::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hl::before { transition: none; }
  .hl:hover::before { transform: none; }
}

.hl__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 68%;
}

.hl__text .badge {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}

.hl__text b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: pretty;
}

.hl__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

/* Module 25 — External feed: date over the headline, thumb when it comes */
.feed {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  color: inherit;
}

.feed__thumb {
  flex-shrink: 0;
  width: 76px;
  aspect-ratio: 16 / 10;
  background-color: var(--muted);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
}

.feed__info { display: grid; gap: 3px; min-width: 0; }

.feed__date {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

.feed__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
  transition: color var(--ease);
}

.feed__item:hover .feed__title { color: var(--accent); }

/* Module 26 — TV player */
.tv-player {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.tv-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Module 8 / 25 — News
   One story per row so the module survives being resized in the panel. */
.news {
  display: flex;
  flex-direction: column;
}

.news__item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 10px;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: background var(--ease);
}

.news__item:hover { background: var(--muted); }

.news__media {
  aspect-ratio: 16 / 10;
  background-color: var(--muted);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
}

.news__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

/* Always two lines tall: short headlines reserve the space, long ones stop at
   the second line. The break happens between words, never inside one. */
/* Solid pill in the accent colour, text in the page background colour */
.news__cat {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--p4, var(--fg));
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.news__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  color: var(--fg);
  transition: color var(--ease);
}

.news__item:hover .news__title { color: var(--accent); }

.news__date {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

.news__desc,
.news__meta { display: none; }

.card__sep { color: var(--border); }

/* Narrow column or resized module: smaller thumb and title */
.news--compact .news__item { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px 8px; }
.news--compact .news__title { font-size: var(--fs-base); }
.news--compact .news__cat { font-size: 10px; letter-spacing: 0.1em; }

@media (max-width: 560px) {
  .news__item { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .news__title { font-size: var(--fs-base); }
}

/* Module 10 — Videos */
.vcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  scroll-snap-align: start;
}

.vcard__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
}

/* Dark scrim keeps the play button readable over any thumbnail */
.vcard__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  transition: background var(--ease);
}

.vcard:hover .vcard__thumb::before { background: rgba(0, 0, 0, 0.42); }

.vcard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background var(--ease), border-color var(--ease);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.vcard__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 56%;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
  transform: translate(-50%, -50%);
}

.vcard:hover .vcard__play {
  background: var(--accent);
  border-color: var(--accent);
}

.vcard__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.vcard:hover .vcard__title { color: var(--accent); }

/* Module 3 — Events */
.ecard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  scroll-snap-align: start;
}

.ecard__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
}

/* The caption is capped at two text lines, so it never grows past the date
   block and every card in the carousel keeps the same height */
.ecard__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ecard__info {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.ecard__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  line-height: 1.1;
}

.ecard__day { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.ecard__hour { font-size: var(--fs-xs); color: var(--muted-fg); font-variant-numeric: tabular-nums; }

.ecard__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* One line only when a place sits under it: two lines plus the place would
   make the caption taller than the date block */
.ecard__info--place .ecard__name { -webkit-line-clamp: 1; }

.ecard__place {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-fg);
}

.ecard__place i { flex-shrink: 0; color: var(--accent); }

.ecard:hover .ecard__name { color: var(--accent); }

/* Events reserve more room: the caption carries a date block */
.module-3 .vcarousel { --vc-caption: 4.8em; }

/* Module 6 — Albums */
.acard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  scroll-snap-align: start;
}

/* Album photos are never cropped: the frame is filled with a blurred copy of
   the same photo, so a portrait shot leaves no empty bars on the sides */
.acard__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
}

.acard__thumb::before,
.acard__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
}

.acard__thumb::before {
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.acard__thumb::after {
  background-image: inherit;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.acard__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.acard:hover .acard__name { color: var(--accent); }

/* Module 16 — Top music */
.tracks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracks li { border-top: 0; }

.tracks li a {
  display: grid;
  grid-template-columns: 26px 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--ease);
}

.tracks li a:hover { background: var(--muted); }
.tracks li a:hover .ti b { color: var(--accent); }

.tn {
  font-size: var(--fs-md);
  font-weight: 800;
  text-align: center;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* The first three carry the accent, the rest stay quiet */
.tracks li:nth-child(n + 4) .tn { color: var(--muted-fg); }

.tcv {
  width: 46px;
  height: 46px;
  background: var(--muted) center / cover no-repeat;
  border-radius: var(--radius-sm);
}

.tracks .ti { min-width: 0; }

.tracks .ti b {
  display: block;
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  transition: color var(--ease);
}

.tracks .ti small {
  display: block;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-fg);
}

/* Poll results (markup comes from /parcial-poll, styles inline there) */
.module-12 [class^="parcial-"],
.module-12 [class*=" parcial-"] {
  padding: 0 !important;
  background: none !important;
}

/* No divider here: the filled bar already separates the rows */
.module-12 .poll-option {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px !important;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
}

/* The bar becomes the row background instead of a separate strip */
.module-12 .votes {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.module-12 .votes-percentage {
  height: 100% !important;
  background: none !important;
  border-radius: 0 !important;
  filter: none !important;
}

.module-12 .votes-percentage-bg {
  height: 100% !important;
  background: var(--accent-soft) !important;
  border-radius: var(--radius-sm) !important;
  transition: width 0.4s ease;
}

.module-12 .option-name {
  position: relative;
  z-index: 1;
  margin-bottom: 0 !important;
  font-size: var(--fs-base);
  font-weight: 600;
}

.module-12 .votes-label {
  font-size: var(--fs-sm) !important;
  font-weight: 800;
  color: var(--fg) !important;
  background: none !important;
  font-variant-numeric: tabular-nums;
}

.module-12 .msgSuc {
  margin-top: 12px !important;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent) !important;
}

/* Module 12 — Poll */
.poll__q {
  margin: 0 0 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--fg);
}

.poll__status { margin-top: 14px; }

.poll__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent-soft-fg);
  background: var(--accent-soft);
  border-radius: 999px;
}

.poll__badge i {
  font-size: var(--fs-xs);
  color: var(--accent);
}

.poll__hint {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-fg);
}

.poll-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-area input[type="checkbox"],
.poll-area input[type="radio"] { display: none; }

.poll-area label {
  position: relative;
  display: block;
  margin: 0;
  padding: 11px 14px;
  cursor: pointer;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease), background var(--ease);
}

.poll-area label:hover { border-color: var(--accent); }
/* theme.css, shared by every theme, sets .selected { border-color: p2 !important }.
   Same weight is needed here to keep the accent. */
.poll-area label.selected { border-color: var(--accent) !important; background: var(--accent-soft); }

.poll-area label .row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.poll-area label .column {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Square marker with a tick, in the same family as the rest of the theme */
.poll-area label .circle {
  position: relative;
  display: block;
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  margin-right: 12px;
  background: var(--card);
  /* theme.css sets this one from the panel too, so the weight has to match */
  border: 2px solid var(--accent) !important;
  border-radius: 5px;
  transition: border-color var(--ease), background var(--ease);
}

/* The tick is drawn as an image: the rotated border trick was landing off
   centre at this size */
.poll-area label.selected .circle {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--accent) !important;
}

.poll-area label .text {
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--ease);
}

.poll-area label .percent {
  display: none;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Result: a thin bar under the label instead of a block behind it */
.poll-area label .progress {
  position: relative;
  z-index: 0;
  display: none;
  width: 100%;
  height: 4px;
  margin: 10px 0 0;
  overflow: hidden;
  background: var(--border-2);
  border-radius: 999px;
}

.poll-area label .progress::after {
  content: "";
  display: block;
  width: calc(1% * var(--w));
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.35s ease;
}

.poll-area label.selectall { cursor: default; border-color: var(--border-2); background: none; }
.poll-area label.selectall .progress { display: block; }
.poll-area label.selectall .percent { display: block; }
.poll-area label.selectall .circle { display: none; }

.poll__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.pollSend--wide {
  flex: 1;
}

.pollSend--wide .btn {
  width: 100%;
}

.parcialBtn {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted-fg);
  background: transparent;
  transition: color var(--ease);
}

.parcialBtn:hover { color: var(--accent); }

/* Module 17 — Statistics: icon on the left, label over the number */
.stats {
  display: flex;
  flex-direction: column;
}

/* Two plain rows: label on the left, number on the right, same divider the
   other lists use */
.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 2px;
  border-top: 1px solid var(--border-2);
}

.stat:first-child { border-top: 0; }

.stat__icon { display: none; }

/* Label and number live inside this wrapper: it is the row, not .stat */
.stat__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.stat__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--muted-fg);
}

.stat b {
  flex-shrink: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.stat--live b { color: var(--accent); }

/* Module 24 — Hosts */
.hosts { margin: 0; padding: 0; list-style: none; }

.hosts a {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px solid var(--border-2);
}

.hosts li:first-child a { padding-top: 4px; border-top: 0; }
.hosts a:hover b { color: var(--accent); }

.avatar {
  width: 38px;
  aspect-ratio: 1;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  border-radius: 999px;
}

.hosts b {
  display: block;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  transition: color var(--ease);
}

.hosts small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted-fg);
}

/* Module 11 — Links */
.links { margin: 0; padding: 0; list-style: none; }

.links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--fg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.links li + li { margin-top: 8px; }
.links li:first-child a { padding-top: 12px; }

.links a:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* The arrow slides in instead of sitting there all the time */
.links a span {
  flex-shrink: 0;
  font-size: var(--fs-md);
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--ease), transform var(--ease);
}

.links a:hover span { opacity: 1; transform: translateX(0); }

/* Module 13 — Socials */
/* auto-fit instead of a fixed count: the tiles keep a usable size whatever
   the number of networks the client filled in */
/* The tiles are square, so a 1fr column in the centre turned each of them into
   a block as tall as the column is wide. The column has a ceiling now. */
.socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 76px));
  justify-content: start;
  gap: 6px;
}

.socials a {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  /* Fixed size: the icon does not follow the font chosen for the site */
  font-size: 21px;
  color: var(--fg);
  background: var(--surface);
  border-radius: var(--radius-sm);
  transition: background var(--ease), color var(--ease);
}

.socials a:hover { color: var(--accent-fg); background: var(--accent); }

/* Module 9 — Messages: no filled block, just a rule on the side and the
   author line on top */
.msgs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Outlined box, the same shape the poll options use: separates each message
   without painting a grey block behind it */
.msgs li {
  position: relative;
  padding: 12px 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease);
}

.msgs li:hover { border-color: var(--accent); }
.msgs li::before { display: none; }

.msgs__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}

.msgs__h b {
  overflow: hidden;
  max-width: 62%;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  color: var(--p4, var(--fg));
}

.msgs__h time {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--p4, var(--muted-fg));
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.msgs p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--p4, var(--muted-fg));
}

.msgs__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* Module 4 — Promotions */
.promos { display: flex; flex-direction: column; }

.promo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  color: inherit;
  border-top: 1px solid var(--border-2);
}

.promo:first-child { border-top: 0; padding-top: 4px; }
.promo:hover .promo__name { color: var(--accent); }

.promo__img {
  width: 64px;
  height: 64px;
  background: var(--muted);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
}

.promo__info {
  display: block;
  min-width: 0;
  overflow: hidden;
}

.promo__date {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
}

.promo__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg);
  transition: color var(--ease);
}

.promos--lg .promo { grid-template-columns: 120px minmax(0, 1fr); }
.promos--lg .promo__img { width: 120px; height: 120px; }
.promos--lg .promo__name { font-size: var(--fs-lg); -webkit-line-clamp: 3; }

/* Module 20 — App: flat block in the accent colour */
.card--app {
  position: relative;
  overflow: hidden;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: var(--radius);
}

/* A single diagonal band instead of the two radial glows */
.card--app::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background: color-mix(in oklch, var(--accent-fg) 10%, transparent);
  transform: rotate(18deg);
  pointer-events: none;
}

.app-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 26px 28px;
}

.card--app .badge {
  color: var(--accent-fg);
  background: color-mix(in oklch, var(--accent-fg) 16%, transparent);
  border-color: transparent;
}

.card--app .card__title {
  margin: 10px 0 6px;
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--accent-fg);
}

.card--app .card__desc {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: color-mix(in oklch, var(--accent-fg) 82%, var(--accent));
}

.app-card__l { min-width: 0; }

.app-card__r {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 700px) {
  .app-card__body { grid-template-columns: 1fr; gap: 18px; }
}

.app-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  min-height: 46px;
  padding: 10px 18px;
  color: var(--p2);
  background: var(--p1);
  border-radius: var(--radius-sm);
  transition: opacity var(--ease);
}

.app-store:hover { opacity: 0.82; }

/* Font Awesome glyphs sit smaller than their box, so they need more size
   than the SVG marks to read the same next to the text */
.app-store i { font-size: 28px; }
.app-store svg { flex-shrink: 0; }

.app-store small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.6;
}

.app-store b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.pos-2 .app-card__body,
.pos-4 .app-card__body { grid-template-columns: 1fr; gap: 16px; padding: 18px; }

/* In the side column the label wraps, so the button needs room to breathe */
.pos-2 .app-store,
.pos-4 .app-store,
.mod-reduced .app-store { min-width: 0; padding: 12px 16px; }

/* Module 2 — Ads */
.spot {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.spot { text-align: center; }

/* Never upscale: it blurs the advertiser artwork */
.spot img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Module 18 — Requests */
.request-banner {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}

.request-banner img { display: block; width: 100%; }

/* Without a banner in the panel the module becomes a call to the request page */
.request-banner--plain {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
}

.request-banner--plain:hover {
  background: var(--surface-2);
  border-color: color-mix(in oklch, var(--p3) 45%, var(--border));
}

.request-banner__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--p3) 16%, transparent);
  color: var(--p3);
  font-size: 18px;
}

.request-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.request-banner__text strong {
  font-size: 15px;
  font-weight: 700;
}

.request-banner__text span {
  font-size: 13px;
  color: var(--muted-fg);
}

/* Module 19 — Chat */
.chat-frame {
  width: 100%;
  height: 350px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* The center column is wide enough for a real conversation */
.center .chat-frame { height: 560px; }

@media (max-width: 900px) {
  .center .chat-frame { height: 420px; }
}

/* Module 21 — Slider */
/* Module 21 — Slides: controls live over the image and only on hover */
.slides {
  position: relative;
  container-type: inline-size;
  --vc-caption: 0px;
}

.slides .vcarousel__arrow,
.slides .vcarousel__dots {
  opacity: 0;
  transition: opacity var(--ease), background var(--ease), color var(--ease);
}

.slides .vcarousel__dots {
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  z-index: 2;
  margin: 0;
}

.slides .vcarousel__dots span { background: rgba(255, 255, 255, 0.55); }
.slides .vcarousel__dots span.is-active { background: #fff; }

.slides:hover .vcarousel__arrow,
.slides:hover .vcarousel__dots,
.slides .vcarousel__arrow:focus-visible { opacity: 1; }

@media (hover: none) {
  .slides .vcarousel__arrow,
  .slides .vcarousel__dots { opacity: 1; }
}

.slides__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  scroll-snap-align: start;
}

/* The slot takes the shape of the banner the station uploaded, up to a
   ceiling: a fixed height squeezed it, forcing the 1920x510 of the panel cut
   the sides off whoever sent another size, and with no limit at all an art in
   another shape grew the strip down the whole screen. */
.slides__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(510px, calc(100cqw * 510 / 1920));
  object-fit: cover;
}

.pos-1 .slides__item { border-radius: 0; }

/* Fade: every slide shares the same grid cell and only opacity changes */
.slides--fade .vcarousel__track {
  display: grid;
  overflow: hidden;
  scroll-snap-type: none;
}

.slides--fade .slides__item {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--slide-speed, 400ms) ease;
}

.slides--fade .slides__item.is-on { z-index: 1; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .slides--fade .slides__item { transition: none; }
}

.slider-banner { overflow: hidden; border-radius: var(--radius); }
.pos-1 .slider-banner { border-radius: 0; }

/* Module 22 — Camera */
.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.camera-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

/* Offline screen: animated TV static, no image file involved */
.camera-offline {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: var(--radius);
}

.camera-offline__noise {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.32;
  animation: cameraNoise 0.45s steps(5) infinite;
}

@keyframes cameraNoise {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-4%, -3%); }
  80% { transform: translate(7%, 5%); }
  100% { transform: translate(-3%, 6%); }
}

/* Bright band rolling down, like a signal loss */
.camera-offline__scan {
  position: absolute;
  right: 0;
  left: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: cameraScan 5s linear infinite;
}

@keyframes cameraScan {
  0% { top: -25%; }
  100% { top: 105%; }
}

.camera-offline__badge svg { width: 16px; height: 16px; }

.camera-offline__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .camera-offline__noise,
  .camera-offline__scan { animation: none; }
}

/* Module 27 — Podcast */
.podcast-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--ease);
}

.podcast-card:hover { border-color: var(--accent); }

/* display block: as an inline span the aspect-ratio box collapsed and the
   whole card came out with no height */
.podcast-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
}

.podcast-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
}

.podcast-card__count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.podcast-card__foot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 14px;
}

/* Same color pair the carousel arrows use */
.podcast-card__play {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--card);
  border-radius: 50%;
  transition: transform var(--ease);
}

.podcast-card:hover .podcast-card__play { transform: scale(1.06); }

.podcast-card__info { min-width: 0; line-height: 1.2; }

.podcast-card__info h4 {
  margin: 0 0 3px;
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.podcast-card__info span {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* Module 1 — Free content */
.free-content { overflow: hidden; }
.free-content img { height: auto; border-radius: var(--radius-sm); }

/* Resized modules (modules.reduced = 1)
   The centre of this theme is a single flex column, so a reduced module is
   still full width. Stacking the thumb over the text turned every row into a
   16/9 block as wide as the column: the row layout stays. */
.mod-reduced .news__item { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 14px 10px; }

/* Responsive */
@media (max-width: 1100px) {
  .app-card__body { grid-template-columns: 1fr; gap: 16px; }
  .hl { padding: 24px 24px; }
  .hl__text { max-width: 100%; }
}

@media (max-width: 760px) {
  /* stretch: the thumb used to sit much shorter than the text beside it */
  .news__item { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .news__media { aspect-ratio: auto; min-height: 88px; }
  .news__title { font-size: var(--fs-base); -webkit-line-clamp: 2; }
  .news__date { min-width: 34px; padding: 4px 5px; }
  .news__date b { font-size: var(--fs-sm); }
  .vcarousel__track { grid-auto-columns: 100%; }
  .hl { height: 220px; }
  .hl__text b { font-size: var(--fs-lg); }
  .socials { grid-template-columns: repeat(auto-fit, minmax(60px, 84px)); }
  .socials a { font-size: 23px; }
}

/* Camera: play, stop and fullscreen over the picture */
/* A bar across the foot of the picture, the way a video player looks. It only
   shows up under the pointer, and stays put where there is no hover at all */
.camera-ctrl {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.camera-box:hover .camera-ctrl,
.camera-box:focus-within .camera-ctrl { opacity: 1; }

@media (hover: none) {
  .camera-ctrl { opacity: 1; }
}

.camera-ctrl__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.camera-ctrl__btn:hover { background: rgba(255, 255, 255, 0.18); }
.camera-ctrl__btn svg { width: 22px; height: 22px; }

/* Fullscreen: the box drops the reserved ratio and the picture fits whole */
.camera-box:fullscreen { padding-bottom: 0 !important; height: 100% !important; background: #000; }
.camera-box:fullscreen .camera-video { object-fit: contain; }