/**
 * home-page-new-design.css
 *
 * Styles for the new BTTR homepage layout (partials/home-page-new-design.hbs).
 * Self-contained and scoped under .home-new-design so it can't leak into the
 * three existing layouts. Loaded via Ghost's {{asset}} helper, no gulp/PostCSS
 * pipeline changes required.
 *
 * Tokens match the brand style system: Indigo colorway, Poppins headings,
 * Roboto body (both already loaded site-wide via Bunny Fonts in default.hbs).
 * Mobile-first: traffic is 56% desktop / 44% mobile.
 */

.home-new-design {
  --hnd-ink: #1A1815;
  --hnd-ink-soft: rgba(26, 24, 21, 0.65);
  --hnd-bg: #FAF9F6;
  --hnd-card: #FFFFFF;
  --hnd-border: rgba(26, 24, 21, 0.12);
  --hnd-indigo: #1E40AF;
  --hnd-indigo-soft: rgba(30, 64, 175, 0.08);
  /* Fixed regardless of theme, for solid-fill badges/buttons/CTA blocks
     paired with white text. --hnd-indigo itself lightens in dark mode below
     for text-on-dark-card readability, which would break contrast on these
     specific white-on-indigo fills if they used it instead. */
  --hnd-indigo-solid: #1E40AF;
  --hnd-green: #1F8A5B;
  --hnd-amber: #B7791F;
  --hnd-radius: 12px;
  --hnd-gap: 1.25rem;
  --hnd-max: 1200px;

  background: var(--hnd-bg);
  color: var(--hnd-ink);
  font-family: 'Roboto', sans-serif;

  /* Full-bleed: .home-new-design sits inside Auden's .container-fluid.wrapper,
     which has its own max-width, so without this the background only paints
     within that constrained column instead of edge to edge. The previous
     version of this rule (position:relative; left:50%; margin-left:-50vw)
     only cancels out correctly when the immediate parent is already
     viewport-width, which .wrapper isn't, so it did nothing visible. This
     calc() version computes the actual offset from .wrapper's real width
     instead of assuming it, works regardless of how narrow the parent is,
     as long as it's horizontally centered. Inner sections still self-center
     via their own max-width + auto margins below. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Dark mode. Everything below reads off these same custom properties, so
   redefining them here is enough to re-theme the whole layout, no need to
   touch individual components. Values match the dark palette your other
   Code Injection components already use (review card, price widget, WTB). */
[data-color-scheme="dark"] .home-new-design {
  --hnd-ink: #f9fafb;
  --hnd-ink-soft: rgba(249, 250, 251, 0.65);
  --hnd-bg: #111111;
  --hnd-card: #1a1a1a;
  --hnd-border: #374151;
  --hnd-indigo: #93c5fd;
  --hnd-indigo-soft: rgba(147, 197, 253, 0.12);
  --hnd-green: #34d399;
  --hnd-amber: #fbbf24;
}

.home-new-design h1,
.home-new-design h2,
.home-new-design h3 {
  font-family: 'Poppins', sans-serif;
  color: var(--hnd-ink);
  margin: 0 0 0.5rem;
}

.home-new-design a {
  color: inherit;
  text-decoration: none;
}

.home-new-design__section {
  max-width: var(--hnd-max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

.home-new-design__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.home-new-design__section-head h2 {
  font-size: 1.5rem;
}

.home-new-design__section-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hnd-indigo) !important;
  white-space: nowrap;
}

/* ---- Hero ---------------------------------------------------------- */

.home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hnd-gap);
}

.home-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hnd-card);
  border: 1px solid var(--hnd-border);
  border-radius: var(--hnd-radius);
  overflow: hidden;
  height: 100%;
}

.home-hero__card--primary .home-hero__image {
  aspect-ratio: 16 / 10;
}

.home-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.home-hero__card--primary .home-hero__title {
  font-size: 1.5rem;
}

.home-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--hnd-ink);
  font-size: 1.05rem;
  line-height: 1.3;
}

.home-hero__excerpt {
  color: var(--hnd-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-hero__secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hnd-gap);
}

.home-hero__secondary .home-hero__card {
  flex-direction: row;
}

.home-hero__secondary .home-hero__image {
  width: 40%;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .home-hero {
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
  }
  .home-hero__secondary {
    grid-template-columns: 1fr;
  }
}

/* ---- How we test ------------------------------------------------------ */

.how-we-test {
  background: var(--hnd-indigo-soft);
  border-radius: var(--hnd-radius);
}

.how-we-test__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.how-we-test__principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.how-we-test__principle {
  display: flex;
  gap: 0.75rem;
}

.how-we-test__principle-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.how-we-test__principle-desc {
  font-size: 0.875rem;
  color: var(--hnd-ink-soft);
}

.how-we-test__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}

.how-we-test__stat-value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hnd-indigo);
}

.how-we-test__stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--hnd-ink-soft);
  margin-top: 0.25rem;
}

.how-we-test__cta {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--hnd-indigo) !important;
}

@media (min-width: 768px) {
  .how-we-test__grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
  }
  .how-we-test__principles {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Best-of rail ------------------------------------------------------ */

.best-of-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.best-of-tab {
  flex-shrink: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--hnd-border);
  background: var(--hnd-card);
  color: var(--hnd-ink-soft);
  cursor: pointer;
}

.best-of-tab.is-active {
  background: var(--hnd-indigo-solid);
  border-color: var(--hnd-indigo-solid);
  color: #fff;
}

.best-of-panel {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.best-of-panel.is-active {
  display: flex;
}

.best-of-panel__cta {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hnd-indigo) !important;
}

.best-of-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hnd-gap);
}

@media (min-width: 640px) {
  .best-of-panel__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .best-of-panel__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.best-of-card {
  position: relative;
  background: var(--hnd-card);
  border: 1px solid var(--hnd-border);
  border-radius: var(--hnd-radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
}

.best-of-card__rank {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--hnd-indigo-solid);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.best-of-card__image {
  /* Source images are 16:9 review feature images. A 1:1 box with
     object-fit: contain was letterboxing them against a background fill,
     wasting space. Matching the real aspect ratio and using cover instead
     lets the image fill the tile with no background showing through. */
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.best-of-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.best-of-card__brand {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hnd-ink-soft);
}

.best-of-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.best-of-card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hnd-indigo) !important;
}

/* Buy button, sits under "Read the review". Shows "$XXX at Merchant" when
   there's a live in-stock price, or "Check price at Merchant" when the
   product has a known merchant but no confirmed in-stock price, so the
   card never dead-ends without a path to buy. */
.best-of-card__buy {
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  background: var(--hnd-indigo-solid);
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.best-of-card__buy-price {
  font-family: 'Poppins', sans-serif;
}

.best-of-card__buy-merchant {
  font-weight: 500;
  opacity: 0.85;
}

.best-of-card__buy--unavailable {
  background: var(--hnd-card);
  border: 1px solid var(--hnd-border);
  color: var(--hnd-ink) !important;
}

/* ---- Video row --------------------------------------------------------- */

.video-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hnd-gap);
}

@media (min-width: 768px) {
  .video-row {
    grid-template-columns: repeat(5, 1fr);
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hnd-ink);
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.video-card__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--hnd-ink);
}

.video-card__title {
  font-size: 0.8rem;
  line-height: 1.3;
}

.video-card__thumb {
  cursor: pointer;
}

/* Inline playback modal, so a click plays the video without leaving for
   YouTube. Injected into <body> by home-page-new-design.js, not scoped
   under .home-new-design since it's fixed-position over the whole page. */
.hnd-video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem;
}

.hnd-video-modal-overlay.is-hidden {
  display: none;
}

.hnd-video-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.hnd-video-modal__frame {
  width: 100%;
  height: 100%;
}

.hnd-video-modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hnd-video-modal__close {
  position: absolute;
  top: -2.25rem;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

/* ---- Split membership + Roundup CTA ------------------------------------ */

.home-cta-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hnd-gap);
}

@media (min-width: 768px) {
  .home-cta-split {
    grid-template-columns: 1.3fr 1fr;
  }
}

.home-cta-split__membership {
  background: var(--hnd-indigo-solid);
  color: #fff;
  border-radius: var(--hnd-radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home-cta-split__membership h2 {
  color: #fff;
  font-size: 1.5rem;
}

.home-cta-split__membership p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-cta-split__membership-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: #fff;
  color: var(--hnd-indigo) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  display: inline-block;
}

.home-cta-split__roundup {
  background: var(--hnd-card);
  border: 1px solid var(--hnd-border);
  border-radius: var(--hnd-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-cta-split__roundup-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hnd-indigo);
}

.home-cta-split__roundup-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

.home-cta-split__roundup-link {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hnd-indigo) !important;
}

/* ---- News / Reviews columns -------------------------------------------- */

.home-feed-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .home-feed-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.home-feed-column__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-feed-column__title {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.home-feed-column__link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hnd-indigo) !important;
  white-space: nowrap;
}

.home-feed-column__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.home-feed-card {
  background: var(--hnd-card);
  border: 1px solid var(--hnd-border);
  border-radius: var(--hnd-radius);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  gap: 0.875rem;
}

.home-feed-card img {
  /* Stretches to match the card's full height (set by .home-feed-card's
     align-items: stretch below) rather than a fixed aspect-ratio at a
     centered height, which left a white gap above/below the image
     whenever the card's text ran to two lines. object-fit: cover crops
     the 16:9 source to fill whatever height that ends up being. */
  width: 160px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: calc(var(--hnd-radius) - 4px);
}

.home-feed-card__body {
  padding: 0.75rem 0.875rem 0.75rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.home-feed-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.home-feed-card__excerpt {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--hnd-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Deals rail --------------------------------------------------------- */
/* Intentionally not styled here. #home-deals-grid is populated and styled
   by Code Injection (see code-injection-deals-grid-replacement.html),
   same system that powers the price widget and WTB blocks elsewhere on
   the site. Styling it again here would just fight that CSS. */

/* ---- Topic grid ---------------------------------------------------------- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .topic-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .topic-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.topic-tile {
  background: var(--hnd-card);
  border: 1px solid var(--hnd-border);
  border-radius: var(--hnd-radius);
  padding: 1.25rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.topic-tile__count {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--hnd-ink-soft);
  margin-top: 0.25rem;
}

/* ---- Footer -------------------------------------------------------------- */

.home-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--hnd-ink-soft);
}