/* trips/static/trips/css/trip-card-grid.css
   Repeating 3-tall + 2-wide grid layout for trip cards.
   Pattern: cards 1-3 tall (4:5), cards 4-5 wide (16:9), repeats. */

/* ========================================
   GRID CONTAINER
   ======================================== */

.trip-card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  width: 100%;
  padding-bottom: 2rem;
}

/* ========================================
   CARD PLACEMENT — repeating 5-card cycle
   Rows of 3 tall cards (span 2 cols each = 6 cols)
   then 2 wide cards (span 3 cols each = 6 cols)
   ======================================== */

/* All cards default: span 2 columns, tall aspect ratio */
.trip-card-grid > .trip-card {
  grid-column: span 2;
  aspect-ratio: 4 / 5;
}

/* Cards 4 and 5 in each cycle of 5: span 3 columns, wide aspect ratio */
.trip-card-grid > .trip-card:nth-child(5n + 4),
.trip-card-grid > .trip-card:nth-child(5n + 5) {
  grid-column: span 3;
  aspect-ratio: 16 / 9;
}

/* Wide cards get horizontal gradient instead of vertical */
.trip-card-grid > .trip-card:nth-child(5n + 4) .trip-card__overlay,
.trip-card-grid > .trip-card:nth-child(5n + 5) .trip-card__overlay {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Wide cards get more padding and larger title */
.trip-card-grid > .trip-card:nth-child(5n + 4) .trip-card__content,
.trip-card-grid > .trip-card:nth-child(5n + 5) .trip-card__content {
  padding: 2rem;
}

.trip-card-grid > .trip-card:nth-child(5n + 4) .trip-card__title,
.trip-card-grid > .trip-card:nth-child(5n + 5) .trip-card__title {
  font-size: 1.875rem;
  line-height: 1.2;
}

/* ========================================
   EDGE CASE: single remaining card fills full width
   ======================================== */

/* If a wide-row card is the last child (only 1 in the pair), span full width */
.trip-card-grid > .trip-card:nth-child(5n + 4):last-child {
  grid-column: span 6;
  aspect-ratio: 16 / 7;
}

/* If a tall-row has only 2 cards, let the 2nd one stretch */
.trip-card-grid > .trip-card:nth-child(5n + 2):last-child {
  grid-column: span 4;
  aspect-ratio: 16 / 9;
}

/* If a tall-row has only 1 card, span full */
.trip-card-grid > .trip-card:nth-child(5n + 1):last-child {
  grid-column: span 6;
  aspect-ratio: 16 / 7;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Tablet: 2-column layout, uniform ratio */
@media (max-width: 900px) {
  .trip-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .trip-card-grid > .trip-card,
  .trip-card-grid > .trip-card:nth-child(5n + 4),
  .trip-card-grid > .trip-card:nth-child(5n + 5),
  .trip-card-grid > .trip-card:nth-child(5n + 4):last-child,
  .trip-card-grid > .trip-card:nth-child(5n + 2):last-child,
  .trip-card-grid > .trip-card:nth-child(5n + 1):last-child {
    grid-column: span 1;
    aspect-ratio: 16 / 10;
  }

  /* All cards use vertical gradient on tablet */
  .trip-card-grid > .trip-card:nth-child(5n + 4) .trip-card__overlay,
  .trip-card-grid > .trip-card:nth-child(5n + 5) .trip-card__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /* Reset wide card content overrides */
  .trip-card-grid > .trip-card:nth-child(5n + 4) .trip-card__content,
  .trip-card-grid > .trip-card:nth-child(5n + 5) .trip-card__content {
    padding: 1.5rem;
  }

  .trip-card-grid > .trip-card:nth-child(5n + 4) .trip-card__title,
  .trip-card-grid > .trip-card:nth-child(5n + 5) .trip-card__title {
    font-size: 1.5rem;
    line-height: 1.33;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .trip-card-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.75rem;
  }

  .trip-card-grid > .trip-card,
  .trip-card-grid > .trip-card:nth-child(5n + 4),
  .trip-card-grid > .trip-card:nth-child(5n + 5),
  .trip-card-grid > .trip-card:nth-child(5n + 4):last-child,
  .trip-card-grid > .trip-card:nth-child(5n + 2):last-child,
  .trip-card-grid > .trip-card:nth-child(5n + 1):last-child {
    grid-column: span 1;
    aspect-ratio: 16 / 10;
  }
}