/* ==========================================================================
   enflowers.com — Home page module (Direction D v4: Editorial Warm × Fact Hero)
   Home-specific sections only; design tokens, chrome (utility bar, header,
   product-card, footer) and shared components live in base.css.
   Load after base.css. For the summer colorway (home-05), load
   theme-summer.css after this file.
   ========================================================================== */

/* ---------- 4. Trust strip ---------- */

.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
}

.trust-strip ul {
  list-style: none;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: grid;
  gap: var(--space-lg);
}

.trust-strip li {
  padding-left: var(--space-md);
  border-left: 1px solid var(--line-strong);
}

.trust-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.trust-strip span {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .trust-strip ul { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .trust-strip ul { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 5. Categories ---------- */

.categories {
  padding: var(--space-xxl) 0;
}

/* Keep the six-card category set balanced when Grand Opening is present. */
.category-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}

.category-card {
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(28, 43, 35, 0.1);
}

.category-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.category-meta {
  padding: var(--space-md);
  border-top: 1px solid var(--line);
  position: relative;
}

.category-num {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--accent);
}

.category-meta h3 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.category-meta p {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- 6. Best sellers ---------- */

.bestsellers {
  padding: 0 0 var(--space-xxl);
}

/* Prominent "View all flowers" CTA below the best-sellers grid. */
.bestsellers-more {
  max-width: var(--max-width);
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-md);
  text-align: center;
}

.btn-view-all {
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.05rem 3.4rem;
  box-shadow: 0 10px 24px rgba(184, 85, 47, 0.28);
}

.btn-view-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(184, 85, 47, 0.34);
}

/* ---------- 8. Assurance ---------- */

.assurance {
  padding: var(--space-xxl) 0 0;
}

.assurance-grid {
  max-width: var(--max-width);
  margin: 0 auto var(--space-xl);
  padding: 0 var(--space-md);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.assurance-text h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: var(--space-md);
}

.assurance-text > p {
  color: var(--ink-soft);
  max-width: 34rem;
}

/* .assurance-list itself is a shared component — see base.css. */

.assurance-media {
  margin: 0;
}

.assurance-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.assurance-media figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-sm);
  margin-top: var(--space-sm);
}

@media (min-width: 60rem) {
  .assurance-grid { grid-template-columns: 1.05fr 0.95fr; }
}