/* ============================================== */
/*  CASE DESIGN PAGE                              */
/*  Estilos específicos para los casos de diseño  */
/* ============================================== */

/* Ajustes de espaciado y fondo */
.case-page .hero {
  padding-block-end: 0;
}

.case-page section:not(.hero) {
  padding-block: var(--space-2xl);
}

/* Categoría arriba del H1 */
.case-page .case-category {
  margin-block: var(--space-xl) var(--space-xs);
  text-transform: uppercase;
  color: var(--color-contrast);
  font-family: var(--font-condensed);
  font-variation-settings: 'wdth' 70;
  font-weight: 500;
  font-size: 0.9em;
  letter-spacing: 0.1em;
}

#case-title {
  margin: 0;
  padding: 0;
}

/* Grilla Responsiva Asimétrica de 2 Columnas */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (width >=52em) {
  .case-grid {
    grid-template-columns: min(30em, 50%) 1fr;
    gap: var(--space-2xl);
  }
}

/* Contenedor de Imagen (Figura) */
.case-page .case-figure {
  aspect-ratio: 1;
  /* overflow: hidden; */
  position: relative;
  /* border: 1px solid hsl(from var(--color-contrast) h s l / 10%); */
  cursor: zoom-in;
  width: 100%;
  max-width: 30em;
  /* Límite para pantallas angostas / móvil */
  margin-inline: auto;
  background-color: hsl(0 0% 50% / 30%);
}

.case-page .case-figure:hover img {
  transform: scale(1.05);
}

@media (width >=52em) {
  .case-page .case-figure {
    position: sticky;
    top: calc(var(--header-height, 85px) + var(--space-xl));
    max-width: none;
    /* Delegar el control del ancho al Grid */
    margin-inline: 0;
  }
}

/* Imagen dentro de la figura */
.case-page .case-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-md) var(--ease-expo);
}

/* Descripción / Copete destacado abajo de la imagen */
.case-page .description {
  margin: 1em 0 0 0;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.35rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-contrast);
  text-wrap: pretty;
}

.case-content {
  text-box: trim-both cap alphabetic;
}

.case-content p span {
  display: block;
}


/* Carrusel de otros proyectos */
.case-page .otros {
  padding-block-end: 0;

  h2 {
    margin-bottom: var(--space-2xl);
  }
}

.case-page .otros .project-carousel {
  scrollbar-color: hsl(from var(--color-contrast) h s l / 20%) transparent;

  & .sketch-card:has(:hover, :focus-within) {
    border-color: transparent;
  }
}