/* ═══════════════════════════════════════════════════════════════════════
   VIVID HOME — Shop by Style (8 плочки)

   Порт на блока „Eight styles. One that's yours." от прототипа
   /homepage-001/ (.tiles/.tile в proto-assets/proto.css) върху токените
   на темата. Пропорциите са запазени 1:1 от прототипа:
     решетка 4 колони, gap 18px, плочка aspect-ratio 4/4.6,
     градиент отдолу до 46%, lift -4px + image scale 1.06 при hover.

   Заглавието НЕ идва от прототипа — то повтаря визуалния език на
   „Featured Products" (section-featured.css): eyebrow в лилаво + Geologica
   заглавие с градиентен <em>.
   ═══════════════════════════════════════════════════════════════════════ */

.vh-styles {
  padding: var(--vh-section-py) 0;
  background: var(--vh-cream);
}


/* ── Заглавен блок — същият език като .vh-feat__header ─────────────── */

.vh-styles__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--vh-space-12);
  position: relative;
}

.vh-styles__eyebrow {
  display: inline-block;
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-xs);
  font-weight: var(--vh-weight-semibold);
  letter-spacing: var(--vh-tracking-widest);
  text-transform: uppercase;
  color: var(--vh-purple);
  margin-bottom: var(--vh-space-4);
}

.vh-styles__title {
  margin: 0;
  font-family: var(--vh-font-heading);
  font-size: clamp(2rem, 4.5vw, var(--vh-text-5xl));
  font-weight: var(--vh-weight-light);
  line-height: var(--vh-leading-tight);
  letter-spacing: var(--vh-tracking-tighter);
  color: var(--vh-ink);
}

/* Плътно, не градиентно — виж бележката в section-showcase.css: градиентният
   текст е запазен за hero-то и затварящото CTA (DESIGN.md, ~един на viewport). */
.vh-styles__title em {
  font-style: normal;
  color: inherit;
}

.vh-styles__sub {
  margin: var(--vh-space-4) 0 0;
  max-width: 52ch;
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-md);
  line-height: var(--vh-leading-normal);
  color: var(--vh-charcoal);
}


/* ── Решетката с плочките ──────────────────────────────────────────── */

.vh-styles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.vh-style-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 4.6;
  border-radius: var(--vh-radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--vh-linen);
  box-shadow: var(--vh-shadow-md);
  transition:
    transform var(--vh-duration-medium) var(--vh-ease-out),
    box-shadow var(--vh-duration-medium) var(--vh-ease-out);
}

.vh-style-tile:hover,
.vh-style-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--vh-shadow-xl);
}

.vh-style-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--vh-ease-out);
}
.vh-style-tile:hover .vh-style-tile__img { transform: scale(1.06); }

/* Градиентът държи текста четим върху произволна снимка. По-плътен и
   по-висок от прототипа (там кадрите са тъмни; тук интериорните мокъпи
   са светли стени и дивани, върху които белият етикет се губи). */
.vh-style-tile__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 23, 21, 0.85) 0%, rgba(26, 23, 21, 0.35) 28%, transparent 55%);
  pointer-events: none;
}

.vh-style-tile__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: var(--vh-white);
}
.vh-style-tile__label b {
  display: block;
  font-family: var(--vh-font-heading);
  font-size: 1.08rem;
  font-weight: var(--vh-weight-bold);
  line-height: var(--vh-leading-snug);
  letter-spacing: var(--vh-tracking-tight);
}
.vh-style-tile__label small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--vh-font-body);
  font-size: var(--vh-text-sm);
  color: rgba(255, 255, 255, 0.78);
}

.vh-style-tile__arr {
  display: inline-flex;
  transition: transform var(--vh-duration-fast) var(--vh-ease-smooth);
}
.vh-style-tile:hover .vh-style-tile__arr { transform: translateX(4px); }


/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .vh-styles__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .vh-styles__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .vh-styles__header { flex-direction: column; align-items: flex-start; gap: var(--vh-space-4); }
  .vh-style-tile__label { left: 12px; right: 12px; bottom: 12px; }
  .vh-style-tile__label b { font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-style-tile,
  .vh-style-tile__img,
  .vh-style-tile__arr { transition: none; }
}