/* ==========================================================================
   QRBELL Store — Homepage
   --------------------------------------------------------------------------
   Loaded ONLY by index.html. Every selector is namespaced `.home-*` or scoped
   under `.store-home`, so nothing here can affect the product, shop, cart or
   admin pages.

   Design intent: a compact, product-first storefront. Not a landing page.
   The hero is capped, sections are tight, and the product imagery carries the
   visual weight rather than typography or whitespace.
   ========================================================================== */

.store-home {
  /* Homepage-local rhythm. Deliberately tighter than the global
     --section-gap (64–80px), which is tuned for content pages. */
  --home-section: var(--space-8);      /* 32px — mobile */
  --home-section-tight: var(--space-6);
  --home-hero-min: 320px;
}

@media (min-width: 768px) {
  .store-home {
    --home-section: var(--space-12);   /* 48px */
    --home-section-tight: var(--space-8);
    --home-hero-min: 380px;
  }
}

@media (min-width: 1200px) {
  .store-home {
    --home-section: 60px;
    --home-section-tight: var(--space-10);
    --home-hero-min: 420px;
  }
}

.home-section { padding-block: var(--home-section); }
.home-section--tight { padding-block: var(--home-section-tight); }
.home-section--alt { background: var(--qb-grey-050); }
.home-section--white { background: var(--color-surface); }

/* Section heading — compact, 24–32px desktop per the brief */
.home-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.home-head__title {
  margin: 0;
  font-size: 1.25rem;                  /* 20px mobile */
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.home-head__sub {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.home-head__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .home-head__title { font-size: 1.625rem; }   /* 26px */
  .home-head { margin-bottom: var(--space-6); }
}

@media (min-width: 1200px) {
  .home-head__title { font-size: 1.875rem; }   /* 30px */
}


/* ==========================================================================
   HERO — capped height, product composition on the right
   Target: ~420px desktop, ~340px mobile. Never a full-viewport hero.
   ========================================================================== */

.home-hero {
  position: relative;
  background: var(--qb-navy-900);
  color: var(--color-text-invert);
  overflow: hidden;
}

/* A single restrained warm wash so the navy is not flat. No blobs. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 82% 40%, rgba(244, 180, 0, 0.12), transparent 68%);
  pointer-events: none;
}

.home-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-8);
  min-height: var(--home-hero-min);
}

@media (min-width: 992px) {
  .home-hero__inner {
    grid-template-columns: 45fr 55fr;   /* brief §8 */
    gap: var(--space-10);
    padding-block: var(--space-10);
  }
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Strong but not oversized — the brief explicitly rules out 50–70px */
.home-hero__title {
  margin: 0 0 var(--space-3);
  color: var(--color-text-invert);
  font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.625rem);   /* 28 → 42px */
  font-weight: var(--weight-extra);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}
.home-hero__title em { color: var(--color-primary); font-style: normal; }

.home-hero__lead {
  margin: 0 0 var(--space-5);
  max-width: 42ch;
  color: var(--color-text-invert-muted);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 480px) {
  .home-hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .home-hero__actions > .qb-btn { width: 100%; padding-inline: var(--space-3); }
}

/* Trust ticks under the CTAs — small, one line each */
.home-hero__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.home-hero__tick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-invert-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.home-hero__tick i { color: var(--color-primary); font-size: 0.95rem; }


/* -- Hero product composition --------------------------------------------
   One tall plate beside two square tags. Presented as merchandise on light
   cards, not as posters on the navy. */

.home-hero__stage {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-3);
  height: 260px;
}

@media (min-width: 576px) { .home-hero__stage { height: 300px; } }
@media (min-width: 992px) { .home-hero__stage { height: 340px; gap: var(--space-4); } }
@media (min-width: 1200px) { .home-hero__stage { height: 380px; } }

.home-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.home-tile--tall { grid-row: span 2; }

.home-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36); }
@media (hover: none) { .home-tile:hover { transform: none; } }

.home-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The doorbell plate is a tall product on white — show all of it */
.home-tile--tall .home-tile__img { object-fit: contain; padding: var(--space-2); }

/* Price chip: makes the composition read as a storefront, not a gallery */
.home-tile__chip {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 3px var(--space-2);
  background: rgba(7, 9, 28, 0.86);
  color: var(--color-text-invert);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}


/* ==========================================================================
   SHOP BY NEED — seven compact tiles
   ========================================================================== */

.home-needs {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 576px) { .home-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 768px) { .home-needs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .home-needs { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.home-need {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.home-need:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  color: var(--color-text);
  text-decoration: none;
}
@media (hover: none) { .home-need:hover { transform: none; box-shadow: none; } }

.home-need__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-xs);
  color: var(--qb-gold-700);
  font-size: 1.05rem;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.home-need:hover .home-need__icon { background: var(--color-primary); color: var(--color-on-primary); }

.home-need__name { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.2; }

.home-need__blurb {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

/* Below sm the blurb makes the row too tall — the name carries it */
@media (max-width: 400px) {
  .home-need__blurb { display: none; }
  .home-need { padding: var(--space-3); }
}


/* HOW IT WORKS and HELP ME CHOOSE now use the shared .qb-flow and
   .qb-cta-band components in components.css — two pages need them. */

/* ==========================================================================
   TRUST STRIP — replaces the full-width privacy poster
   Target: ~150px. The poster survives only as a small thumbnail.
   ========================================================================== */

/* Dark band. The page runs grey → white → white through here; a navy band
   restores the rhythm and makes the privacy claim read as a statement
   rather than a footnote. */

.home-trust {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: var(--space-6);
  background: var(--qb-navy-900);
  border-radius: var(--radius-section);
}

@media (min-width: 768px) {
  .home-trust { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) var(--space-8); }
}

@media (min-width: 1200px) {
  .home-trust { grid-template-columns: 170px 300px minmax(0, 1fr); gap: var(--space-8); }
}

/* The proof shot: the scan-to-connect moment. Below md it would only add
   height to a section the brief wants compact. */
.home-trust__media { display: none; }

@media (min-width: 768px) {
  .home-trust__media {
    display: block;
    /* Bounded, or the tall phone shot drives the whole band past the
       ~220px this section is meant to occupy. */
    height: 180px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--qb-navy-800);
  }
  .home-trust__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

@media (min-width: 1200px) { .home-trust__media { height: 210px; } }

.home-trust__lead { min-width: 0; }

.home-trust__title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-invert);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

@media (min-width: 768px) { .home-trust__title { font-size: 1.5rem; } }

.home-trust__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.home-trust__link:hover { color: var(--qb-gold-500); text-decoration: underline; }

/* On md the media and lead share the first row, points span beneath */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-trust__points { grid-column: 1 / -1; }
}

.home-trust__points {
  display: grid;
  gap: var(--space-4) var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) { .home-trust__points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.home-trust__point { display: flex; align-items: flex-start; gap: var(--space-2); }

/* One colour. Mixed icon colours read as accidental, not meaningful. */
.home-trust__point i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 1rem;
}

.home-trust__point-title {
  color: var(--color-text-invert);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}
.home-trust__point-text {
  display: block;
  color: var(--color-text-invert-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}


/* ==========================================================================
   BUSINESS CTA — one compact dark banner, ~200px
   ========================================================================== */

/* Light, deliberately.
   The trust band above and the footer below are both navy. A third dark block
   between them turned the whole end of the page into one slab. This one is a
   light panel so the page still breathes before the footer. */

.home-business {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--qb-grey-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
}

@media (min-width: 768px) {
  .home-business {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
  }
}

.home-business__title {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  line-height: 1.25;
  max-width: 22ch;
}

@media (min-width: 768px) { .home-business__title { font-size: 1.5rem; } }

.home-business__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.home-business__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .home-business__actions { display: grid; grid-template-columns: 1fr; }
  .home-business__actions > .qb-btn { width: 100%; }
}