/*
 * Equal-height cards: each .promotion-list fills its grid cell so two cards in
 * the same flex row are the same height regardless of image aspect ratio.
 * .promo-thumb is locked to a 1:1 box (174×174) with the image object-fit:cover
 * so a tall poster and a wide strip both render the same thumb footprint.
 */
.promotion-list {
  height: 100%;
  align-items: stretch;
}

.promotion-list p {
  line-height: 1.7em;
}

.promo-thumb {
  flex: 0 0 174px;
  width: 174px;
  aspect-ratio: 1 / 1;
  margin-right: 20px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #f5f5f5;
}

.promo-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.promo-detail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 10px;
}

.promo-category {
  position: absolute;
  bottom: 0;
  border-radius: 25px;
  padding: 0 7px;
  background-color: #f1f1f1;
  width: 64px;
  border: 1px solid #e3e3e3;
  color: #000;
  text-align: center;
}

/* Banner reservation (position 99). The Vue <slide-banner> renders client-side
   and only paints once its API resolves; without a reserved height the banner
   grows 0 -> ~336px on mount and pushes the whole promotion list down (CLS).
   The wrapper holds the 1024/280 strip height before mount; :has() releases it
   once the swiper renders, and .imgbanner carries the same ratio so the loaded
   banner occupies the exact reserved height (no shift either way). */
.promo-banner-reserve {
  width: 100%;
  aspect-ratio: 1024 / 280;
  border-radius: 10px;
  overflow: hidden;
}
.promo-banner-reserve:has(.swiper-slide) {
  aspect-ratio: auto;
}
.promo-banner-reserve .imgbanner,
.promo-banner-reserve .swiper-slide img {
  width: 100%;
  aspect-ratio: 1024 / 280;
  height: auto;
  border-radius: 10px;
}

/*
 * /promotion list-page rhythm (Batch 1.2 of UX spacing standardization).
 * Mirrors /flash-sale: container is the sole owner of block spacing — flex-column
 * gap:30px desktop, 20px ≤768px. Per-block magic margins (mt20/mb20/mb15 + inline
 * paddings) were dropped from the Blade so this rule is the only spacing source.
 * Inner-loop date groups (one per GroupDate) use the adjacent-sibling rule so
 * the gap between groups matches the container rhythm.
 */
#promotion-page {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* Bootstrap's .container::before/::after are clearfix pseudo-elements
   (display:table, content:" "). Inside a flex container they become flex
   items, and the 30px gap then applies between ::before and .promotion-header,
   opening a 30px phantom gap above the breadcrumb. Hide them. */
#promotion-page::before,
#promotion-page::after {
  content: none;
}
#promotion-page .promotion-date-group + .title-topic,
#promotion-page .title-topic + .promotion-date-group {
  margin-top: 0;
}
#promotion-page .promotion-lists-block {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/*
 * Pull the h1 close to the breadcrumb. Global .breadcrumbs has
 * margin-bottom:20px which (with the h1 wrapper's 5px padding-top) opens a
 * 25px gap — too loose for this header band. Drop the breadcrumb margin
 * inside #promotion-page so only the 5px padding-top remains.
 */
#promotion-page .breadcrumbs {
  margin-bottom: 0;
}

/*
 * Cards in a date group. tw:flex tw:flex-wrap on the source markup leaves
 * cards crammed (no horizontal or vertical gap, w-N/12 percentages eat the
 * full row). Override to CSS grid so column count is breakpoint-driven and
 * `gap` adds breathing room both axes.
 *
 * The child divs carry tw:w-full/tw:sm:w-6/12/tw:lg:w-4/12. Inside a grid,
 * percentage widths resolve against the grid TRACK (not the container), so
 * w-4/12 = 33.333% × 397px ≈ 132px instead of the expected 397px. Reset to
 * width:100% on direct children so each item fills its 1fr track.
 */
#promotion-page .promotion-date-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
#promotion-page .promotion-date-group > * {
  width: 100%;
}
@media (min-width: 640px) {
  #promotion-page .promotion-date-group {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  #promotion-page .promotion-date-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  #promotion-page,
  #promotion-page .promotion-lists-block {
    gap: 20px;
  }
}