/*
 * Text + Media Split — estils skin-aware.
 *
 * Costa: títol H2 cuadrat (font-heading, tracking-tight), body amb max-w-lg,
 *        imatge amb shadow-lg + rounded-sm, fons gris.
 * Terres: títol H2 leading-tight molt tight (mockup), body lleugerament
 *         més gran (text-lg) i amb font-josefin (que és font-sans a terres),
 *         imatge sense shadow, fons blanc.
 */

.text-media-split {
  position: relative;
}

/*
 * L'espaiat vertical el gestionen les utility classes globals
 * .section-spacing-{none|small|medium|large|xlarge} declarades a style.css.
 * El twig aplica section-spacing-{value} a la <section>.
 */

/* ===========================================
   Fons (variants)
   =========================================== */

.tms-bg-white { background-color: #ffffff; }
.tms-bg-gray  { background-color: #f5f5f5; }
.tms-bg-brand-bg { background-color: rgb(var(--neutral-bg, 245 247 250)); }

/* default = blanc per terres, gris per costa */
body.theme-terres .text-media-split.tms-bg-default { background-color: #ffffff; }
body.theme-costa  .text-media-split.tms-bg-default { background-color: #f5f5f5; }
.tms-terres.tms-bg-default { background-color: #ffffff; }
.tms-costa.tms-bg-default  { background-color: #f5f5f5; }

/* ===========================================
   Títol H2 — skin defaults
   =========================================== */

/* Costa: títol tracking-tight, mida fluida amb clamp */
.tms-costa .tms-title,
body.theme-costa .text-media-split:not(.tms-terres) .tms-title {
  font-size: clamp(1.875rem, 4vw, 3rem); /* text-3xl → text-5xl */
  letter-spacing: -0.025em;
  color: rgb(var(--color-headings, var(--brand-primary, 4 36 64)));
  line-height: 1.1;
}

/* Terres: títol molt gran, leading[1.1], tracking-tight */
.tms-terres .tms-title,
body.theme-terres .text-media-split:not(.tms-costa) .tms-title {
  font-size: clamp(2rem, 5vw, 3.5rem); /* text-4xl → ~56px */
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: rgb(var(--brand-primary, 6 115 153));
}

/* ===========================================
   Body — paràgrafs heretats del slot
   =========================================== */

.tms-body {
  max-width: 36rem; /* ~max-w-lg */
}
.tms-body p {
  margin-bottom: 1rem;
}
.tms-body p:last-child {
  margin-bottom: 0;
}

/* Paràgraf destacat (body_emphasis) — sempre bold, color brand-primary (blau a ambdós skins) */
.tms-body-emphasis {
  margin-top: 1rem;
  color: rgb(var(--brand-primary, 4 36 64));
}

/*
 * CTA — skin-aware via body class. El twig sempre passa icona + classe
 * .tms-cta-btn; aquí decidim si:
 *   - Costa: cuadrat (rounded-sm), sense icona, sense colors invertits
 *   - Terres: pill (rounded-full), amb icona, paddings més generosos
 */

/* COSTA: amaga l'icona i deixa el botó cuadrat */
body.theme-costa .tms-cta .tms-cta-btn,
.tms-costa .tms-cta .tms-cta-btn {
  border-radius: 0.125rem; /* rounded-sm */
}
body.theme-costa .tms-cta .tms-cta-btn .material-icons-outlined,
.tms-costa .tms-cta .tms-cta-btn .material-icons-outlined {
  display: none;
}

/* TERRES: pill amb icona, padding generós, text blanc (mockup spec) */
body.theme-terres .tms-cta .tms-cta-btn,
.tms-terres .tms-cta .tms-cta-btn {
  border-radius: 9999px; /* rounded-full */
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  color: #fff;
}
body.theme-terres .tms-cta .tms-cta-btn:hover,
.tms-terres .tms-cta .tms-cta-btn:hover {
  color: #fff;
}

/* Costa: body color gris-fosc, mida normal */
.tms-costa .tms-body,
body.theme-costa .text-media-split:not(.tms-terres) .tms-body {
  color: rgb(var(--neutral-text-main, 24 24 33));
  font-size: 1rem;
  line-height: 1.6;
}

/* Terres: body lleugerament més gran i amb leading-relaxed */
.tms-terres .tms-body,
body.theme-terres .text-media-split:not(.tms-costa) .tms-body {
  color: rgb(var(--neutral-text-main, 40 40 40));
  font-size: clamp(1rem, 1.4vw, 1.25rem); /* 16 → 20px */
  line-height: 1.6;
}

/* ===========================================
   Imatge
   =========================================== */

/* Costa: shadow + rounded-sm + lleuger grayscale */
.tms-costa .tms-image,
body.theme-costa .text-media-split:not(.tms-terres) .tms-image {
  max-width: 36rem; /* max-w-xl */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
  border-radius: 0.125rem; /* rounded-sm */
  filter: grayscale(20%);
}

/* Terres: sense shadow, max més ample, sense filtre */
.tms-terres .tms-image,
body.theme-terres .text-media-split:not(.tms-costa) .tms-image {
  max-width: 48rem; /* max-w-3xl */
}