/* DSC-199 Drive-verwijzing-widget: "Stapel & lift" (sectie G).
 *
 * Een tactiele stapel documentkaartjes met officiële Google-producticonen steekt
 * uit een gedeelde Drive-map. In rust wiegt de stapel bijna onmerkbaar (één
 * gedeelde sway op het waaierblok) en tonen de kaartjes enkel hun icoon; bij
 * hover of focus-visible opent de waaier zich, liften de kaartjes uit de map en
 * verschijnt op elk kaartje netjes de bestandsnaam als bijschrift (FEEDBACK
 * ronde 10: geen los zwevend pill-label en geen rusteloze bob per kaartje meer).
 * Focus-visible geeft exact dezelfde waaier en lift als hover.
 *
 * Uitsluitend transform/opacity wordt geanimeerd (60fps): schaduwverdieping van
 * de kaartjes ligt op een ::after die met opacity fadet, nooit op box-shadow
 * zelf. De sway pauzeert tijdens hover/focus zodat de open waaier stilstaat om
 * te lezen. Geen permanente will-change.
 *
 * De waaier-geometrie per kaartje (--x/--r, --hx/--hr, compacte --xs/--hxs,
 * --y/--hy, --z/--i) komt als inline custom properties uit
 * DriveLinkHelper. Container queries op de widget-root (inline-size) sturen de
 * compacte waaier en het stapelen van de kolommen, zodat het gedrag de echte
 * widgetbreedte volgt (col-span-3 t/m 12) in plaats van het viewport.
 *
 * Reduced motion (patroon components/motion.css): de ambient animaties staan
 * expliciet stil onder prefers-reduced-motion én [data-motion="reduced"]; de
 * hover-transities vallen via de duurtokens al terug naar 0.01ms. Overflow
 * blijft overal zichtbaar: de focus-ring (2px + 2px offset) wordt nooit
 * afgeknipt en de open waaier mag buiten het toneel steken. */

.drive-link {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft);
}
.drive-link:hover,
.drive-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.dl-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}
.drive-link--vol .dl-body {
  padding: 30px 34px;
}

/* ---- eyebrow: Drive-beeldmerk + brontype ------------------------------- */

.dl-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
.dl-eyebrow-merk {
  height: 15px;
  width: auto;
  flex: none;
}
.dl-eyebrow-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-subtle);
}

/* ---- kop, tekst, chips, metadata --------------------------------------- */

/* Accent: ingesprongen verticaal Young Orange pill-streepje links van de kop,
 * los van de hoeken (Synthese-accenttaal), nooit een meebuigende rand. */
.dl-head {
  position: relative;
  display: block;
  padding-left: 14px;
  margin-top: 14px;
}
.dl-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 9999px;
  background: var(--color-brand);
}
.dl-title {
  display: block;
  font-size: 16.5px;
  line-height: 1.18;
}
.dl-text {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-subtle);
  max-width: 58ch;
}
.drive-link--half .dl-title {
  font-size: 21px;
}
.drive-link--half .dl-text {
  font-size: 14px;
}
.drive-link--vol .dl-head {
  padding-left: 16px;
  margin-top: 16px;
}
.drive-link--vol .dl-title {
  font-size: 32px;
  line-height: 1.06;
}
.drive-link--vol .dl-text {
  font-size: 15px;
  margin-top: 12px;
}

/* Bestandschips (half/vol): namen ook in rust en op touch leesbaar. */
.dl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-black);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 9999px;
  padding: 5px 10px 6px;
}
.dl-chip svg {
  height: 13px;
  width: auto;
  flex: none;
}
.dl-chip-naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- footer: pill-CTA + domein-hint ------------------------------------ */

.dl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}
.dl-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-brand);
  color: var(--color-black);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: 9999px;
  padding: 9px 15px;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out-soft);
}
.drive-link:hover .dl-cta,
.drive-link:focus-visible .dl-cta {
  background: color-mix(in srgb, var(--color-brand) 88%, var(--color-black));
}
.dl-cta .dl-cta-pijl {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-width: 2.4;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.drive-link:hover .dl-cta-pijl,
.drive-link:focus-visible .dl-cta-pijl {
  transform: translate(2px, -2px);
}
.dl-domein {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--color-subtle);
  white-space: nowrap;
}
.drive-link--vol .dl-footer {
  padding-top: 24px;
  justify-content: flex-start;
  gap: 16px;
}
.drive-link--vol .dl-cta {
  font-size: 14px;
  padding: 11px 18px;
}
.drive-link--vol .dl-cta .dl-cta-pijl {
  width: 15px;
  height: 15px;
}

/* ---- het toneel: map + waaier ------------------------------------------ */

.dl-stage {
  position: relative;
  display: block;
  height: var(--stage-h);
  margin-top: 18px;
  --doc-w: 100px;
  --doc-h: 112px;
  --ic-h: 32px;
  --pocket-h: 46px;
  --stage-h: 172px;
  /* Ruimte onder het voorvak; op formaten met een grijs toneelvlak (vol) laat
   * dit het vlak netjes ook aan de onderkant om de map-balk heen sluiten. */
  --stage-pad-b: 0px;
}
.dl-sway {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--stage-pad-b);
  z-index: 2;
  animation: dl-sway 9s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.drive-link:hover .dl-sway,
.drive-link:focus-visible .dl-sway {
  animation-play-state: paused;
}
/* FEEDBACK jul 2026: solo (1 bestand) = rustige compacte kaart. Geen ambient-
 * waaier-animatie, en het bestandsicoon + naam staan in rust al zichtbaar
 * (i.p.v. pas op hover), zodat de kaart in één oogopslag "1 document" toont. */
.dl-stage--solo .dl-sway {
  animation: none;
}
.dl-stage--solo .dl-doc-name {
  opacity: 1;
}

/* Map: rug (achter de kaartjes) + voorvak (ervoor). De rug is een symmetrische
 * diepte-stapel: het brede rugvlak plus twee gecentreerde, oplopend smallere en
 * lichtere balkjes die er bovenuit piepen (als papieren die de diepte in gaan),
 * links en rechts gelijk. Statisch; alleen de kaartjes en het voorvak bewegen. */
.dl-folderback {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: calc(var(--stage-pad-b) + 6px);
  height: calc(var(--pocket-h) + 10px);
  background: color-mix(in srgb, var(--color-line) 78%, var(--color-paper));
  border-radius: 12px;
  z-index: 1;
}
.dl-folderback::before,
.dl-folderback::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--color-line) 52%, var(--color-paper));
  border-radius: 9px 9px 0 0;
}
.dl-folderback::before {
  left: 14%;
  right: 14%;
  top: -9px;
  height: 16px;
}
.dl-folderback::after {
  left: 24%;
  right: 24%;
  top: -16px;
  height: 16px;
  background: color-mix(in srgb, var(--color-line) 34%, var(--color-paper));
}
.dl-pocket {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: var(--stage-pad-b);
  height: var(--pocket-h);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.dl-pocket-merk {
  height: 17px;
  width: auto;
  flex: none;
}
.dl-pocket-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Documentkaartjes. --dl-x/--dl-hx zijn een indirectie zodat container
 * queries de spreiding kunnen bijsturen zonder de inline properties te
 * overschrijven: --dl-schaal knijpt de waaier op tussenmaten, de compacte
 * waarden (--xs/--hxs) nemen het op smalle containers helemaal over. */
.dl-doc {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: var(--doc-w);
  margin-left: calc(var(--doc-w) / -2);
  z-index: var(--z, 2);
  --dl-x: calc(var(--x, 0px) * var(--dl-schaal, 1));
  --dl-hx: calc(var(--hx, 0px) * var(--dl-schaal, 1));
  transform: translate(var(--dl-x), var(--y, 0px)) rotate(var(--r, 0deg));
  transform-origin: 50% 100%;
  transition: transform var(--duration-panel) var(--ease-out-soft);
  transition-delay: calc(var(--i, 0) * 24ms);
}
.drive-link:hover .dl-doc,
.drive-link:focus-visible .dl-doc {
  transform: translate(var(--dl-hx), var(--hy, -30px)) rotate(var(--hr, 0deg));
}
/* FEEDBACK ronde 10: het kaartje is nu een net "bestandskaartje": producticoon
 * en bestandsnaam als groep verticaal gecentreerd, de naam als bijschrift OP de
 * kaart (geen los zwevend pill-label). Geen ambient bob meer per kaartje. */
.dl-doc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--doc-h);
  width: 100%;
  background: white;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 14px 8px;
  box-shadow: var(--shadow-card);
}
/* Schaduwverdieping via opacity op een ::after, nooit box-shadow animeren. */
.dl-doc-body::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: var(--shadow-raised);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-panel) var(--ease-out-soft);
}
.drive-link:hover .dl-doc-body::after,
.drive-link:focus-visible .dl-doc-body::after {
  opacity: 1;
}
.dl-doc-icoon {
  height: var(--ic-h);
  width: auto;
  flex: none;
}
/* De bestandsnaam als net bijschrift binnen het kaartje: volle kaartbreedte,
 * gecentreerd, max twee regels met nette afkap (geen overlopend pill-label meer).
 * In rust verborgen (schoon stapeltje iconen); bij hover/focus faadt het
 * bijschrift mee in terwijl de waaier opent. Het bijschrift draait mee met het
 * kaartje (het hoort er nu bij), dus geen tegen-rotatie. */
.dl-doc-name {
  /* Klauw de horizontale kaartpadding terug zodat een langere naam op de
   * woordgrens (spatie) afbreekt i.p.v. midden in een woord. */
  width: calc(100% + 8px);
  margin-inline: -4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--color-black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  opacity: 0;
  transition: opacity var(--duration-panel) var(--ease-out-soft);
  transition-delay: calc(var(--i, 0) * 24ms);
}
.drive-link:hover .dl-doc-name,
.drive-link:focus-visible .dl-doc-name {
  opacity: 1;
}

/* ---- formaten ----------------------------------------------------------- */

/* Half + vol: content links, toneel rechts. */
.dl-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  flex: 1;
}
.dl-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.drive-link--half .dl-stage,
.drive-link--vol .dl-stage {
  margin-top: 0;
  height: auto;
  min-height: var(--stage-h);
  align-self: stretch;
}
.drive-link--half .dl-stage {
  --doc-w: 108px;
  --doc-h: 124px;
  --ic-h: 38px;
  --pocket-h: 48px;
  --stage-h: 204px;
}
.drive-link--vol .dl-cols {
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: 40px;
}
.drive-link--vol .dl-stage {
  --doc-w: 124px;
  --doc-h: 142px;
  --ic-h: 44px;
  --pocket-h: 54px;
  --stage-h: 252px;
  --stage-pad-b: 18px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.drive-link--vol .dl-pocket {
  background: white;
}
.drive-link--vol .dl-doc-name {
  background: white;
}

/* Bron :document: één grote documentkaart in plaats van een waaier. */
.dl-stage--document {
  --doc-w: 124px;
  --doc-h: 136px;
  --ic-h: 44px;
}
.drive-link--half .dl-stage--document {
  --doc-w: 136px;
  --doc-h: 152px;
  --ic-h: 50px;
}
.drive-link--vol .dl-stage--document {
  --doc-w: 156px;
  --doc-h: 176px;
  --ic-h: 60px;
}
/* De ene documentkaart staat op t=0 en zou de volle boog-lift van de waaier
 * krijgen; omdat de kaart zelf groter is schoof hij dan over de eyebrow.
 * Eigen, bescheiden lift per formaat (overschrijft de inline --hy via de
 * transform, want inline custom properties winnen van een CSS-regel). */
.drive-link:hover .dl-stage--document .dl-doc,
.drive-link:focus-visible .dl-stage--document .dl-doc {
  transform: translate(var(--dl-hx), -24px) rotate(var(--hr, 0deg));
}
.drive-link--half:hover .dl-stage--document .dl-doc,
.drive-link--half:focus-visible .dl-stage--document .dl-doc {
  transform: translate(var(--dl-hx), -30px) rotate(var(--hr, 0deg));
}
.drive-link--vol:hover .dl-stage--document .dl-doc,
.drive-link--vol:focus-visible .dl-stage--document .dl-doc {
  transform: translate(var(--dl-hx), -34px) rotate(var(--hr, 0deg));
}
/* Bij die bescheiden lift zou de naam-chip half achter het voorvak blijven
 * hangen; als sticker net boven de voorvak-lijn is hij volledig leesbaar. */
.drive-link:hover .dl-stage--document .dl-doc-name,
.drive-link:focus-visible .dl-stage--document .dl-doc-name {
  transform: translateY(-14px);
}

/* FEEDBACK jul 2026 (solo): het ene documenttegeltje verticaal centreren in de
 * (hogere) tekstkolom i.p.v. onderaan mee te stretchen, en op hover NIET omhoog
 * laten vliegen — de naam is al zichtbaar, dus die moet niet wegschieten. */
.drive-link--half .dl-stage--solo,
.drive-link--vol .dl-stage--solo {
  align-self: center;
  height: var(--stage-h);
  min-height: 0;
}
.drive-link--half .dl-stage--solo {
  --stage-h: 160px;
}
.drive-link--vol .dl-stage--solo {
  --stage-h: 188px;
}
.drive-link:hover .dl-stage--solo .dl-doc,
.drive-link:focus-visible .dl-stage--solo .dl-doc,
.drive-link--half:hover .dl-stage--solo .dl-doc,
.drive-link--half:focus-visible .dl-stage--solo .dl-doc,
.drive-link--vol:hover .dl-stage--solo .dl-doc,
.drive-link--vol:focus-visible .dl-stage--solo .dl-doc {
  transform: translate(var(--dl-x), var(--y, 0px)) rotate(var(--r, 0deg));
}
.drive-link:hover .dl-stage--solo .dl-doc-name,
.drive-link:focus-visible .dl-stage--solo .dl-doc-name {
  transform: none;
}
/* Bij solo geen voorvak (pocket): dat dekt de onderkant van de tegel af en zou
 * een langere naam half verbergen. Zonder pocket toont de tegel het icoon + de
 * volledige naam netjes gecentreerd; de "Google Drive · Document"-branding staat
 * al in de eyebrow. */
.dl-stage--solo .dl-pocket {
  display: none;
}

/* ---- ambient motion ------------------------------------------------------ */

@keyframes dl-sway {
  from {
    transform: rotate(-0.55deg) translateY(0);
  }
  to {
    transform: rotate(0.65deg) translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dl-sway {
    animation: none;
  }
}
[data-motion="reduced"] .dl-sway {
  animation: none;
}

/* ---- responsive (container queries op de widgetbreedte) ----------------- */

/* Vol op een smallere contentkolom (toneel ~40% van de widget): kleinere
 * kaartjes en een geknepen waaier, zodat de rustsituatie binnen het
 * papier-toneel blijft en de open waaier hooguit de kolom-gap in steekt. */
@container (max-width: 1100px) {
  .drive-link--vol .dl-doc {
    --dl-schaal: 0.8;
  }
  /* Het toneel rekt hier niet mee met een hoge contentkolom (dat gaf een
   * grotendeels leeg beige vlak boven de geknepen waaier): vaste hoogte,
   * verticaal gecentreerd naast de content. */
  .drive-link--vol .dl-stage {
    align-self: center;
    height: var(--stage-h);
    --doc-w: 108px;
    --doc-h: 124px;
    --ic-h: 38px;
    --pocket-h: 48px;
    --stage-h: 224px;
  }
  /* Krap voorvak: de redactionele teller wijkt voordat het maplabel
   * truncgeert (de teller staat op vol ook al in de metadata-regel). */
  .drive-link--vol .dl-pocket-count {
    display: none;
  }
}

/* Half nét boven de stapelgrens: zelfde recept, één maat kleiner. */
@container (max-width: 640px) {
  .drive-link--half .dl-doc {
    --dl-schaal: 0.85;
  }
  .drive-link--half .dl-stage {
    --doc-w: 100px;
    --doc-h: 112px;
    --ic-h: 32px;
    --stage-h: 192px;
  }
}

/* Smal widget (half/vol onder md, of een smalle grid-cel): kolommen stapelen,
 * toneel bovenaan, compactere maten: de mockup-regels van 640px, maar dan
 * gemeten aan de widget zelf. */
@container (max-width: 480px) {
  /* Ook expliciet voor vol: de basisregel .drive-link--vol .dl-cols heeft een
   * hogere specificiteit dan .dl-cols en zou anders van deze query winnen. */
  .dl-cols,
  .drive-link--vol .dl-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .drive-link--half .dl-stage,
  .drive-link--vol .dl-stage {
    order: -1;
    margin-bottom: 12px;
    min-height: var(--stage-h);
  }
  .drive-link--half .dl-stage {
    --stage-h: 182px;
  }
  .drive-link--vol .dl-body {
    padding: 22px 24px 24px;
  }
  .drive-link--vol .dl-stage {
    --doc-w: 104px;
    --doc-h: 120px;
    --ic-h: 36px;
    --pocket-h: 48px;
    --stage-h: 196px;
  }
  .drive-link--vol .dl-title {
    font-size: 24px;
  }
  .drive-link--half .dl-doc,
  .drive-link--vol .dl-doc {
    --dl-x: var(--xs, var(--x, 0px));
    --dl-hx: var(--hxs, var(--hx, 0px));
  }
  /* Vijf kaartjes op een smal toneel laten geen leesbare fan-chips toe; op
   * vol staan alle namen toch al als dl-chips in de content, dus hier
   * vervallen de fan-chips helemaal. */
  .drive-link--vol .dl-doc-name {
    display: none;
  }
  /* Smalle widget: de eyebrow houdt alleen "Google Drive" over, zodat hij
   * niet over twee regels wrapt. */
  .dl-eyebrow-bron {
    display: none;
  }
}

/* Heel smal (col-span-3, mobiel): ook de kaart-waaier compact, zodat de open
 * waaier binnen de kaartrand blijft. */
@container (max-width: 360px) {
  .dl-doc {
    --dl-x: var(--xs, var(--x, 0px));
    --dl-hx: var(--hxs, var(--hx, 0px));
  }
}

/* Krap voorvak: het maplabel wint van de redactionele teller. */
@container (max-width: 300px) {
  .dl-pocket-count {
    display: none;
  }
}