/* ============================================================
   ITA Treatments Carousel — Frontend styles
   ============================================================ */

.ita-tratamos {
  width: 100%;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.ita-tratamos__title {
  color: var(--color-text);
}

/* ── Top row: header + nav ───────────────────────────────────────────────── */

.ita-tratamos__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

/* ── Carousel ────────────────────────────────────────────────────────────── */

/* Full-bleed clip */
.ita-tratamos-carousel-clip {
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Track */
.ita-tratamos-carousel {
  display: flex;
  gap: 16px;
  overflow: visible;
  padding-top: 4px;
  /* Pre-calcula en CSS la alineación con el título para evitar el salto visual
     antes de que el JS (align()) mida el offset real. Coincide exactamente con
     el borde izquierdo de la columna de contenido:
       margen de centrado (max-width 1264px)  +  gutter lateral (--page-padding: 24px).
     El gutter va literal (24px) porque --page-padding es shorthand "0 24px" y no
     puede usarse dentro de calc() para un solo lado. */
  padding-left: calc(max(0px, 50vw - var(--wp--style--global--content-size, 1264px) / 2) + 24px); /* JS lo confirma con el offset real del título */
  padding-right: 2rem;
  will-change: transform;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.ita-tratamos-card {
  flex: 0 0 292px;
  border-radius: 16px;
  border: 1px solid var(--color-border-default, #e2e8f0);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  min-height: 292px;
}

.ita-tratamos-card:hover {
  box-shadow: var(--box-shadow);
  transform: translateY(-2px);
}

a.ita-tratamos-card {
  text-decoration: none;
  color: inherit;
}

/* Card image */
.ita-tratamos-card__image {
  width: 100%;
  height: 150px;
  flex-shrink: 0;
  background: var(--color-text, #37424a);
  overflow: hidden;
}

.ita-tratamos-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ita-tratamos-card__image--placeholder {
  background: var(--menu-color);
}

/* Card body */
.ita-tratamos-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.ita-tratamos-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #1e2a32);
  margin: 0;
  line-height: 1.35;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */

.ita-tratamos-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ita-tratamos-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--color-tag-bg);
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1.4;
}

/* ── Grid layout ─────────────────────────────────────────────────────────── */

.ita-tratamos--grid .ita-tratamos__top {
  display: block;
  margin-bottom: 32px;
}

.ita-tratamos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ita-tratamos--grid .ita-tratamos-card {
  flex: none;
  width: 100%;
}

@media (max-width: 1024px) {
  .ita-tratamos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ita-tratamos-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.ita-tratamos-footer {
  display: flex;
  margin-top: 8px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Full-bleed clip becomes the scroll container */
  .ita-tratamos-carousel-clip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
  }

  .ita-tratamos-carousel-clip::-webkit-scrollbar {
    height: 4px;
  }

  .ita-tratamos-carousel-clip::-webkit-scrollbar-track {
    background: var(--color-border-default, #e5e7eb);
    border-radius: 4px;
  }

  .ita-tratamos-carousel-clip::-webkit-scrollbar-thumb {
    background: var(--color-text, #37424a);
    border-radius: 4px;
  }

  .ita-tratamos-carousel {
    padding-left: 0;
    padding-right: 0;
    will-change: auto;
    padding-bottom: 8px;
  }

  .ita-tratamos-card {
    scroll-snap-align: start;
  }
}