/* ==========================================================================
   Content Block: activewerbung/teaser-boxes
   --------------------------------------------------------------------------
   Boxes with image, headline, subheadline and link. The template sets the
   options as classes:

   .teaser-boxes--below | --overlay           text below the image / on the image
   .teaser-boxes--font-serif | --font-sans    font of the headlines
   .teaser-boxes--align-left | --align-center  alignment of headline + subheadline
   .teaser-boxes--ratio-3-2 | -4-3 | -1-1 | -4-5   image format of all boxes
   .teaser-box--link                          box with link (whole box clickable)

   Global parts: .section (spacing / background, Css/Global/layout.css), .container.

   01. Settings
   02. Grid
   03. Box: image, headline, subheadline
   04. Text on the image (overlay)
   05. Link: whole box clickable
   ========================================================================== */


/* ==========================================================================
   01. SETTINGS
   ========================================================================== */
.teaser-boxes {
  --tb-gap: clamp(1rem, 2.2vw, 1.875rem);             /* between the boxes, 30px at 1360 */
  --tb-row-gap: clamp(2rem, 3.5vw, 3rem);             /* between rows with text below the image */
  --tb-ratio: 3 / 2;
}
.teaser-boxes--ratio-4-3 { --tb-ratio: 4 / 3; }
.teaser-boxes--ratio-1-1 { --tb-ratio: 1 / 1; }
.teaser-boxes--ratio-4-5 { --tb-ratio: 4 / 5; }

/* Text on the image: same gap in both directions */
.teaser-boxes--overlay { --tb-row-gap: var(--tb-gap); }


/* ==========================================================================
   02. GRID
   1 column, 2 from 40rem, 3 from 64rem (same steps as the sizes attribute in Frontend.html).
   An incomplete last row stays left aligned.
   ========================================================================== */
.teaser-boxes__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tb-row-gap) var(--tb-gap);
  margin: 0;
  padding: 0;
}
@media (min-width: 40rem) {
  .teaser-boxes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .teaser-boxes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   03. BOX
   ========================================================================== */
.teaser-box {
  position: relative;
  display: flex;
  flex-direction: column;
}

.teaser-box__media {
  overflow: hidden;
  background: var(--c-tint);                          /* while the image loads */
}
.teaser-box__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--tb-ratio);
  object-fit: cover;
}

.teaser-box__text { padding-top: clamp(0.875rem, 1.5vw, 1.25rem); }
.teaser-boxes--align-center .teaser-box__text { text-align: center; }

/* Not :where(): wins over the global heading size (--fs-heading) */
.teaser-box__headline {
  margin: 0;
  font-size: var(--fs-m);
  line-height: var(--lh-heading);
}
.teaser-boxes--font-sans .teaser-box__headline {
  font-family: var(--ff-base);
  font-weight: var(--fw-medium);
}

.teaser-box__subheadline {
  margin: 0.375em 0 0;
  font-size: var(--fs-text-small);
  line-height: 1.45;
  opacity: 0.8;                                       /* also on the dark background */
}


/* ==========================================================================
   04. TEXT ON THE IMAGE (OVERLAY)
   Image and text in the same grid cell, text at the bottom on a dark
   gradient (readable on any image). Dark box if there is no image.
   ========================================================================== */
.teaser-boxes--overlay .teaser-box {
  display: grid;
  overflow: hidden;
  background: var(--c-text);
  color: var(--c-white);
}
.teaser-boxes--overlay .teaser-box > * { grid-area: 1 / 1; }
.teaser-boxes--overlay .teaser-box:not(:has(.teaser-box__media)) { aspect-ratio: var(--tb-ratio); }

.teaser-boxes--overlay .teaser-box__text {
  z-index: 1;
  align-self: end;
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 2vw, 1.75rem) clamp(1rem, 1.75vw, 1.5rem);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.65));
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
.teaser-boxes--overlay .teaser-box__headline { font-size: var(--fs-l); }
.teaser-boxes--overlay .teaser-box__subheadline { opacity: 0.9; }


/* ==========================================================================
   05. LINK
   The headline link is stretched over the whole box (::after). Hover: the
   image zooms in slightly, the headline is underlined. Keyboard focus: ring
   around the whole box.
   ========================================================================== */
.teaser-box__link {
  color: inherit;
  text-decoration: none;
}
.teaser-box__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.teaser-box__link:focus-visible { outline: none; }
.teaser-box:has(.teaser-box__link:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.teaser-box--link .teaser-box__image { transition: scale 0.6s ease; }
.teaser-box--link:hover .teaser-box__image { scale: 1.03; }
.teaser-box--link:hover .teaser-box__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .teaser-box--link .teaser-box__image { transition: none; }
}