/* ==========================================================================
   Merch page (/merch/, /nl/merch/, /tr/merch/)
   ==========================================================================
   Loaded after css/style.css on the merch page only. Uses the Furya Group
   tokens (brand-furya-group.css) and reuses the root hero/header/footer and
   the shared lightbox (design-system/components/lightbox.css, js/lightbox.js).
   Class prefix: mc-
   ========================================================================== */

/* Hero: text and product photo side by side; stacked on phones */
.mc-hero { padding: 48px 0 72px; }
.mc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 56px;
  align-items: center;
}
.mc-hero .hero-lede { margin-bottom: 32px; }
.mc-slogan {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--brass);
  margin: -8px 0 20px;
}
.mc-hero-media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}
.mc-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.mc-btn,
.mc-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius);
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.mc-btn:hover { background: color-mix(in srgb, var(--brass) 85%, var(--paper)); color: var(--ink); }

/* Sections */
.mc-section { padding: 80px 0; }
.mc-section--alt { background: #F5F1EA; }
.mc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.15;
  margin: 0 0 24px;
}
.mc-intro { max-width: 640px; margin: 0 0 32px; color: #43403A; line-height: 1.6; }
.mc-note { margin: 20px 0 0; color: #6B675F; font-size: 13px; }

/* Gallery: a square of square tiles, 3×3, the first photo spanning 2×2. Square photos show whole;
   other shapes are centred on their `focus` (_data/merch.json). The lightbox shows every photo whole. */
.mc-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  aspect-ratio: 1 / 1;
  gap: 12px;
  max-width: 840px;
}
.mc-gallery .photo-slot,
.mc-hero-media {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.mc-gallery .photo-slot {
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #EFEAE0;
  cursor: zoom-in;
}
.mc-gallery .photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.mc-tile--big { grid-column: span 2; grid-row: span 2; }
.mc-gallery .photo-slot:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
@media (prefers-reduced-motion: reduce) {
  .mc-gallery .photo-slot, .mc-hero-media { transition: none; }
  .mc-gallery .photo-slot:hover { transform: none; }
}

/* Details: specs list and copy */
.mc-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.mc-specs { margin: 0; border-top: 1px solid rgba(20, 23, 27, 0.12); }
.mc-specs div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20, 23, 27, 0.12);
}
.mc-specs dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B675F;
  padding-top: 2px;
}
.mc-specs dd { margin: 0; font-size: 16px; }
.mc-subtitle { font-family: var(--font-display); font-size: 22px; margin: 0 0 12px; }
.mc-subtitle:not(:first-child) { margin-top: 32px; }
.mc-details p { margin: 0 0 12px; line-height: 1.65; color: #43403A; }

/* Where to get it: upcoming Furya shows (markup from _includes/shows-upcoming.njk) */
.mc-where .show-list { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid rgba(20, 23, 27, 0.12); }
.mc-where .show-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(20, 23, 27, 0.12);
}
.mc-where .show-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 3px;
}
.mc-where .show-date { font-family: var(--font-mono); font-size: 13px; min-width: 150px; }
.mc-where .show-venue { flex: 1; min-width: 200px; font-size: 15px; }
.mc-where .show-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-where .upcoming-note { margin: 0 0 28px; color: #43403A; }
.mc-follow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }

@media (max-width: 860px) {
  .mc-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .mc-hero-media { order: -1; } /* phones: the product first, then the words */
  .mc-details { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .mc-hero { padding: 32px 0 56px; }
  .mc-section { padding: 56px 0; }
  .mc-gallery { gap: 8px; }
  .mc-specs div { grid-template-columns: 96px minmax(0, 1fr); }
  .mc-where .show-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}