/* De templategalerij: een overzicht van kant-en-klare nieuwsbrieven en
   een detailpagina per stuk.

   De voorbeelden op deze pagina's zijn echte e-mail-HTML -- tabellen
   met inline stijlen -- die in de pagina wordt meegerenderd in plaats
   van als screenshot. Daarom staat hier vrijwel niets over hun
   uiterlijk: alle opmaak van een mailing zit in zijn eigen partial,
   inline, zoals een mailclient het wil. Dit bestand regelt alleen de
   lijst, de kaders eromheen en het slot op de broncode.

   De thumbnail is diezelfde mailing, op 600px gerenderd en met
   transform verkleind. Verkleinen met transform betekent dat de tekst
   scherp blijft; de kaart klipt de rest weg. */

@layer components {
  .tpl-grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }

  .tpl-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    color: inherit;
    text-decoration: none;
    transition: transform var(--motion), box-shadow var(--motion);
  }

  .tpl-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float);
  }

  .tpl-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-block-end: 1px solid var(--color-line);
    background: var(--color-surface);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }

  /* De mailing zelf, op ware breedte gerenderd en teruggeschaald. */
  .tpl-card__scale {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    width: 600px;
    margin-inline-start: -300px;
    transform: scale(0.62);
    transform-origin: top center;
    pointer-events: none;
  }

  .tpl-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-m);
  }

  .tpl-card__brand {
    color: var(--color-accent);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .tpl-card__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.2;
  }

  .tpl-card__body p {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .tpl-card__use {
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
    color: var(--color-accent);
    font-size: var(--step--1);
    font-weight: 600;
  }

  /* Filterrij boven het overzicht: labels, geen knoppen. */
  .tpl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-m);
  }

  .tpl-filters a {
    padding: 0.35em 0.9em;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
  }

  .tpl-filters a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* Detailpagina: de mailing op ware grootte in een kader. */
  .tpl-detail {
    display: grid;
    /* minmax(0, ...) is hier niet optioneel: zonder mag de kolom niet
       smaller worden dan de 600px-mailtabel erin, en duwt de preview
       op een telefoon de hele pagina breder dan het scherm. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }

  .tpl-detail > * {
    min-width: 0;
  }

  @media (min-width: 62rem) {
    /* Preview en paneel als paar gecentreerd, zodat er geen dood gat
       tussen de kolommen valt op brede schermen. */
    .tpl-detail {
      grid-template-columns: minmax(0, 40rem) 22rem;
      justify-content: center;
      gap: var(--space-xl);
    }

    /* Het paneel loopt mee tijdens het scrollen door een lange mail. */
    .tpl-detail__aside {
      position: sticky;
      inset-block-start: var(--space-l);
    }
  }

  /* Lichte kop boven een template, bouwt op dt-hero uit detail.css. */
  .tpl-hero {
    padding-block: var(--space-xl) var(--space-m);
  }

  .tpl-preview {
    width: min(100%, 40rem);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .tpl-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-2xs) var(--space-s);
    border-block-end: 1px solid var(--color-line);
    background: #ffffff;
    color: var(--color-muted);
    font-size: 0.72rem;
  }

  .tpl-specs {
    margin: 0;
    font-size: var(--step--1);
  }

  .tpl-specs div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--color-line);
  }

  .tpl-specs dt {
    color: var(--color-muted);
  }

  .tpl-specs dd {
    margin: 0;
    font-weight: 600;
    text-align: end;
  }

  /* Het slot: de broncode is zichtbaar genoeg om te herkennen en
     onleesbaar genoeg om een account voor te maken. */
  .tpl-lock {
    position: relative;
    overflow: hidden;
    margin-block-start: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-ink);
  }

  .tpl-lock pre {
    margin: 0;
    padding: var(--space-m);
    color: rgb(255 255 255 / 0.7);
    font-size: 0.7rem;
    line-height: 1.5;
    filter: blur(3px);
    user-select: none;
    overflow: hidden;
  }

  .tpl-lock__panel {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-xs);
    padding: var(--space-m);
    background: rgb(16 17 22 / 0.72);
    color: #ffffff;
    text-align: center;
  }

  .tpl-lock__panel p {
    max-width: 22rem;
    color: rgb(255 255 255 / 0.75);
    font-size: var(--step--1);
  }

  .tpl-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--color-line);
    font-size: var(--step--1);
  }
}