/**
 * Deep Perfume — homepage sections (§5.2 grades, §5.4 story teaser).
 * Best-sellers reuse .deep-section + .deep-grid from components.css.
 * Depends on tokens.css + components.css. Loaded on the front page only.
 */

/* =========================================================================
 * Category showcase — second section (after hero)
 * ====================================================================== */
.deep-cats{ background:var(--c-cream); }

/* Desktop/tablet: roomy image tiles that fill the row organically. */
.deep-cats__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--s-4);
}

.deep-cat{
  position:relative; isolation:isolate; overflow:hidden;
  aspect-ratio:4/5; border-radius:var(--r-lg);
  display:flex; align-items:flex-end; justify-content:center;
  text-decoration:none; padding:var(--s-4);
  background:linear-gradient(180deg, var(--c-plum) 0%, var(--c-plum-deep) 100%);
}
.deep-cat__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
  transition:transform var(--dur-base) var(--ease);
}
.deep-cat:hover .deep-cat__img{ transform:scale(1.06); }
.deep-cat__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgb(38 9 58 / .78) 0%, rgb(38 9 58 / .15) 60%, transparent 100%);
}
.deep-cat.has-no-image .deep-cat__scrim{
  background:radial-gradient(120% 90% at 50% 10%, rgb(176 138 82 / .22) 0%, transparent 55%);
}
.deep-cat__name{
  font-family:var(--f-ar); font-weight:700; color:var(--c-cream);
  font-size:var(--fs-h3); line-height:var(--lh-ar-head); text-align:center;
  text-shadow:0 1px 12px rgb(38 9 58 / .5);
}

/* Mobile: compact 4-column grid so all 7 categories fit on screen — NO scroll.
   7 tiles wrap to two rows (4 + 3). Tiles shrink to squares and the name sits
   below in small type. */
@media (max-width:768px){
  .deep-cats{ padding-block:var(--s-6); }
  .deep-cats .deep-section__head{ margin-bottom:var(--s-4); }
  .deep-cats__grid{ grid-template-columns:repeat(4, 1fr); gap:var(--s-2); }
  .deep-cat{
    aspect-ratio:1; border-radius:var(--r-md); padding:var(--s-2);
    align-items:center;
  }
  .deep-cat__name{ font-size:11px; }
  .deep-cat__scrim{ background:linear-gradient(to top, rgb(38 9 58 / .82) 0%, rgb(38 9 58 / .28) 100%); }
}
@media (max-width:360px){
  .deep-cats__grid{ gap:6px; }
  .deep-cat__name{ font-size:10px; }
}

/* =========================================================================
 * §5.2 — Five oud grades (the page's most-considered block)
 * ====================================================================== */
.deep-grades{ background:var(--c-cream); }

.deep-grades__row{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--s-4);
}

.deep-grade{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:var(--s-3); min-height:340px; padding:var(--s-6) var(--s-4) var(--s-5);
  border-radius:var(--r-lg); text-decoration:none; overflow:hidden;
  /* dark ground so cream text always passes contrast; --grade is per-card */
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--grade) 34%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--c-plum) 0%, var(--c-plum-deep) 100%);
  border:1px solid color-mix(in srgb, var(--grade) 40%, var(--c-line));
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.deep-grade:hover,
.deep-grade:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 18px 40px color-mix(in srgb, var(--grade) 30%, transparent);
}

/* rank numeral, top corner, in the metallic tone (decorative) */
.deep-grade__rank{
  position:absolute; inset-block-start:var(--s-4); inset-inline-end:var(--s-4);
  font-family:var(--f-en); font-size:1.5rem; font-weight:700;
  color:var(--grade); opacity:.85; line-height:1;
}
/* metallic ring above the name */
.deep-grade__ring{
  width:64px; height:64px; border-radius:var(--r-pill); margin-block-end:var(--s-2);
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--grade) 90%, #fff) 0%, var(--grade) 55%, color-mix(in srgb, var(--grade) 55%, #000) 100%);
  box-shadow:0 6px 18px color-mix(in srgb, var(--grade) 45%, transparent);
}
.deep-grade__name{
  font-family:var(--f-ar); font-size:var(--fs-h3); font-weight:700; color:var(--c-cream);
  line-height:var(--lh-ar-head); text-align:center;
}
.deep-grade__cta{
  font-family:var(--f-ar); font-size:var(--fs-small); color:var(--grade);
  transition:color var(--dur-fast);
}
.deep-grade:hover .deep-grade__cta{ color:var(--c-cream); }

/* Mobile: horizontal snap-scroll instead of a 5-up grid. */
@media (max-width:1024px){
  .deep-grades__row{
    display:flex; overflow-x:auto; gap:var(--s-4);
    scroll-snap-type:x mandatory; padding-block-end:var(--s-3);
    -webkit-overflow-scrolling:touch;
  }
  .deep-grade{
    flex:0 0 clamp(180px, 60%, 240px); scroll-snap-align:center; min-height:300px;
  }
}

/* =========================================================================
 * §5.4 — Story teaser
 * ====================================================================== */
.deep-story-teaser{ background:var(--c-emerald); color:var(--c-cream); }
.deep-story-teaser__inner{
  max-width:760px; margin-inline:auto; padding:var(--s-9) var(--gutter);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s-5);
}
.deep-story-teaser__text{
  font-family:var(--f-ar); font-size:clamp(1.15rem,1rem+.8vw,1.6rem);
  line-height:var(--lh-ar-body); color:var(--c-cream); margin:0; text-wrap:balance;
}