/* ===========================
   AdmiraVox – Teasers (Option A)
   File: teasers.css
   Works with the "Minimal HTML tweak" markup.
   =========================== */

/* -------- Design tokens -------- */
:root {

  --line: rgb(130, 130, 230);
  --line-subtle: rgba(15, 15, 20, 0.08);

  --gap-sm: 0.75rem;
  --gap: 1.25rem;
  --gap-lg: 2rem;

  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .10);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .16);

  --title-h: clamp(48px, 6vw, 80px);
  --logo-h: clamp(48px, 6vw, 80px);
  --thumb-h: clamp(48px, 6vw, 80px);
  /*clamp(160px, 22vw, 220px);*/

}

/* -------- Section container -------- */
.teasers {
  background: var(--site-bg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  margin-inline: auto;
  /*padding: clamp(var(--fontSz0), 3vw, var(--fontSz2)) 0;*/
}




/* -------- Card base -------- */
/* You can control the frame with data attributes on .teaser-card:
   data-rounded="none|sm|md|lg"
   data-border="none|hairline|subtle|bold"
   data-shadow="none|sm|md|lg"
*/
.teaser-card {
  position: relative;
  background: var(--card-bg);
  color: var(--font-color);
  padding: clamp(var(--fontSz0), 2.5vw, var(--fontSz2));
  border-radius: var(--card-radius);
  border: var(--card-border-width) solid var(--card-border-color);
  box-shadow: none;
}

/* Rounding */
.teaser-card[data-rounded="none"] {
  border-radius: var(--radius-none);
}

.teaser-card[data-rounded="sm"] {
  border-radius: var(--radius-sm);
}

.teaser-card[data-rounded="md"] {
  border-radius: var(--radius-md);
}

.teaser-card[data-rounded="lg"] {
  border-radius: var(--radius-lg);
}

/* Borders */
.teaser-card[data-border="hairline"] {
  border-width: 1px;
  border-color: var(--line-subtle);
}

.teaser-card[data-border="subtle"] {
  border-width: 1px;
  border-color: var(--line);
}

.teaser-card[data-border="bold"] {
  border-width: 2px;
  border-color: var(--line);
}

.teaser-card[data-border="none"] {
  border-width: 0;
}

/* Shadows */
.teaser-card[data-shadow="sm"] {
  box-shadow: var(--shadow-sm);
}

.teaser-card[data-shadow="md"] {
  box-shadow: var(--shadow-md);
}

.teaser-card[data-shadow="lg"] {
  box-shadow: var(--shadow-lg);
}

.teaser-card[data-shadow="none"] {
  box-shadow: none;
}

/* -------- Typography -------- */
.teaser-title {
  height: var(--title-h);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 var(--gap);
}

.teaser-kicker {
  color: var(--font-muted-color);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.5;
  margin: 0 0 var(--gap);
}

/* -------- Rows (logos & thumbs) -------- */
.teaser-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(var(--fontSz-2), 2vw, var(--fontSz2));
  margin: 0 0 var(--gap);
  padding: 0;
  list-style: none;
}

.teaser-row>li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Logos */
.teaser-row.logos img {
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
  filter: none;
  /*grayscale(100%);*/
  opacity: 1;
  /*.85;*/
  /*transition: filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);*/
}

.teaser-row.logos img:hover,
.teaser-row.logos img:focus-visible {
  filter: none;
  opacity: 1;
  /*transform: translateY(-0px);*/
}

/* Thumbnails */
.teaser-row.thumbs img {
  height: var(--thumb-h);
  width: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--thumb-radius);
  display: block;
  filter: grayscale(0);
  /*transition: transform var(--transition-fast), filter var(--transition-fast);*/
}


/*.teaser-row.thumbs:hover img {
   slight group zoom on hover 
  transform: translateY(-0px);
}

.teaser-row.thumbs img:hover {
  transform: translateY(-0px);
}
*/

/* Optional grayscale variant for thumbs */
.teaser-row.thumbs.to-grayscale img,
.teaser-card .to-grayscale img {
  filter: grayscale(100%);
}

.teaser-row.thumbs.to-grayscale img:hover,
.teaser-card .to-grayscale img:hover {
  filter: grayscale(0%);
}


/* -------- Accessibility & polish -------- */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* -------- Layout helpers (optional) -------- */
/* If you want the teasers to align to a max width container,
   wrap the section in a .container or apply this to .teasers */
/*.container, .teasers.container {
  width: min(var(--site-width), 92vw);
  margin-inline: auto;
}*/

.teaser-card[data-date]::before {
  content: attr(data-date);
  position: absolute;
  top: var(--fontSz0);
  right: var(--fontSz0);
  background: var(--card-bg);
  color: var(--font-color);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: 999px;
  padding: calc(var(--fontSz-2)/2) var(--fontSz-2);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--meta-letter-spacing);
  font-size: var(--meta-font-size);
  box-shadow: var(--card-shadow);
}

.teaser-meta,
.teaser-kicker.meta {
  color: var(--font-muted-color);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--meta-letter-spacing);
  font-size: var(--meta-font-size);
}

/* unified card hover */
.teaser-card {
  will-change: transform;
  transition: var(--card-transition);
}

.teaser-card:hover,
.teaser-card:focus-within {
  transform: translateY(var(--card-hover-translate-y));
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-hover-border-color);
}



/* === Auto-generated responsiveness review for: assets/css/teasers.css === */
/* Breakpoint skeleton (fill in as needed) */
@media (max-width: 1200px) {
  /* xl down */
}

@media (max-width: 992px) {
  /* lg down: stack sidebars, shrink grids */
}

@media (max-width: 768px) {
  /* md down: single-column layout */
}

@media (max-width: 576px) {
  /* sm down: tighten paddings, font sizes */
  /* -------- Rows (logos & thumbs) -------- */
.teaser-row {
    flex-direction: column /* stack items on phones */;
  }
}

@media (max-width: 768px) {

}

/* Auto responsive two-up if there’s room */
@media (min-width: 920px) {

  /* 2-column grid — stack to 1 column on phones. */
  .teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* === End auto-generated review === */