/* ============================
   Treatments Section & Cards
   File: assets/css/treatments.css
   ============================ */

/* ---- Tokens (fallbacks bàsics) ---- */
:root {
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
    --shadow-md: 0 6px 16px rgba(0,0,0,.10);
  
  }
  

  
  /* ---- Secció ---- */
  .home-treatments {
    padding-block: var(--space-8);
    background: var(--color-surface-2);
  }
  .home-treatments .wrapper {
    max-width: min(1440px, 92vw);
    margin-inline: auto;
  }
  .home-treatments__header {
    margin-bottom: var(--space-3);
    text-align: center;

  }
  
  /* ---- Grid 4-up responsive ---- */
  .tto-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr; /* mòbil per defecte */
  }
  
  /* ≥ 480px: 2 per fila */
  @media (min-width: 480px) {
    .tto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  
  /* ≥ 768px: 3 per fila */
  @media (min-width: 768px) {
    .tto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  
  /* ≥ 1100px: 4 per fila */
  @media (min-width: 1100px) {
    .tto-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  
  /* ---- Card ---- */
  .tto-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform;
  }
  .tto-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  
  /* Media */
  .tto-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  @supports not (aspect-ratio: 4 / 3) {
    .tto-card__media::before {
      content: "";
      display: block;
      padding-top: calc(100% * 3 / 4);
    }
    .tto-card__img {
      position: absolute;
      inset: 0;
    }
  }
  .tto-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
  }
  .tto-card__media:hover .tto-card__img {
    transform: scale(1.03);
  }
  .tto-card__media[aria-disabled="true"] { cursor: default; }
  
  /* Còs */
  .tto-card__body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .tto-card__title a {
    color: inherit;
    text-decoration: none;
  }
  .tto-card__title a:hover {
    text-decoration: underline;
  }

  
  /* CTA */
  .tto-card__cta {
    justify-self: start;
  }
  
  
  
  /* ---- Focus visible ---- */
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .tto-card a:focus-visible {
    outline: 2px solid hsl(var(--color-ring));
    outline-offset: 2px;
  }
  
  /* ---- Reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .tto-card,
    .tto-card__img,
    .btn {
      transition: none !important;
    }
    .tto-card:hover { transform: none; }
  }
  
  /* ---- Versió compacta ---- */
  .tto-card--compact .tto-card__body {
    padding: calc(var(--space-3) + 2px);
    gap: .55rem;
  }
  .tto-card--compact .tto-card__title {
    font-size: 1rem;
    line-height: 1.2;
  }
  .tto-card--compact .tto-card__desc {
    font-size: .9rem;
  }
  .tto-card--compact .btn {
    padding: .5rem .85rem;
    font-size: .9rem;
  }
  .tto-card--compact .tto-card__media {
    aspect-ratio: 1 / 1;
  }
  @supports not (aspect-ratio: 1 / 1) {
    .tto-card--compact .tto-card__media::before {
      padding-top: 100%;
    }
  }
  
  /* ---- Utilitats ---- */
  .content.stack { display: block; }
  
  /* Skeleton loading (opcional) */
  .tto-card--skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.10) 37%, rgba(0,0,0,0.06) 63%);
    background-size: 400% 100%;
    animation: tto-shimmer 1.4s ease-in-out infinite;
    min-height: 280px;
    border-radius: var(--radius-lg);
  }
  @keyframes tto-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
  }
  
/* Línea centrada de lado a lado con el título encima */
.home-treatments__header{
  position: relative;
  margin: clamp(16px, 3.2vw, 28px) 0;
}

.home-treatments__header::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;          /* de banda a banda */
  top: 50%;          /* mitad de la altura del header */
  transform: translateY(-50%);
  height: 1px;
  background: color-mix(in oklab, var(--color-text) 28%, transparent);
  opacity: .9;
  pointer-events: none;
}

/* El h2 se “come” la línea con un fondo suave */
.home-treatments__header .body-l{
  position: relative;
  display: inline-block;
  padding-inline: .6rem;                  /* separa el texto del corte */
  background: var(--color-bg);
  line-height: 1.1;
}

/* Ajuste de aire en móvil */
@media (max-width: 768px){
  .home-treatments__header{ margin: 18px 0; }
  .home-treatments__header .body-l{ padding-inline: .5rem; }
}


/* ===== Card layout: título+desc izquierda, CTA redondo abajo derecha ===== */
.tto-card__body{
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title cta"
    "desc  cta";
  align-items: end;
}
.tto-card__title{ grid-area: title; }
.tto-card__desc{  grid-area: desc;  }
.tto-card__cta{   grid-area: cta;   justify-self: end; align-self: end; }

/* ===== CTA redondo con flecha ===== */
.tto-card__cta--round{
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-dark);
  color: var(--color-text-inverted);          /* color flecha */
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform .18s var(--ease-standard, ease),
    color .18s var(--ease-standard, ease),
    box-shadow .18s var(--ease-standard, ease);
}
.tto-card__cta--round svg{
  transition: transform .18s var(--ease-standard, ease);
  transform: translateX(0);
}
.tto-card__cta--round:hover{
  /* la bolita no cambia de fondo; la flecha cambia de color */
  color: var(--color-text-soft);
  box-shadow: var(--shadow-md);
}
.tto-card__cta--round:hover svg{
  transform: translateX(4px);                 /* pequeño desplazamiento */
}
.tto-card__cta--round:active{ transform: translateY(1px); }
.tto-card__cta--round.is-disabled{
  opacity: .45; pointer-events: none; filter: grayscale(.15);
}

/* Focus accesible */
.tto-card__cta--round:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Responsive fino */
@media (max-width: 768px){
  .tto-card__cta--round{ inline-size: 52px; block-size: 52px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tto-card__cta--round,
  .tto-card__cta--round svg{ transition: none !important; }
}


/* === Card: layout compacto + CTA debajo a la derecha === */

/* 1) Body a una sola columna; CTA bajo la descripción a la derecha */
.tto-card__body{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: var(--space-2);                 /* menos separación vertical */
  padding: var(--space-4);
}
.tto-card__title{ margin: 0 0 .35rem; }
.tto-card__desc{  margin: .25rem 0 .5rem; color: var(--color-text-medium, currentColor); }
.tto-card__cta{   justify-self: end; align-self: end; margin-top: .25rem; }

/* 2) CTA redonda: círculo más pequeño, flecha más grande */
.tto-card__cta--round{
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-dark);
  color: var(--color-text-inverted);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform .18s var(--ease-standard, ease),
    color .18s var(--ease-standard, ease),
    box-shadow .18s var(--ease-standard, ease);
}
.tto-card__cta--round svg{
  inline-size: 28px;                   /* flecha más grande */
  block-size: 28px;
  transform: translateX(0);
  transition: transform .18s var(--ease-standard, ease);
}
.tto-card__cta--round:hover{
  color: var(--color-text-soft);       /* cambia color icono */
  box-shadow: var(--shadow-md);
}
.tto-card__cta--round:hover svg{ transform: translateX(5px); }
.tto-card__cta--round:active{ transform: translateY(1px); }
.tto-card__cta--round.is-disabled{ opacity:.45; pointer-events:none; }

/* 3) Focus accesible */
.tto-card__cta--round:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 999px;
}

/* 4) Ajuste responsive (un pelín mayor en desktop) */
@media (min-width: 992px){
  .tto-card__cta--round{ inline-size: 48px; block-size: 48px; }
  .tto-card__cta--round svg{ inline-size: 30px; block-size: 30px; }
}


/* ===== Cards: fondo blanco y alturas consistentes ===== */
.tto-card{
  background: #fff;               /* fondo blanco */
  height: 100%;                   /* que pueda estirarse dentro del grid */
  display: flex;
  flex-direction: column;
}

/* Cuerpo: título + descripción arriba, espacio flexible, CTA al fondo */
.tto-card__body{
  flex: 1;                        /* llena el alto disponible del card */
  display: grid;
  grid-template-rows: auto auto 1fr auto;  /* title, desc, spacer, cta */
  gap: var(--space-2);
  padding: var(--space-4);
}

/* Colores: la descripción hereda el mismo color que el título */
.tto-card__title,
.tto-card__desc{
  color: inherit;                 /* mismo color para ambos */
}
.tto-card__title{ margin: 0 0 .35rem; }
.tto-card__desc{  margin: .15rem 0 .35rem; }

/* CTA redonda: siempre al fondo a la derecha */
.tto-card__cta{
  grid-row: 4;
  justify-self: end;
  align-self: end;
  margin-top: .25rem;
}

/* Tamaños del CTA (círculo más pequeño, flecha más grande) */
.tto-card__cta--round{
  inline-size:34px;
  block-size: 34px;
  border-radius: 999px;
  background: var(--color-bg-dark);
  color: var(--color-text-inverted);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, color .18s ease, box-shadow .18s ease;
}
.tto-card__cta--round svg{
  inline-size: 28px;
  block-size: 28px;
  transform: translateX(0);
  transition: transform .18s ease;
}
.tto-card__cta--round:hover{
  color: var(--color-text-soft);
  box-shadow: var(--shadow-md);
}
.tto-card__cta--round:hover svg{ transform: translateX(5px); }
.tto-card__cta--round:active{ transform: translateY(1px); }
.tto-card__cta--round.is-disabled{ opacity:.45; pointer-events:none; }

/* Focus accesible */
.tto-card__cta--round:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Desktop: un pelín mayor si quieres */
@media (min-width: 992px){
  .tto-card__cta--round{ inline-size: 48px; block-size: 48px; }
  .tto-card__cta--round svg{ inline-size: 30px; block-size: 30px; }
}

/* === Compactación de “Tratamientos” ==================== */
:root{
  --tto-cta-size: 44px; /* diámetro de la bolita */
}

/* Sección y grid con menos aire */
.home-treatments{ padding-block: var(--space-6); }
.home-treatments__header{ margin-bottom: var(--space-2); }
.tto-grid{ gap: var(--space-4); }

/* Card más ceñido y CTA fijo en esquina inferior derecha */
.tto-card{ position: relative; background:#fff; }

/* Imagen menos alta (hace la card más compacta) */
.tto-card__media{ aspect-ratio: 16 / 9; }              /* antes 4/3, más alta */
@media (min-width: 1200px){
  .tto-card__media{ aspect-ratio: 3 / 2; }             /* un pelín más alto en desktop amplio */
}

/* Cuerpo: márgenes/padding ajustados y reserva para la CTA */
.tto-card__body{
  display: block;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-4) + var(--tto-cta-size) + .25rem); /* hueco para la bolita */
}
.tto-card__title,
.tto-card__desc{ color: inherit; }
.tto-card__title{ margin: 0 0 .25rem; }
.tto-card__desc{  margin: .15rem 0 .25rem; }

/* CTA redonda: posición fija abajo-dcha en todos los cards */
.tto-card__cta{
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  margin: 0;
  justify-self: auto; align-self: auto; /* anula grid previos */
}

/* Tamaño compacto de la bolita + icono grande */
.tto-card__cta--round{
  inline-size: var(--tto-cta-size);
  block-size: var(--tto-cta-size);
  background: var(--color-bg-dark);
  color: var(--color-text-inverted);
  border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, color .18s ease, box-shadow .18s ease;
}
.tto-card__cta--round svg{ inline-size: 28px; block-size: 28px; transition: transform .18s ease; }
.tto-card__cta--round:hover{ color: var(--color-text-soft); box-shadow: var(--shadow-md); }
.tto-card__cta--round:hover svg{ transform: translateX(5px); }
.tto-card__cta--round:active{ transform: translateY(1px); }

@media (min-width: 992px){
  :root{ --tto-cta-size: 46px; } /* un pelín mayor en desktop si quieres */
}



/* --- Pill promo (Home) --- */
.tto-card { position: relative; }

.pill {
  position: absolute;
  top: .75rem; right: .75rem;
  display: inline-flex; align-items: center;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08));
  user-select: none;
  z-index: 2;
}

.pill--promo {
  background: #FF9800; /* naranja vivo */
  color: #000000;
}


@media (max-width: 480px){
  .pill { font-size: .72rem; padding: .3rem .55rem; top: .6rem; right: .6rem; }
}