/* Front page: hero, stats, deals, new sets, last-chance band, themes, how it works */

/*
 * The sections are direct children of <main>, so phones can reorder them with `order` (see the phone rules at the bottom).
 * The DOM is in the wide-screen order.
 */
.home { display: flex; flex-direction: column; }
/* In a flex column, margin: 0 auto would make a container shrink to fit its content (the hero row is very wide); keep it full width */
.home > .container { width: 100%; }

/* HERO: low enough that the stats show on a 1440 x 900 screen (a 15" MacBook Pro) without scrolling */
.home__hero-wrap { padding-top: 24px; padding-bottom: 20px; }
.hero { display: flex; flex-direction: column; gap: 12px; }

/* Wide screens show the set the strip has picked (site.js moves .is-active) */
.hero__panel:not(.is-active) { display: none; }

/* Wide screens: text left, image right, one button row */
.hero__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  height: 420px;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--r-2xl);
}

.hero__image {
  position: relative;
  order: 2;
  height: 100%;
  overflow: hidden;
  background: var(--image-bg);
  border-radius: 18px;
}

.hero__image img { position: absolute; inset: 36px; width: calc(100% - 72px); height: calc(100% - 72px); object-fit: contain; }

.hero__text { order: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0 8px; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  overflow: hidden;
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Its own line height: with the body's 1.5 the pill was 28px and the 26px row clipped its rounded ends */
.hero__new {
  padding: 5px 10px;
  line-height: 15px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__heading { display: flex; flex-direction: column; gap: 6px; }

/* Theme · number · pieces · age, like the cards: only the theme shortens (with "…") when the line is too long */
.hero__meta {
  display: flex;
  gap: 6px;
  height: 20px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink-3);
  white-space: nowrap;
}

.hero__meta > span { flex-shrink: 0; }
.hero__meta > .hero__meta-theme { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }

.hero__title {
  height: 80px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 40px;
  letter-spacing: -0.02em;
}

.hero__title a { color: var(--ink); text-decoration: none; }

/* Never more than three lines, on any screen: the third ends in "…" if the text is longer */
.hero__desc {
  margin: 0;
  height: 66px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.hero__desc strong { color: var(--ink); }

/* Price and buttons together at the bottom of the text column (the free space goes above the price, not between them) */
.hero__price { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: auto; overflow: hidden; white-space: nowrap; }
.hero .card-actions { margin-top: 0; }

.hero__amount {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}


/* The five newest as a strip under the panel */
.hero__strip-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.hero__strip-head { align-items: center; }
.hero__strip-head .section-link { font-size: 14px; }

.hero__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

/* One row per set: thumbnail beside the title and price, so the strip stays low */
.hero__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.hero__tile[aria-selected="true"] { border-color: var(--cta); }

.hero__tile-image { position: relative; flex: 0 0 56px; height: 44px; background: var(--image-bg); border-radius: 8px; }
.hero__tile-image img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }

.hero__tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hero__tile-title {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero__tile-price { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 800; line-height: 20px; white-space: nowrap; }

/* STATS: one sentence on the grey page between two thin lines, the numbers in red. No box, so it reads as
   information and leaves the white boxes to things you can click (like the new-set strip just above) */
.stats { display: flex; align-items: center; gap: 20px; }
.stats__rule { flex: 1; height: 1px; background: var(--line-strong); }
.stats__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); white-space: nowrap; }
.stats__text strong { color: var(--cta); white-space: nowrap; }

/* The update time, only where the header's status line is hidden (below 1200px, see header.css) */
.stats__updated {
  flex-shrink: 0;
  display: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .stats__updated { display: inline-flex; }
}

/* SECTIONS */
.home__deals { padding-top: 32px; }
.home__popular { padding-top: 64px; padding-bottom: 64px; }
.home__sections { display: flex; flex-direction: column; gap: 64px; padding-top: 32px; padding-bottom: 64px; }
.home__sections--last { padding-top: 28px; }
.home__section { display: flex; flex-direction: column; gap: 18px; }

/* LAST CHANCE band */
.band { background: var(--dark); color: var(--on-dark); }
.band__inner { display: flex; flex-direction: column; gap: 24px; padding-top: 56px; padding-bottom: 64px; }
.band .section-intro { color: var(--on-dark-2); }

.band__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red-on-dark);
}

.band__link { font-size: 15px; font-weight: 700; color: var(--on-dark); text-underline-offset: 3px; }
.band__link:hover { color: var(--on-dark); }

/* HOW IT WORKS */
.how { display: flex; flex-direction: column; gap: 20px; padding: 36px 40px; background: var(--surface); border-radius: 24px; }
.how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.how__steps li { display: flex; align-items: flex-start; gap: 14px; }
.how__steps li > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.how__steps strong { font-size: 16px; }
.how__steps li > span:last-child > span { font-size: 14px; line-height: 1.5; color: var(--ink-4); }

.how__no {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--cta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}

/* ---------- Tablets ---------- */
@media (max-width: 1023px) {
  .hero__panel { gap: 24px; padding: 20px; }
  /* Five rows don't fit side by side here: the strip scrolls sideways */
  .hero__strip { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .hero__tile { flex: 0 0 210px; }
  .hero__title { font-size: 30px; line-height: 32px; height: 64px; }
  .hero__amount { font-size: 32px; }
  /* no room for the lines: the sentence and the update time centred, wrapping if they must */
  .stats { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
  .stats__rule { display: none; }
  .stats__text { white-space: normal; text-align: center; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .home__hero-wrap { padding-top: 16px; padding-bottom: 20px; }

  /* Order on phones: hero, deals, stats, popular sets, last chance, themes (the stats aren't the first thing you scroll to) */
  .home__hero-wrap { order: 1; }
  .home__deals { order: 2; }
  .home__stats { order: 3; }
  .home__popular { order: 4; }
  .band { order: 5; }
  .home__sections--last { order: 6; }

  /* The hero is a row you swipe through: every new set at once, snapping into place, the next one peeking in at the edge */
  .hero__panels {
    display: flex;
    gap: 10px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .hero__panels::-webkit-scrollbar { display: none; }

  /* Image on top, text under it */
  .hero__panel,
  .hero__panel:not(.is-active) {
    display: flex;
    flex: 0 0 calc(100% - 20px);
    flex-direction: column;
    gap: 14px;
    height: auto;
    padding: 12px;
    border-radius: var(--r-xl);
    scroll-snap-align: start;
  }

  /* No picker on phones: you swipe */
  .hero__strip-head,
  .hero__strip { display: none; }
  .hero__image { order: 0; height: 220px; }
  .hero__image img { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
  .hero__text { order: 1; gap: 12px; padding: 2px 6px 6px; }
  .hero__title { font-size: 26px; line-height: 28px; height: 56px; }
  .hero__desc { font-size: 14px; line-height: 21px; height: 63px; }
  .hero__price { height: 38px; }
  .hero__amount { font-size: 30px; }


  /* left-aligned, the update time under the sentence */
  .stats { flex-direction: column; align-items: flex-start; gap: 12px; }
  .stats__text { text-align: left; }

  .home__deals { padding-top: 20px; padding-bottom: 40px; }
  .home__popular { padding-top: 40px; padding-bottom: 40px; }
  .home__sections { gap: 40px; padding-top: 20px; padding-bottom: 40px; }
  .home__sections--last { padding-top: 16px; }

  .deal-grid > :nth-child(n+5) { display: none; }

  .band__inner { gap: 20px; padding-top: 36px; padding-bottom: 40px; }


  .how { padding: 22px 18px; }
  .how__steps { display: flex; flex-direction: column; gap: 18px; }
}