/* =============================================================================
 * Unified card + section block  (.km-card / .km-section)
 * =============================================================================
 * LIVE since Phase C. Emitted by the cluster (Neueste/Ausstellungen/Galerien),
 * top-articles, art-fairs and opinions renderers via Kunstmag_Card /
 * Kunstmag_Homepage_Category_Block.
 *
 * VISUAL CONTRACT: this file reproduces the ORIGINAL homepage card look exactly
 * (the only intended change is the 1-big-3-small pattern now applying to every
 * category + the responsive count rule). Values are ported 1:1 from the legacy
 * .kunst-cat-hero / .kunst-category-item rules:
 *   - sharp corners (no border-radius)
 *   - lead: text LEFT / image RIGHT, image 16:9, 60% width, title 24px
 *   - small card: image 4:3, title 16px, excerpt 14px, vertical divider lines
 *   - per-card category eyebrow is NOT shown (resolved empty in PHP) — context
 *     comes from the section heading, exactly like the original. Only Meinungen
 *     passes an explicit eyebrow.
 *
 * NAMING CAUTION: the dead .km-sektion/.km-grid/.km-item rules in homepage.css
 * are UNRELATED to the .km-card/.km-section classes here.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Card base
 * -------------------------------------------------------------------------- */

.km-card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow the card to shrink inside a grid track */
}

.km-card__media {
  display: block;
  position: relative;
  margin: 0 0 12px;
}

/* Body column. In the .km-card--large horizontal split it is the flex sibling of
 * .km-card__media; flex: 1 1 0 + min-width: 0 lets it take the remaining track and
 * shrink instead of overflowing. In the vertical variants the flex props are inert. */
.km-card__body {
  flex: 1 1 0;
  min-width: 0;
}

.km-card__img {
  width: 100%;
  aspect-ratio: 3 / 2; /* one ratio everywhere — lead + small cards */
  object-fit: cover;
  display: block;
  border-radius: 0; /* sharp corners (no rounding) */
}

/* Per-card eyebrow — only rendered when a caller passes one explicitly (Meinungen).
 * Image-card sections render no eyebrow (see resolve_eyebrow), like the original. */
.km-card__eyebrow {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--km-accent); /* defined in global.css (loaded before this file) */
  font-size: 12px;
  text-decoration: none;
}

.km-card__eyebrow:hover {
  text-decoration: underline;
}

/* Small-card title — ported from .kunst-category-item-title (16px / 700 / 1.4). */
.km-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 6px 0 8px;
  /* clamp to 3 lines so cards of mixed title length stay aligned */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.km-card__title a {
  color: var(--kunst-text-dark);
  text-decoration: none;
}

.km-card__title a:hover {
  color: var(--km-accent);
}

.km-card__meta {
  font-size: 12px;
  color: #999;
  margin: 0 0 8px;
}

/* Small-card excerpt — ported from .kunst-category-item-excerpt (14px / 1.6 / #444). */
.km-card__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  margin: 0;
  /* No line-clamp: the PHP excerpt is sentence-aware + word-bounded, so it ends on a
   * full sentence. Clamping here would re-introduce a mid-sentence cut. */
}

/* Whole-card click affordance. The real link is the title <a>; js/homepage-clickables.js
 * binds the .kunst-clickable card and resolves the destination from data-href. */
.km-card.kunst-clickable {
  cursor: pointer;
}

/* compact variant carries NO media at all */
.km-card--compact .km-card__media {
  display: none;
}

/* -----------------------------------------------------------------------------
 * Section ("1 big lead + N small") layout
 * -------------------------------------------------------------------------- */

.km-section {
  margin: 0 0 40px;
  padding-bottom: 32px;
  /* Category divider line between sections — matches the original separators. */
  border-bottom: 1px solid var(--kunst-lines);
}

.km-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.km-section__header {
  margin: 0 0 20px;
}

/* Section title — consistent with the existing homepage section titles
 * (16px / 700 / uppercase / 0.5px tracking, accent colour). */
.km-section__title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.km-section__title a {
  color: var(--km-accent);
  text-decoration: none;
}

.km-section__title a:hover {
  text-decoration: underline;
}

/* Lead block — separated from the small grid by a divider line, exactly like the
 * original .kunst-cat-hero (border-bottom + padding-bottom). */
.km-section__lead {
  margin: 0 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--kunst-lines);
}

/* Desktop default: small cards sit 3 across (gap 30px, original spacing). */
.km-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* Vertical divider lines between the small cards — ported 1:1 from the original
 * .kunst-category-item:not(:last-child)::after (1px line centred in the 30px gap). */
.km-section__grid > .km-card {
  position: relative;
}

.km-section__grid > .km-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px; /* half of the 30px gap */
  width: 1px;
  height: 100%;
  background-color: var(--kunst-lines);
}

/* -----------------------------------------------------------------------------
 * Large lead variant — desktop: text LEFT, image RIGHT (original cat-hero
 * "reversed" layout). row-reverse puts the media (first child) on the right.
 * -------------------------------------------------------------------------- */

.km-card--large {
  flex-direction: row; /* image LEFT, text RIGHT */
  gap: 30px;
  align-items: center; /* centre the lead content vertically */
}

.km-card--large .km-card__media {
  flex: 0 0 60%; /* original .kunst-cat-hero-image width */
  margin: 0;
}

.km-card--large .km-card__title {
  font-size: 24px; /* original .kunst-cat-hero-title */
  line-height: 1.3;
}

.km-card--large .km-card__excerpt {
  font-size: 15px; /* original .kunst-cat-hero-excerpt */
  line-height: 1.6;
}

/* =============================================================================
 * RESPONSIVE COUNT RULE (human-critical — keep exactly)
 * -----------------------------------------------------------------------------
 *   Desktop:            grid 3 across; lead is the large text-left/image-right row.
 *   Tablet (<=1000px):  grid 2 across; the 3rd+ small card is HIDDEN (display:none),
 *                       not wrapped; the lead stacks (image on top).
 *   Mobile (<=767px):   grid 1 column; RE-SHOW all small cards; the lead collapses to
 *                       a normal card (same as the grid cards), so nothing is prioritized.
 *
 *   ORDER REQUIREMENT (load-bearing): the mobile re-show targets the SAME selector as
 *   the tablet hide (equal specificity), so the max-width:767px block MUST stay AFTER
 *   the max-width:1000px block — it wins by source order only.
 * ========================================================================== */

/* TABLET: 2 across; drop the 3rd small card; stack the lead. */
@media screen and (max-width: 1000px) {
  .km-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Remove the 3rd+ small card entirely (content reduction, not a wrap). Every
   * homepage section using this grid has a lead, so the grid holds only the small
   * overflow cards — hiding the 3rd shows exactly 2 beside the (stacked) lead. */
  .km-section__grid > .km-card:nth-child(n + 3) {
    display: none;
  }

  /* With only 2 cards visible, the 2nd is now the rightmost — drop its right-side
   * divider line so it doesn't dangle into the empty (hidden) 3rd column. */
  .km-section__grid > .km-card:nth-child(2)::after {
    display: none;
  }

  /* Lead stacks its media on top (vertical). Explicit width so the flex item does
   * not collapse to zero (the desktop `flex: 0 0 60%` basis no longer applies). */
  .km-card--large {
    flex-direction: column;
    align-items: stretch;
  }

  .km-card--large .km-card__media {
    flex: none;
    width: 100%;
    margin: 0 0 12px;
  }
}

/* MOBILE: single column; ALL cards visible + uniform; lead == grid card.
 * MUST stay AFTER the max-width:1000px block (see ORDER REQUIREMENT above). */
@media screen and (max-width: 767px) {
  .km-section__grid {
    grid-template-columns: 1fr;
  }

  /* Re-show the 3rd+ small card the tablet block hid (restores the .km-card base
   * display:flex — keep in sync if the base display value ever changes). */
  .km-section__grid > .km-card:nth-child(n + 3) {
    display: flex;
  }

  /* No vertical divider lines in a single column (they only make sense side-by-side). */
  .km-section__grid > .km-card::after {
    display: none;
  }

  /* Lead collapses to a normal card: same title size as the grid cards, and drop the
   * lead's bottom divider so the stack reads uniformly (no card is prioritized). */
  .km-card--large .km-card__title {
    font-size: 16px;
    line-height: 1.4;
  }

  .km-section__lead {
    margin-bottom: 30px;
    padding-bottom: 0;
    border-bottom: none;
  }
}