/* =========================================================
   Collections CSS
   Romm Coffee — interactive package switcher (home).

   A row of circular product tabs; clicking one swaps the
   featured package image + name + origin + tasting note.
   The interaction pattern is inspired by a coffee-brand
   collection switcher, but the layout, palette (teal) and
   content are Romm's own.

   Works with:
   - Pages/Index.cshtml (.collections)
   - wwwroot/js/collections.js
   - Models/RommPackages.cs
========================================================= */

.collections {
  padding-block: var(--section-padding-lg, clamp(5rem, 9vw, 8rem));
  background: var(--color-surface-soft, #eaf1f1);
}

/* ---------- Tabs ---------- */

.collection-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);

  margin-top: var(--space-7, 3rem);
}

.collection-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: clamp(4.5rem, 9vw, 5.75rem);

  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;

  color: var(--color-text-muted, #5f7a7d);
  transition: color var(--transition-base, 220ms ease);
}

.collection-tab-thumb {
  display: grid;
  place-items: center;
  width: clamp(3.75rem, 7vw, 4.75rem);
  aspect-ratio: 1;
  overflow: hidden;

  background: var(--color-surface, #ffffff);
  border: 2px solid transparent;
  border-radius: var(--radius-full, 999px);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(16, 24, 40, 0.08));

  transition:
    transform var(--transition-base, 220ms ease),
    border-color var(--transition-base, 220ms ease),
    box-shadow var(--transition-base, 220ms ease);
}

.collection-tab-thumb img {
  width: 118%;
  height: 118%;
  object-fit: cover;
  /* Show the colourful label band, not the bag top. */
  object-position: center 38%;
}

.collection-tab-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.collection-tab:hover .collection-tab-thumb,
.collection-tab:focus-visible .collection-tab-thumb {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 12px 28px rgba(16, 24, 40, 0.12));
}

.collection-tab.is-active {
  color: var(--color-primary, #06515d);
}

.collection-tab.is-active .collection-tab-thumb {
  border-color: var(--color-primary, #06515d);
  transform: translateY(-3px);
}

.collection-tab:focus-visible {
  outline: none;
}

/* ---------- Stage ---------- */

.collection-stage {
  position: relative;
  isolation: isolate;

  display: grid;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;

  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);

  background: var(--color-surface, #ffffff);
  border-radius: var(--radius-xl, 1.5rem);
  box-shadow: var(--shadow-md, 0 12px 28px rgba(16, 24, 40, 0.1));
  overflow: hidden;
}

@media (min-width: 760px) {
  .collection-stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* Soft tint from the active package's accent colour. */
.collection-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: radial-gradient(
    90% 120% at 20% 10%,
    color-mix(in srgb, var(--collection-accent, #06515d) 16%, transparent) 0%,
    transparent 60%
  );
  transition: background var(--transition-slow, 350ms ease);
}

.collection-figure {
  display: grid;
  place-items: center;
  min-height: clamp(16rem, 34vw, 24rem);
}

.collection-figure img {
  max-width: min(100%, 20rem);
  max-height: clamp(16rem, 34vw, 26rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(6, 50, 61, 0.28));

  transition: opacity var(--transition-base, 220ms ease);
}

/* JS toggles this for a quick cross-fade on switch. */
.collection-figure.is-swapping img {
  opacity: 0;
}

.collection-kicker {
  display: inline-block;
  margin-bottom: var(--space-2, 0.5rem);

  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary-dark, #3f7b7e);
}

.collection-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, var(--text-3xl, 2.5rem));
  line-height: var(--line-tight, 1.15);
  letter-spacing: -0.015em;
  color: var(--color-text, #12292d);
  text-wrap: balance;
}

.collection-origin {
  margin: var(--space-2, 0.5rem) 0 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-secondary, #649ea1);
}

.collection-note {
  margin: var(--space-4, 1rem) 0 0;
  max-width: 44ch;
  font-size: var(--text-md, 1.125rem);
  line-height: var(--line-relaxed, 1.7);
  color: var(--color-text-muted, #5f7a7d);
  text-wrap: pretty;
}

.collection-actions {
  margin-top: var(--space-6, 2rem);
}

@media (prefers-reduced-motion: reduce) {
  .collection-tab-thumb,
  .collection-figure img,
  .collection-stage::before {
    transition: none;
  }
}