/* Hmonster Deals — layouts (Halcyon v1.0)
   Page-level shells: main padding, horizontal-scroll rows, section headers,
   grid fallbacks, breadcrumbs, pagination. */

.hmd-main {
  min-height: calc(100vh - var(--hmd-header-height));
  padding-top: var(--hmd-space-8);
  padding-bottom: var(--hmd-space-16);
}

/* Section header pattern (Halcyon 3-cell: eyebrow | title | meta). */
.hmd-section {
  padding-block: var(--hmd-space-10);
  border-top: 1px solid var(--hmd-border);
}
.hmd-section:first-child,
.hmd-main > .hmd-container > .hmd-section:first-child,
.hmd-row:first-child { border-top: 0; }

/* --- Horizontal-scroll row --------------------------------------------- */
.hmd-row {
  padding-block: var(--hmd-space-12);
  border-top: 1px solid var(--hmd-border);
}
.hmd-row:first-of-type { border-top: 0; padding-top: var(--hmd-space-8); }
.hmd-row__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--hmd-space-4);
  margin-bottom: var(--hmd-space-6);
  flex-wrap: wrap;
}
.hmd-row__heading {
  display: flex;
  flex-direction: column;
  gap: var(--hmd-space-2);
  min-width: 0;
}
.hmd-row__title {
  margin: 0;
  font-family: var(--hmd-font-display);
  font-weight: var(--hmd-weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--hmd-track-display);
  font-size: clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
  line-height: 0.95;
  color: var(--hmd-text-strong);
}
.hmd-row__controls {
  display: flex;
  align-items: center;
  gap: var(--hmd-space-4);
}
.hmd-row__link {
  color: var(--hmd-text-strong);
  font-weight: var(--hmd-weight-semibold);
  font-size: var(--hmd-text-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* touch target */
  padding-inline: var(--hmd-space-1);
}
.hmd-row__link:hover { text-decoration: underline; }
.hmd-row__arrows { display: flex; gap: 6px; }
.hmd-row__arrow {
  width: 44px; height: 44px; /* WCAG 2.5.5 touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hmd-border);
  background: var(--hmd-surface);
  color: var(--hmd-text-strong);
  border-radius: var(--hmd-radius-full);
  cursor: pointer;
  transition: background-color var(--hmd-duration-fast) var(--hmd-ease),
              border-color     var(--hmd-duration-fast) var(--hmd-ease),
              transform        var(--hmd-duration-fast) var(--hmd-ease);
}
.hmd-row__arrow:hover {
  background: var(--hmd-surface-alt);
  border-color: var(--hmd-border-strong);
}
.hmd-row__arrow[disabled] { opacity: 0.35; cursor: not-allowed; }

.hmd-row__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 300px);
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hmd-container-pad);
  padding-top: 10px;    /* room for hover lift + shadow at top */
  padding-bottom: 10px; /* room for hover lift + shadow at bottom */
  margin-top: -10px;    /* cancel visual shift from padding-top */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hmd-row__track::-webkit-scrollbar { display: none; }
.hmd-row__track > * {
  scroll-snap-align: start;
  min-width: 0;
}

/* Per-row card size */
@media (min-width: 768px) {
  .hmd-row__track { grid-auto-columns: 320px; gap: 20px; }
}
@media (min-width: 1280px) {
  .hmd-row__track { grid-auto-columns: 340px; gap: 24px; }
}

/* --- Carousel (Featured deals) ------------------------------------------- */
/*
 * 5 cards visible at a time on desktop. JS reads computed card width to step
 * by one card, shows/hides the arrows group, and auto-advances every 3 s when
 * total > visibleCount. The viewport clips the track; overflow-y is visible so
 * hover shadows aren't cut off.
 */
.hmd-row--carousel { overflow: visible; }

.hmd-carousel__viewport {
  overflow: hidden;
  /* Vertical breathing room so hover-lift shadow isn't clipped. */
  padding-block: 10px;
  margin-block: -10px;
}

.hmd-carousel__track {
  display: flex;
  gap: 16px;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Each card occupies exactly 1/5 of the viewport width (4 gaps of 16px). */
.hmd-carousel__track > * {
  flex: 0 0 calc((100% - 4 * 16px) / 5);
  min-width: 0;
}

/* Tablet: 3 visible (2 gaps). */
@media (max-width: 1279px) {
  .hmd-carousel__track { gap: 14px; }
  .hmd-carousel__track > * {
    flex: 0 0 calc((100% - 2 * 14px) / 3);
  }
}

/* Mobile: ~1.15 cards visible — peek hint for next card. */
@media (max-width: 639px) {
  .hmd-carousel__track { gap: 12px; }
  .hmd-carousel__track > * {
    flex: 0 0 calc(100% - 32px);
  }
}

/* --- Latest deals layout ----------------------------------------------- */
/*
 * Left (wide)  : 4 deal cards displayed side-by-side in a single row.
 * Right (fixed): 2 horizontal Littoral-style cards stacked vertically.
 * Both columns share the same height via align-items: stretch on the outer grid.
 */
.hmd-latest-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

/* 4-up horizontal row of vertical deal cards. */
.hmd-latest-grid__left {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.hmd-latest-grid__left .hmd-card-deal {
  height: auto;
}

/* Right sidebar: horizontal cards stacked vertically. Auto-rows so the
   sidebar grows to match however many trending picks are passed in. */
.hmd-latest-grid__right {
  display: grid;
  grid-auto-rows: minmax(0, auto);
  gap: 16px;
}

/* On tablets the right sidebar stacks below the main row. */
@media (max-width: 1023px) {
  .hmd-latest-header {
    grid-template-columns: 1fr;
  }
  .hmd-latest-header__sidebar { display: none; } /* sidebar title only shown on desktop */
  .hmd-latest-grid {
    grid-template-columns: 1fr;
  }
  .hmd-latest-grid__left {
    grid-template-columns: repeat(2, 1fr);
  }
  .hmd-latest-grid__right {
    grid-auto-rows: auto;
    grid-template-columns: repeat(2, 1fr);
  }
  .hmd-latest-grid__left .hmd-card-deal,
  .hmd-latest-grid__right .hmd-card-horiz { height: auto; }
}
@media (max-width: 639px) {
  .hmd-latest-header__title-row { flex-direction: column; align-items: flex-start; gap: var(--hmd-space-2); }
  .hmd-latest-grid__left  { grid-template-columns: 1fr; }
  .hmd-latest-grid__right { grid-template-columns: 1fr; }
}

/* Responsive grids still used for related-deals + archives. */
.hmd-grid { display: grid; gap: 20px; }
.hmd-grid--deals { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hmd-grid--2, .hmd-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .hmd-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hmd-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hmd-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Breadcrumbs. */
.hmd-breadcrumbs {
  font-family: var(--hmd-font-mono);
  font-size: var(--hmd-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--hmd-track-mono-sm);
  color: var(--hmd-text-muted);
  margin-bottom: var(--hmd-space-6);
}
.hmd-breadcrumbs a {
  color: var(--hmd-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* WCAG 2.5.5 touch target */
  padding-inline: 8px; /* extend tap width beyond text */
  margin-inline: -8px; /* offset so visual position stays the same */
}
.hmd-breadcrumbs a:hover { color: var(--hmd-text-strong); }
.hmd-breadcrumbs__sep { margin-inline: 8px; opacity: 0.5; }

/* Pagination. */
.hmd-pagination {
  margin-top: var(--hmd-space-10);
  display: flex;
  justify-content: center;
  gap: var(--hmd-space-2);
  flex-wrap: wrap;
}
.hmd-pagination .page-numbers {
  padding: 10px 16px;
  border: 1px solid var(--hmd-border);
  border-radius: var(--hmd-radius);
  text-decoration: none;
  color: var(--hmd-text-strong);
  font-weight: var(--hmd-weight-medium);
  font-size: var(--hmd-text-sm);
}
.hmd-pagination .page-numbers:hover { border-color: var(--hmd-text-strong); }
.hmd-pagination .page-numbers.current {
  background: var(--hmd-ink);
  border-color: var(--hmd-ink);
  color: #fff;
}