/**
 * MésioFits homepage sections (brand brief §12).
 * Palette and fonts come from theme.css variables.
 */

.home-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mesio-olive);
}

.home-heading { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.home-heading h2 { margin: 0; }

.home-empty { color: var(--text-muted); text-align: center; padding: 24px 0; }
.home-centered-cta { text-align: center; margin: 32px 0 0; }

/* Section 2 — Shop by Category */
.home-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px) {
  .home-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

.home-category-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mesio-sand);
  color: var(--mesio-ivory);
  text-decoration: none;
}
.home-category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.home-category-card:hover img { transform: scale(1.04); }
.home-category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 33, 28, 0.62) 0%, rgba(43, 33, 28, 0) 55%);
}

/* No lifestyle image yet: a calm sand panel with the M monogram */
.home-category-card--plain { background: var(--mesio-sand); color: var(--mesio-espresso); }
.home-category-card--plain::after { display: none; }
.home-category-card:nth-child(2).home-category-card--plain { background: #cfc0ab; }
.home-category-card:nth-child(4).home-category-card--plain { background: #e3d7c7; }
.home-category-card__mark {
  position: absolute;
  inset: 22% 22% 38%;
  background: url('../images/brand/monogram.png') center / contain no-repeat;
  opacity: 0.18;
}

.home-category-card__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-category-card__name {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1;
}
.home-category-card__cta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-category-card__cta i { font-size: 0.6rem; margin-left: 4px; transition: transform var(--duration) var(--ease-out); }
.home-category-card:hover .home-category-card__cta i { transform: translateX(4px); }

/* Section 4 — Featured Collection */
.home-feature {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--mesio-sand);
}
@media (min-width: 900px) {
  .home-feature { grid-template-columns: 1.1fr 1fr; min-height: 520px; }
}
.home-feature__media { position: relative; min-height: 320px; overflow: hidden; }
.home-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-feature--plain .home-feature__media { background: #cfc0ab; display: flex; align-items: center; justify-content: center; }
.home-feature--plain .home-feature__media img.home-feature__monogram {
  position: static;
  width: min(46%, 240px);
  height: auto;
  object-fit: contain;
  opacity: 0.35;
}
.home-feature__text {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 900px) { .home-feature__text { padding: 64px 72px; } }
.home-feature__text h2 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.home-feature__text p:not(.home-eyebrow) { color: var(--text-muted); max-width: 440px; margin: 8px 0 18px; }

/* Section 6 — Made in Nigeria */
.home-nigeria { background: var(--mesio-espresso); color: var(--mesio-ivory); padding: 80px 0; }
.home-nigeria__inner { max-width: 720px; text-align: center; }
.home-nigeria__mark { width: 56px; height: auto; opacity: 0.85; margin-bottom: 20px; }
.home-nigeria .home-eyebrow { color: var(--mesio-sand); }
.home-nigeria h2 { margin: 0 0 16px; color: var(--mesio-ivory); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.home-nigeria p:not(.home-eyebrow) { color: var(--mesio-sand); font-size: 1.05rem; line-height: 1.8; margin: 0; }

/* Section 7 — Brand Story */
.home-story__inner { max-width: 680px; text-align: center; }
.home-story h2 { margin: 0 0 16px; }
.home-story p:not(.home-eyebrow) { color: var(--text-muted); line-height: 1.8; margin: 0 0 24px; }

/* Buttons on the homepage follow the editorial style */
.home-page .btn { border-radius: 0; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.74rem; padding: 14px 28px; }
.home-page .btn-primary { background: var(--mesio-espresso); border-color: var(--mesio-espresso); color: var(--mesio-ivory); }
.home-page .btn-primary:hover { background: var(--mesio-olive); border-color: var(--mesio-olive); }
.home-page .btn-outline { background: transparent; border: 1px solid var(--mesio-espresso); color: var(--mesio-espresso); }
.home-page .btn-outline:hover { background: var(--mesio-espresso); color: var(--mesio-ivory); }
.home-nigeria__mark { display: block; margin: 0 auto 20px; }