/* ─────────────────────────────────────────────
   ELÓR Country — páginas dedicadas por categoría (country-<cat>.html)
   Estilo Minotti /sofas: hero de ambiente full-bleed → filas alternadas
   packshot (retrato de estudio, papel) ↔ escena inspiracional luminosa,
   mucho aire vertical, stagger. Reusa .ct-hero y los dialogs .ct-obra de
   country.css; aquí solo lo específico de la fila (.cc-*).
   Página generada por tmp/gen-country-cats.py — el CSS sí se edita a mano.
   ───────────────────────────────────────────── */

/* hero de categoría: un pelo más bajo que el landing */
.cc-hero { height: min(80vh, 780px); }

/* ── Sección de filas ── */
.cc-rows {
  background: var(--ct-papel);
  padding: clamp(64px, 10vh, 120px) var(--ct-pad-x) var(--ct-sect);
}

.cc-rows__inner { max-width: 1320px; margin: 0 auto; }

.cc-rows__head {
  max-width: 680px;
  margin-bottom: clamp(40px, 6vh, 72px);
}

.cc-rows__back {
  display: inline-block;
  margin-bottom: 22px;
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--elor-warm-gray);
  border-bottom: 1px solid transparent;
  transition: color 240ms var(--easing-editorial), border-color 240ms var(--easing-editorial);
}

.cc-rows__back::before { content: '\2190\00a0\00a0'; }
.cc-rows__back:hover { color: var(--elor-ink); border-bottom-color: rgba(13, 8, 5, 0.4); }

.cc-rows__kicker {
  font-family: var(--font-label);
  font-size: var(--fs-body-s);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--elor-cognac);
  margin: 0 0 14px;
}

.cc-rows__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  color: var(--elor-ink);
  margin: 0;
}

.cc-rows__count {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--elor-warm-gray);
  margin: 14px 0 0;
}

/* ── La fila: escena ancha ↔ aside (packshot + texto), alternando lados ── */
.cc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  padding-block: clamp(52px, 8vh, 104px);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--easing-editorial), transform 800ms var(--easing-editorial);
}

.cc-row.is-in { opacity: 1; transform: none; }

/* primera fila pegada al head; última sin cola extra */
.cc-row:first-child { padding-top: clamp(8px, 2vh, 24px); }
.cc-row:not(:first-child) { border-top: 1px solid rgba(20, 13, 8, 0.10); }

/* alterna: filas pares con la escena a la derecha */
.cc-row:nth-child(even) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr); }
.cc-row:nth-child(even) .cc-row__scene { order: 2; }
.cc-row:nth-child(even) .cc-row__aside { order: 1; }

/* ── Escena inspiracional (ambiente luminoso) ── */
.cc-row__scene {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e3d8;
}

.cc-row__scene-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--easing-editorial);
}

.cc-row:hover .cc-row__scene-img { transform: scale(1.03); }

/* ── Aside: retrato de estudio (papel, multiply) + texto ── */
.cc-row__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 3.4vh, 40px);
}

.cc-row__packshot {
  width: min(300px, 78%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ct-papel);
}

.cc-row__packshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.cc-row__text { display: block; }

.cc-row__kicker {
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--elor-cognac);
  margin: 0 0 10px;
}

.cc-row__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  color: var(--elor-ink);
  margin: 0 0 8px;
}

.cc-row__maker {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  letter-spacing: 0.04em;
  color: var(--elor-warm-gray);
  margin: 0;
  max-width: 26em;
}

.cc-row__price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--elor-ink);
  margin: 12px 0 0;
}

.cc-row__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 2.6vh, 28px);
}

/* botón "Ver la ficha": reusa .ct-card__open (JS abre el dialog) pero se
   pinta como CTA fantasma; especificidad 0,2,0 gana sobre .ct-card__open */
.cc-row .cc-row__ficha,
.cc-row__encargar {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 11px 22px;
  font-family: var(--font-label);
  font-size: var(--fs-body-s);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 240ms var(--easing-editorial), color 240ms var(--easing-editorial), opacity 240ms var(--easing-editorial);
}

.cc-row .cc-row__ficha {
  color: var(--elor-ink);
  background: none;
  border: 1px solid rgba(13, 8, 5, 0.35);
}

.cc-row .cc-row__ficha:hover { background: var(--elor-ink); color: var(--ct-papel); }

.cc-row__encargar {
  color: var(--ct-papel);
  background: var(--elor-ink);
  border: 1px solid var(--elor-ink);
}

.cc-row__encargar:hover { opacity: 0.82; }

.cc-row .cc-row__ficha:focus-visible,
.cc-row__encargar:focus-visible {
  outline: 2px solid var(--elor-cognac);
  outline-offset: 3px;
}

/* ── Móvil ── */
@media (max-width: 860px) {
  .cc-hero { height: min(70vh, 620px); }
  .cc-row,
  .cc-row:nth-child(even) { grid-template-columns: 1fr; gap: 22px; padding-block: 44px; }
  .cc-row:nth-child(even) .cc-row__scene { order: 0; }
  .cc-row:nth-child(even) .cc-row__aside { order: 0; }
  .cc-row__scene { aspect-ratio: 3 / 2; }
  .cc-row__aside { align-items: stretch; }
  .cc-row__packshot { width: min(220px, 62%); }
  .cc-row__ctas { gap: 8px; }
}

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .cc-row { opacity: 1; transform: none; transition: none; }
  .cc-row__scene-img { transition: none; }
}