/**
 * coffee-map.css — Sección Café Colombiano con mapa interactivo
 * (coffes-carousel-section + colombia-map + colombia-map-pin +
 * coffee-origin-card del frontend Astro).
 *
 * Depende de: tokens.css e inview.js (dibujado del mapa y entrada de pines).
 * La interactividad (clases .is-active, variables --ax/--ay del anclaje)
 * la maneja assets/js/coffee-map.js.
 */

/* ==========================================================================
   Sección y encabezado
   ========================================================================== */
.lm-cmap {
  position: relative;
  overflow: hidden;
  max-width: 100svw;
  padding: 5rem 0; /* py-20 */
}

.lm-cmap__header {
  max-width: 96rem; /* ≈ max-w-9xl */
  margin: 0 auto;
  padding: 0 1rem; /* px-4 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem; /* gap-3 */
}
.lm-cmap__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--secondary);
  font-size: 8vw; /* base mobile; valor del TSX en md+ */
  line-height: 1;
}
.lm-cmap__subtitle {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.125rem; /* text-lg */
  color: var(--on-surface-variant);
  max-width: 36rem; /* max-w-xl */
}

.lm-cmap__map-wrap {
  width: 100%;
  padding: 4rem 1rem; /* py-16 + gutter */
  margin: 0 auto;
}

/* ==========================================================================
   Mapa SVG: departamentos
   ========================================================================== */
.lm-cmap__svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.lm-cmap__dept {
  fill: var(--surface-container);
  stroke: var(--outline-variant);
  stroke-width: 0.8;
  stroke-linejoin: round;

  /* Dibujado del contorno al entrar al viewport (pathLength del TSX) */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    fill 0.3s ease,
    stroke-dashoffset 1.2s ease-in-out,
    opacity 1.2s ease-in-out;
}
.lm-cmap__svg.is-inview .lm-cmap__dept {
  stroke-dashoffset: 0;
  opacity: 1;
}
.lm-cmap__dept.has-coffee {
  fill: var(--primary-container);
}
.lm-cmap__dept.is-active {
  fill: var(--secondary-container);
}

/* ==========================================================================
   Pines de café
   ========================================================================== */
.lm-cmap-pin {
  cursor: pointer;
  outline: none;

  /* Entrada escalonada (delayChildren 0.5 + stagger 0.15 del TSX) */
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(0.5s + var(--pin-i, 0) * 0.15s),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(0.5s + var(--pin-i, 0) * 0.15s);
}
.lm-cmap__svg.is-inview .lm-cmap-pin {
  opacity: 1;
  transform: scale(1);
}

/* Escala interactiva en un wrapper interno (para no pelear con la entrada) */
.lm-cmap-pin__scale {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* ≈ spring 300/15 */
}
.lm-cmap-pin:hover .lm-cmap-pin__scale,
.lm-cmap-pin.is-active .lm-cmap-pin__scale {
  transform: scale(1.25);
}

/* Anillo de pulso en loop */
.lm-cmap-pin__pulse {
  fill: var(--secondary);
  transform-box: fill-box;
  transform-origin: center;
  animation: lm-cmap-pulse 2.2s ease-out infinite;
}
@keyframes lm-cmap-pulse {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

/* Halo suave del estado activo */
.lm-cmap-pin__halo {
  fill: var(--secondary);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lm-cmap-pin.is-active .lm-cmap-pin__halo {
  opacity: 0.25;
}

/* Cuerpo y grano central */
.lm-cmap-pin__body {
  fill: var(--secondary);
  stroke: var(--on-secondary);
  stroke-width: 2;
}
.lm-cmap-pin__dot {
  fill: var(--on-secondary);
}
.lm-cmap-pin:focus-visible .lm-cmap-pin__body {
  stroke: var(--tertiary);
}

/* ==========================================================================
   Layout mobile (<md): mapa arriba, tarjeta debajo
   ========================================================================== */
.lm-cmap__mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; /* gap-8 */
}
.lm-cmap__mobile-map {
  width: 100%;
  max-width: 28rem; /* max-w-md */
}
.lm-cmap__mobile-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

/* ==========================================================================
   Layout desktop (md+): mapa 3D + tarjeta flotante anclada
   ========================================================================== */
.lm-cmap__stage {
  position: relative;
  margin: 0 auto;
  display: none;
  width: 100%;
  max-width: 31rem; /* max-w-124 */
  padding: 4rem 0; /* pt-16 pb-16 */
  perspective: 1100px;
  perspective-origin: 50% 0%;
}

/* Mesa que sostiene el mapa, inclinada tipo maqueta */
.lm-cmap__tilt {
  transform: rotateX(45deg) rotateZ(4deg);
  transform-origin: top center;
  transform-style: preserve-3d;
}

/* Línea conectora punteada del pin activo a la tarjeta */
.lm-cmap__line {
  position: absolute;
  top: var(--ay, 50%);
  width: 5rem;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--secondary) 0 5px,
    transparent 5px 10px
  ); /* strokeDasharray 5 5 */
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
}
.lm-cmap__stage.side-right .lm-cmap__line {
  left: var(--ax, 50%);
}
.lm-cmap__stage.side-left .lm-cmap__line {
  left: calc(var(--ax, 50%) - 5rem);
}
.lm-cmap__stage.is-measured .lm-cmap__line.is-drawing {
  animation: lm-cmap-line 0.4s ease-out both;
}
@keyframes lm-cmap-line {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Tarjeta flotante anclada al pin activo */
.lm-cmap__float {
  position: absolute;
  z-index: 10;
  width: 22rem; /* w-88 */
  top: var(--ay, 50%);
  transform: translateY(-50%);
  opacity: 0;
}
.lm-cmap__stage.is-measured .lm-cmap__float {
  opacity: 1;
}
.lm-cmap__stage.side-right .lm-cmap__float {
  left: calc(var(--ax, 50%) + 5rem);
}
.lm-cmap__stage.side-left .lm-cmap__float {
  right: calc(100% - var(--ax, 50%) + 5rem);
}

/* ==========================================================================
   Tarjeta del café (coffee-origin-card)
   ========================================================================== */
.lm-cmap-card {
  width: 100%;
  max-width: 28rem; /* max-w-md */
  overflow: hidden;
  border-radius: 2rem; /* rounded-4xl */
  background: var(--surface-container-lowest);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}

/* Swap tipo AnimatePresence mode="wait" (simplificado a CSS) */
.lm-cmap-card:not(.is-active) {
  display: none;
}
.lm-cmap-card.is-active {
  animation: lm-cmap-card-in 0.35s ease-out;
}
@keyframes lm-cmap-card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Imagen con overlay --- */
.lm-cmap-card__media {
  position: relative;
  height: 20rem; /* h-80 */
  width: 100%;
  overflow: hidden;
}
.lm-cmap-card__media img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.lm-cmap-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.1) 50%,
    transparent
  );
}
.lm-cmap-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* gap-1 */
  padding: 1.5rem; /* p-6 */
}
.lm-cmap-card__region {
  font-family: var(--font-text);
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  color: color-mix(in srgb, var(--on-primary) 90%, transparent);
}
.lm-cmap-card__tagline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem; /* text-2xl */
  line-height: 1.25; /* leading-tight */
  color: var(--on-primary);
}

/* --- Cuerpo --- */
.lm-cmap-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* gap-5 */
  padding: 1.5rem; /* p-6 */
}

.lm-cmap-card__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem; /* gap-x-4 */
  row-gap: 0.75rem; /* gap-y-3 */
}
.lm-cmap-card__fact {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* gap-0.5 */
}
.lm-cmap-card__fact dt {
  font-family: var(--font-text);
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
  color: var(--on-surface-variant);
}
.lm-cmap-card__fact dd {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  color: var(--on-surface);
}

.lm-cmap-card__notes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* gap-2 */
}
.lm-cmap-card__notes-label {
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.lm-cmap-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lm-cmap-card__chip {
  border-radius: 9999px;
  background: var(--secondary-container);
  padding: 0.25rem 0.75rem; /* py-1 px-3 */
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--on-secondary-container);
}

.lm-cmap-card__cta {
  margin-top: 0.25rem; /* mt-1 */
  display: inline-flex;
  height: 3rem; /* h-12 */
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--secondary);
  padding: 0 1.5rem; /* px-6 */
  font-family: var(--font-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em; /* tracking-wide */
  color: var(--on-secondary);
  text-decoration: none;
  transition: background 0.3s ease;
}
.lm-cmap-card__cta:hover {
  background: var(--tertiary);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 768px) {
  .lm-cmap__title {
    font-size: 4.2vw; /* text-[4.2cqw] */
  }
  .lm-cmap__mobile {
    display: none;
  }
  .lm-cmap__stage {
    display: block;
  }
}

/* ==========================================================================
   Accesibilidad: movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lm-cmap__dept {
    transition: fill 0.3s ease;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .lm-cmap-pin {
    transition: none;
    opacity: 1;
    transform: scale(1);
  }
  .lm-cmap-pin__pulse {
    animation: none;
    opacity: 0;
  }
  .lm-cmap-card.is-active {
    animation: none;
  }
  .lm-cmap__stage.is-measured .lm-cmap__line.is-drawing {
    animation: none;
    opacity: 1;
    clip-path: none;
  }
}