/*
  TILE — the shared overview card used across post types: the activity/agenda
  tile (.tile--agenda, also the linked "event" flavour), the vacancy tile
  (.tile--vacancy), the group tile (.tile--group) and the offering tile
  (.tile--offering, "Boekbaar aanbod"). One base card + variation classes for the
  per-type bits, so every overview looks like one family.

  The overview GRIDS that lay these out stay with their own components
  (.agenda / .agenda__grid, .vacancies, .group-grid, .offerings-grid), as does
  the agenda date badge (.agenda__badge*, agenda.css) — those aren't part of the
  card itself.

  ── "LEES MEER" DISCLOSURE (.tile__panel) ───────────────────────────────────
  agenda + vacancy tiles hide the remainder of their text behind a "Lees meer"
  toggle (.tile__more). The panel animates open with the grid-template-rows
  0fr↔1fr technique (same as the accordion), wired by assets/js/tile.js: the
  click flips aria-expanded + toggles .is-collapsed. Ships collapsed, so without
  JS the remainder stays hidden (matching the previous [hidden] behaviour).

  The panel is a normal child of the gapped .tile__body, so a COLLAPSED (0-height)
  panel would otherwise add an extra body gap and make the tile taller than
  before. A constant negative top margin (= the body gap) cancels that, and the
  inner's matching top padding restores the gap when open — so the collapsed
  tile is the same height it was, and the open spacing is unchanged.
*/

.tile {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
}

/* ---- Media ---- */
.tile__media {
  display: block;
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__media--placeholder {
  background-color: var(--color-green-muted);
}

/* Vacancy + group + offering: aspect-ratio on the WRAPPER so the green
   placeholder keeps its height when there is no image. */
.tile--vacancy .tile__media,
.tile--group .tile__media,
.tile--offering .tile__media {
  aspect-ratio: 9 / 4;
  overflow: clip;
}

/* Agenda: aspect-ratio on the IMAGE; the wrapper is the date badge's
   positioning context (.agenda__badge is absolutely placed inside it). */
.tile--agenda .tile__media {
  position: relative;
}

.tile--agenda .tile__media img {
  aspect-ratio: 9 / 4;
}

/* ---- Body ---- */
/* The body grows to fill the (stretched) card so a bottom-pinned last child
   lands at the card's bottom — see the last-child rule below. */
.tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-s);
}

/* Group tiles use a slightly larger inner rhythm. */
.tile--group .tile__body {
  gap: var(--space-m);
}

/* ---- Title ---- */
.tile__title {
  margin: 0;
}

/* The body is a gapped flex column, so the chapeau's own bottom margin would
   double the space above the title — drop it and let the gap do the spacing. */
.tile__body .chapeau {
  margin-block-end: 0;
}

/* Linked titles (event + group) are anchors. */
a.tile__title {
  color: inherit;
  text-decoration: none;
}

a.tile__title:hover,
a.tile__title:focus-visible {
  text-decoration: underline;
}

/* Vacancy title is a non-link h3 span (hours on its own line); force the dark
   text colour (the global h3 default is brand orange). */
.tile--vacancy .tile__title {
  display: block;
  color: var(--color-text);
}

/* Hours-per-week: its own line under the title, small and de-emphasised. The
   title span is h3-sized, so pin a smaller size + normal weight here. */
.tile__hours {
  display: block;
  margin-block-start: var(--space-3xs);
  font-size: var(--text-small);
  font-weight: 400;
}

/* Offering title is a non-link h3 (.h4 size); force the dark text colour (the
   global h3 default is brand orange). */
.tile--offering .tile__title {
  color: var(--color-text);
}

/* Offering + vacancy reveals hold block-level content (rich description, info-box),
   so they stack with a gap rather than relying on inherited paragraph margins. */
.tile--offering .tile__panel-inner,
.tile--vacancy .tile__panel-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

/* Trim the rich-text description's outer margins so the panel gap controls the
   rhythm (same approach as .accordion__answer). */
.tile__description > :first-child {
  margin-block-start: 0;
}

.tile__description > :last-child {
  margin-block-end: 0;
}

/* ---- Excerpt ---- */
.tile__excerpt {
  margin: 0;
}

/* ---- "Lees meer" disclosure panel (agenda + vacancy) ---- */
.tile__panel {
  display: grid;
  grid-template-rows: 1fr;
  align-self: stretch;                       /* full card width (the body left-aligns) */
  /* Cancel the body gap above the panel; the inner's top padding restores it
     when open. Keep in sync with .tile__body gap (--space-s). */
  margin-block-start: calc(-1 * var(--space-s));
  transition: grid-template-rows 0.2s ease;
}

.tile__panel.is-collapsed {
  grid-template-rows: 0fr;
  visibility: hidden;
  /* Stay visible through the collapse, then drop out of the a11y/tab tree. */
  transition: grid-template-rows 0.2s ease, visibility 0s linear 0.2s;
}

/* The clip wrapper is the grid item that collapses: it owns the overflow
   clipping and carries NO padding, so the 0fr track shrinks it to a true 0.
   The inner's top padding lives one level down and gets clipped rather than
   leaking a --space-s sliver below the excerpt (same fix as .accordion__panel). */
.tile__panel-clip {
  overflow: hidden;
  min-height: 0;
}

.tile__panel-inner {
  padding-block-start: var(--space-s);
}

/* "Neem contact op" button sits below the "Lees meer" toggle, outside the
   collapsible panel, as a direct child of .tile__body — so the body's flex gap
   handles its spacing (no extra margin). */

/* ---- "Lees meer" toggle (chevron rotates when open) ---- */
/* Label swaps "Lees meer" → "Lees minder" purely off aria-expanded, so the JS
   only has to flip the attribute (no text manipulation). */
.tile__more-label-less {
  display: none;
}

.tile__more[aria-expanded="true"] .tile__more-label-more {
  display: none;
}

.tile__more[aria-expanded="true"] .tile__more-label-less {
  display: inline;
}

.tile__more::after {
  content: "";
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: url("../../svg/chevron-down.svg") no-repeat center / contain;
  mask: url("../../svg/chevron-down.svg") no-repeat center / contain;
  transition: transform 0.15s ease;
}

.tile__more[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Buttons in tiles don't take the global .btn bottom margin (button.css adds it
   to non-last buttons); tile spacing is handled by the body gap. */
.tile .btn {
  margin-block-end: 0;
}

/* ---- Bottom-pinned last child ---- */
/* When the body's LAST element is a primary action button (the group/agenda
   "Bekijk" link, the offering/vacancy CTA) or the meta info-box (agenda
   .tile__meta, a button-less offering), pin it to the card's bottom so those
   elements line up across a row of stretched, uneven-length cards. The flexed
   body (above) supplies the free space the auto margin eats.
   The "Lees meer" disclosure (.btn-link) is deliberately EXCLUDED: it belongs
   with the content it expands, so it stays put and never drops to the bottom. */
.tile__body > .btn:not(.btn-link):last-child,
.tile__body > .info-box:last-child {
  margin-block-start: auto;
}

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