/* =========================================================
   ALKIMIA — Products Gallery
   ========================================================= */

.products {
  padding-block: clamp(var(--sp-20), 12vw, var(--sp-48));
  background: var(--c-bg-alt);
  overflow: hidden;
}

/* ---- Asymmetric bento grid ---- */
.products__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 3px;
  margin-top: clamp(var(--sp-12), 6vw, var(--sp-24));
}

/* Layout: first card is hero (large), the next four keep the original mosaic,
   and the final row adds Chardonnay, Vinagre and Oli as separate squares. */
.product-card:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.product-card:nth-child(2) { grid-column: span 4; }
.product-card:nth-child(3) { grid-column: span 3; }
.product-card:nth-child(4) { grid-column: span 4; }
.product-card:nth-child(5) { grid-column: span 3; }
.product-card:nth-child(6) { grid-column: span 4; }
.product-card:nth-child(7) { grid-column: span 4; }
.product-card:nth-child(8) { grid-column: span 4; }

/* ---- Individual card ---- */
.product-card {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.product-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card__bg {
  transform: scale(1.04);
}

/* Background: photo when available, gradient fallback always under */
.product-card__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.product-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.product-card__photo img.loading {
  opacity: 0;
}

.product-card:hover .product-card__photo img {
  transform: scale(1.04);
}

/* Gradient overlays for readability & fallback color per product */
.product-card__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Per-product color identity */
.product-card--vi-negre .product-card__bg {
  background: radial-gradient(ellipse at 50% 20%, rgba(80,10,30,0.9) 0%, rgba(15,5,10,1) 100%);
}
.product-card--vermut .product-card__bg {
  background: radial-gradient(ellipse at 50% 30%, rgba(100,55,20,0.9) 0%, rgba(30,12,5,1) 100%);
}
.product-card--priorat .product-card__bg {
  background: radial-gradient(ellipse at 50% 20%, rgba(90,15,25,0.9) 0%, rgba(18,5,8,1) 100%);
}
.product-card--temple-tinto .product-card__bg {
  background: radial-gradient(ellipse at 50% 25%, rgba(70,20,15,0.9) 0%, rgba(20,8,5,1) 100%);
}
.product-card--licor .product-card__bg {
  background: radial-gradient(ellipse at 50% 30%, rgba(180,100,120,0.7) 0%, rgba(60,20,35,1) 100%);
}
.product-card--chardonnay .product-card__bg {
  background: radial-gradient(ellipse at 50% 25%, rgba(160,130,40,0.8) 0%, rgba(30,22,5,1) 100%);
}
.product-card--vinagre .product-card__bg {
  background: radial-gradient(ellipse at 50% 20%, rgba(30,20,5,0.95) 0%, rgba(8,8,8,1) 100%);
}
.product-card--oil .product-card__bg {
  background: radial-gradient(ellipse at 50% 25%, rgba(65,45,20,0.9) 0%, rgba(12,10,6,1) 100%);
}

/* Gradient overlay on top of photo for text legibility */
.product-card--vi-negre .product-card__gradient {
  background: linear-gradient(to top, rgba(15,5,10,0.95) 0%, rgba(15,5,10,0.3) 50%, transparent 100%);
}
.product-card--vermut .product-card__gradient {
  background: linear-gradient(to top, rgba(30,12,5,0.95) 0%, rgba(30,12,5,0.25) 50%, transparent 100%);
}
.product-card--priorat .product-card__gradient {
  background: linear-gradient(to top, rgba(18,5,8,0.95) 0%, rgba(18,5,8,0.3) 55%, transparent 100%);
}
.product-card--temple-tinto .product-card__gradient {
  background: linear-gradient(to top, rgba(20,8,5,0.95) 0%, rgba(20,8,5,0.3) 55%, transparent 100%);
}
.product-card--licor .product-card__gradient {
  background: linear-gradient(to top, rgba(60,20,35,0.95) 0%, rgba(60,20,35,0.2) 50%, transparent 100%);
}
.product-card--chardonnay .product-card__gradient {
  background: linear-gradient(to top, rgba(30,22,5,0.95) 0%, rgba(30,22,5,0.2) 50%, transparent 100%);
}
.product-card--vinagre .product-card__gradient {
  background: linear-gradient(to top, rgba(8,8,8,0.98) 0%, rgba(8,8,8,0.3) 55%, transparent 100%);
}
.product-card--oil .product-card__gradient {
  background: linear-gradient(to top, rgba(12,10,6,0.95) 0%, rgba(12,10,6,0.22) 50%, transparent 100%);
}

/* ---- Decorative bottle silhouette when no photo ---- */
.product-card__silhouette {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.product-card__silhouette-icon {
  font-size: clamp(4rem, 10vw, 8rem);
  opacity: 0.07;
  filter: grayscale(1);
  transition: opacity 0.4s ease, transform 0.6s ease;
}

.product-card:hover .product-card__silhouette-icon {
  opacity: 0.12;
  transform: scale(1.05) translateY(-4%);
}

/* ---- Content block ---- */
.product-card__content {
  position: relative;
  z-index: 3;
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.product-card__category {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.product-card--vi-negre    .product-card__category,
.product-card--priorat     .product-card__category,
.product-card--temple-tinto .product-card__category { color: #c07090; }
.product-card--vermut      .product-card__category  { color: #c0905a; }
.product-card--licor       .product-card__category  { color: #e0a0b8; }
.product-card--chardonnay  .product-card__category  { color: var(--c-gold-pale); }
.product-card--vinagre     .product-card__category  { color: var(--c-gold); }
.product-card--oil         .product-card__category  { color: var(--c-gold-pale); }

.product-card:hover .product-card__category {
  opacity: 1;
  transform: translateY(0);
}

.product-card__name {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-lg), 2.5vw, var(--fs-2xl));
  font-weight: var(--fw-light);
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: var(--ls-snug);
}

.product-card__sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: var(--c-text-muted);
  letter-spacing: var(--ls-wide);
  margin-top: var(--sp-1);
}

.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease) 0.05s, transform 0.35s var(--ease) 0.05s;
}

.product-card:hover .product-card__tags {
  opacity: 1;
  transform: translateY(0);
}

.product-tag {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--c-text-soft);
}

.product-tag--gold {
  border-color: rgba(196,148,59,0.5);
  color: var(--c-gold-pale);
}

.product-tag--eco {
  border-color: rgba(100,160,60,0.5);
  color: #90c060;
}

/* ---- Awards strip ---- */
.product-card__awards {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 3;
  display: flex;
  gap: var(--sp-2);
}

.award-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(196,148,59,0.4);
}

.award-badge--outline {
  background: transparent;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
}

/* ---- Edition label ---- */
.product-card__edition {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  z-index: 3;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold);
  background: rgba(8,8,8,0.75);
  padding: 4px 10px;
  border: 1px solid var(--c-border-gold);
  backdrop-filter: blur(4px);
}


/* Product photo framing: centered and adjusted per bottle so it reads correctly inside each tile */
.product-card__photo img { object-position: center center; }
.product-card--vi-negre .product-card__photo img { object-position: center center; }
.product-card--vermut { aspect-ratio: 1 / 1; min-height: 360px; }
.product-card--vermut .product-card__photo img { object-fit: contain; object-position: center center; }
.product-card--priorat .product-card__photo img { object-position: center center; }
.product-card--temple-tinto .product-card__photo img { object-position: center center; }
.product-card--licor .product-card__photo img { object-position: center center; }
.product-card--chardonnay .product-card__photo img { object-position: center center; }
.product-card--vinagre .product-card__photo img { object-position: center center; }
.product-card--oil .product-card__photo img { object-position: center center; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .product-card:nth-child(1) { grid-column: span 6; grid-row: span 2; }
  .product-card:nth-child(2) { grid-column: span 6; }
  .product-card:nth-child(3) { grid-column: span 6; }
  .product-card:nth-child(4) { grid-column: span 4; }
  .product-card:nth-child(5) { grid-column: span 4; }
  .product-card:nth-child(6) { grid-column: span 4; }
  .product-card:nth-child(7) { grid-column: span 6; }
  .product-card:nth-child(8) { grid-column: span 6; }
}

@media (max-width: 780px) {
  .products__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3px;
  }
  .product-card:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 260px;
  }
  .product-card:nth-child(1) {
    grid-column: span 2;
  }
  .product-card:nth-child(7),
  .product-card:nth-child(8) {
    grid-column: span 2;
  }
  /* Always show category and tags on touch */
  .product-card__category,
  .product-card__tags {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 480px) {
  .products__grid {
    grid-template-columns: 1fr;
  }
  .product-card:nth-child(n) {
    grid-column: span 1;
    min-height: 220px;
  }
}