/**
 * Horsequip Calm — Listing Layout Shell
 *
 * Zentrierte Detail-Spalte + einheitliches Listing-Grid (1 col mobile / 4 col desktop).
 * Spec: docs/design-language/index.html#layout-columns
 */

/* ── Detail shell: centered column on desktop ── */
.hq-listing-shell {
  width: 100%;
  max-width: var(--hq-content-column);
  margin-inline: auto;
  box-sizing: border-box;
}

.hq-listing-shell--bleed-mobile {
  width: 100%;
}

@media (max-width: 768px) {
  .hq-listing-shell--bleed-mobile {
    max-width: 100%;
    margin-inline: 0;
  }
}

/* Detail full-view: horse/job/marketplace reuse .teaser-card root */
.teaser-card--detail.teaser-card--horse,
.teaser-card--detail.teaser-card--job,
.teaser-card--detail.teaser-card--marketplace,
article.teaser-card.hq-listing-shell.teaser-card--detail {
  max-width: var(--hq-content-column);
  margin-inline: auto;
  width: 100%;
}

.event-detail.hq-listing-shell {
  max-width: var(--hq-content-column);
  margin-inline: auto;
  width: 100%;
}

/* ── Unified listing grid: Startseite + Profil/Stall (1 col mobile, 4 col desktop) ──
   Profil/Stall: Grid am Container (.events-grid etc.), direkte .teaser-card-Kinder.
   Startseite: .collapsible-content bleibt block; Grid auf .views-infinite-scroll-content-wrapper
   (Drupal AJAX-Views haben kein .view-content, nur .js-view-dom-id-*). */
.events-grid.hq-teaser-context--grid,
.jobs-grid.hq-teaser-context--grid,
.horses-grid.hq-teaser-context--grid,
.marketplace-grid.hq-teaser-context--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hq-grid-gap-listing);
  width: 100%;
  box-sizing: border-box;
}

.collapsible-content.hq-teaser-context--grid {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .events-grid.hq-teaser-context--grid,
  .jobs-grid.hq-teaser-context--grid,
  .horses-grid.hq-teaser-context--grid,
  .marketplace-grid.hq-teaser-context--grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hq-teaser-context--grid > .teaser-card,
.hq-teaser-context--grid > article.teaser-card,
.hq-teaser-context--grid .views-row {
  width: 100%;
  max-width: none;
  margin: 0;
  min-width: 0;
  /* Stretch to grid row height so sibling cards match on desktop. */
  height: 100%;
  align-self: stretch;
}

/* Views wrap cards in .views-row — make the row a flex column so the card fills it. */
.hq-teaser-context--grid .views-row {
  display: flex;
  flex-direction: column;
}

.hq-teaser-context--grid .teaser-card {
  max-width: none;
  min-height: unset;
  height: 100%;
  flex: 1 1 auto;
}

.hq-teaser-context--grid .teaser-card > a.teaser-card__image-link {
  flex-shrink: 0;
}

/* Drupal Views (Startseiten-Collapsibles, auch ohne .view-content) */
.collapsible-content.hq-teaser-context--grid .views-infinite-scroll-content-wrapper,
.collapsible-content.hq-teaser-context--grid .view-content .views-infinite-scroll-content-wrapper,
.collapsible-content.hq-teaser-context--grid .view-content .row,
.collapsible-content.hq-teaser-context--grid [class*="js-view-dom-id-"] > .views-infinite-scroll-content-wrapper {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--hq-grid-gap-listing);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-items: stretch !important;
}

@media (min-width: 769px) {
  .collapsible-content.hq-teaser-context--grid .views-infinite-scroll-content-wrapper,
  .collapsible-content.hq-teaser-context--grid .view-content .views-infinite-scroll-content-wrapper,
  .collapsible-content.hq-teaser-context--grid .view-content .row,
  .collapsible-content.hq-teaser-context--grid [class*="js-view-dom-id-"] > .views-infinite-scroll-content-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

.collapsible-content.hq-teaser-context--grid .view-content .row > .col,
.collapsible-content.hq-teaser-context--grid .view-content .row > [class*="col-"] {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.collapsible-content.hq-teaser-context--grid .views-row {
  margin-bottom: 0;
}

/* Grid listing card styling (shared Startseite + Profil) */
.hq-teaser-context--grid .teaser-card__image {
  aspect-ratio: var(--hq-teaser-image-aspect);
  background-color: var(--hq-gray-150);
}

.hq-teaser-context--grid .teaser-card__image img:not(.teaser-card__image-main) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hq-teaser-context--grid .teaser-card__image-main {
  object-fit: contain;
}

.hq-teaser-context--grid .teaser-card__image img.teaser-card__fallback-logo,
.hq-teaser-context--grid .teaser-card__image-main.teaser-card__fallback-logo {
  width: 50%;
  height: 50%;
  max-width: 50%;
  max-height: 50%;
  object-fit: contain;
}

.hq-teaser-context--grid .teaser-card__content {
  padding: var(--hq-card-padding-public-grid) var(--hq-card-padding-public-grid) var(--hq-space-lg);
}

.hq-teaser-context--grid .teaser-card__title {
  font-size: var(--hq-card-title-size-grid);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.hq-teaser-context--grid .teaser-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price / „Eintritt frei“ + CTAs as one bottom-aligned footer across equal-height cards.
   Without this, margin-top:auto on actions alone leaves the price floating mid-card. */
.hq-teaser-context--grid .teaser-card__price {
  margin-top: auto;
  margin-bottom: 16px;
}

.hq-teaser-context--grid .teaser-card__actions {
  margin-left: 0;
  margin-bottom: 0;
}

.hq-teaser-context--grid .teaser-card__price + .teaser-card__actions {
  margin-top: 0;
}

/* Events in grid stay square (same as default teaser aspect; see tokens). */
.hq-teaser-context--grid .teaser-card--event .teaser-card__image {
  aspect-ratio: var(--hq-teaser-image-aspect-square);
}

/* Detail footer aligns with shell */
.hq-listing-shell .listing-detail__footer {
  max-width: 100%;
  box-sizing: border-box;
}