/* Theme-owned additions (frontend + editor canvas). The designer styles.css and
   the generated brand.css are off-limits; small adaptations live here. */

/* core/table keeps the `contributie-table` class on the <figure> wrapper, not the
   <table>. Most of the designer .contributie-table rules (border/radius/shadow/bg)
   already work on the figure; only border-collapse must hit the inner table so the
   cell borders don't separate. th/td rules are descendant selectors and still apply. */
.contributie-table table {
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table.contributie-table { margin-top: 16px; }

/* ── Mobile (iOS Safari) responsive fixes — found in the phone E2E audit ──────
 * The designer styles.css is compiled (off-limits); these phone-only overrides
 * correct grids that didn't collapse and the reveal-on-scroll blanking. */

/* Reveal-on-scroll: the designer script.js gates .fade-up → .visible via an
 * IntersectionObserver (threshold 0.1). On a fast phone scroll the reveal lags
 * behind, so sections sit blank (opacity:0) until they catch up — reads as "not
 * rendering". On phones, show content immediately; the animation stays on desktop. */
@media (max-width: 768px) {
  .fade-up, .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Content-card grids that didn't collapse on phones → tiny squeezed cards with
 * clipped headings/badges and one-word-per-line text. Stack them to one column:
 *   .news-grid          /alle-nieuws/  (was 2-col ~163px)
 *   .members-grid       /leden/        (was 3-col ~134px)
 *   .geassocieerd-grid  /leden/        (associated members, was 3-col ~138px)
 *   .secretariaat-grid  /over-veo/     (team, was 2-col ~160px)
 *   .leden-types-grid + .leden-type-card  /over-veo/  (membership cards + the
 *      featured card's internal 2-col content|vakgroepen, was ~168px)
 * NOTE: .doc-card is deliberately excluded — its 3-col is the card's own
 * icon | content | download-arrow layout, which is correct. */
@media (max-width: 768px) {
  .news-grid,
  .members-grid,
  .geassocieerd-grid,
  .secretariaat-grid,
  .leden-types-grid,
  .leden-type-card {
    grid-template-columns: 1fr !important;
  }
  /* The featured leden-type-card is `grid-column: span 2` on desktop. In a
   * single-column grid that span forces an IMPLICIT 2nd column, so the cards
   * still render two-wide (featured clipped off-screen). Reset the span. */
  .leden-type-card.featured { grid-column: auto !important; }
}

/* Filter chips (/alle-nieuws/ .filter-bar-inner) were capped at ~230px on phones,
 * so the wider pills (Publicaties/Evenementen) each wrapped to their own row → a
 * tall, cramped vertical stack. Use the full card width + center, so the four
 * chips flow into a tidy centered 2-row group. */
@media (max-width: 768px) {
  .filter-bar-inner {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    gap: 10px;
  }
  .filter-bar { padding-left: 16px !important; padding-right: 16px !important; }
}