/*
 * CSS supplement — only things theme.json cannot express cleanly.
 * Keep this file small. Anything that can live in theme.json should.
 */

/* Header: sticky via CSS, not via WP's position attribute (which generates
 * runtime classes that break block validation). */
.ttg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(244, 239, 232, 0.78) !important; /* override has-cream-background-color for translucency */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ttg-header-row { width: 100%; align-items: center; }

/* Home header nav — anchors to sections of the landing.
 * Now rendered via wp:navigation block (editable visually). Styles target
 * both the new wp-block-navigation links AND the old wp:html <nav><a> tags
 * (defensive: DB overrides created before the refactor still work). */
.ttg-nav { align-items: center; }

/* New (wp:navigation block) */
.ttg-nav.wp-block-navigation .wp-block-navigation__container {
  gap: 32px;
  align-items: center;
}
.ttg-nav.wp-block-navigation .wp-block-navigation-item__content {
  font-size: 14px;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  opacity: 0.78;
  transition: opacity 0.15s ease;
}
.ttg-nav.wp-block-navigation .wp-block-navigation-item__content:hover {
  opacity: 1;
  text-decoration: none;
}

/* Old (wp:html <nav><a>) — kept so DB overrides from the legacy markup
 * still render correctly. */
nav.ttg-nav { display: flex; gap: 32px; }
nav.ttg-nav a {
  font-size: 14px;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  opacity: 0.78;
  transition: opacity 0.15s ease;
}
nav.ttg-nav a:hover { opacity: 1; }

@media (max-width: 880px) {
  /* On narrow viewports hide the inline links; logo + CTA still visible. */
  .ttg-nav { display: none; }
}

/* Logo (wp:image block pointing to assets/images/logo.svg).
 * Renders as a proper image both in the front-end and in the Site Editor
 * (instead of the raw SVG markup that wp:html shows). */
.ttg-logo {
  margin: 0 !important;
  flex-shrink: 0;
  line-height: 0;
}
.ttg-logo a { display: inline-block; line-height: 0; }
.ttg-logo img {
  width: 170px;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .ttg-logo img { width: 130px; }
}

/* Defensive fallback: an earlier version of the theme rendered the logo as
 * inline SVG inside a wp:html block with class="ttg-logo-link". If a DB
 * template-part override still uses that markup (because the editor was
 * saved before the refactor), keep these rules so the logo still renders
 * sized correctly until the override is reset. */
.ttg-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  line-height: 0;
  flex-shrink: 0;
}
.ttg-logo-link svg {
  width: 170px;
  height: auto;
  display: block;
  color: var(--wp--preset--color--ink);
}
@media (max-width: 720px) {
  .ttg-logo-link svg { width: 130px; }
}

/* Internal header navigation (wp:navigation block — items editable via UI). */
.ttg-internal-nav .wp-block-navigation__container {
  gap: 32px;
}
.ttg-internal-nav .wp-block-navigation-item__content {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  opacity: 0.78;
  transition: opacity 0.15s ease;
  font-size: 14px;
}
.ttg-internal-nav .wp-block-navigation-item__content:hover {
  opacity: 1;
  text-decoration: none;
}
@media (max-width: 880px) {
  .ttg-internal-nav { display: none; }
}

/* Italic accent helper.
 * Originally we used <em class="ttg-italic"> but WordPress's heading/paragraph
 * blocks strip class attributes from inline <em>, which then breaks block
 * validation ("El bloque contiene contenido inesperado o no válido").
 * Solution: target plain <em> inside our brand headings — the italic + heavier
 * weight is the look we want everywhere it appears anyway. */
.wp-block-heading em,
.ttg-hero-title em,
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: 500;
}

/* Kept for backwards compatibility with any markup outside the editor. */
.ttg-italic { font-style: italic; font-weight: 500; }

/* Pill button override for outlined variant (used inside .wp-block-button.is-style-outline) */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-radius: 999px;
  border-width: 1px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  padding: 12px 26px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--on-dark);
}

/* On-dark pill */
.has-on-dark-color .wp-block-button.is-style-outline > .wp-block-button__link,
.ttg-on-dark .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: var(--wp--preset--color--on-dark);
  color: var(--wp--preset--color--on-dark);
}

/* Trailing arrow utility — works on plain links and on wp-block-button wrappers.
 * When applied to a wp:button block, WP wraps the link in a <div class="wp-block-button">,
 * so the ::after on the wrapper renders on its own line. Target the inner link instead. */
.ttg-arrow:not(.wp-block-button)::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.2s ease;
}
.ttg-arrow.wp-block-button .wp-block-button__link::after {
  content: " \2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.ttg-arrow:not(.wp-block-button):hover::after,
.ttg-arrow.wp-block-button:hover .wp-block-button__link::after {
  transform: translateX(3px);
}

/* Method section head: heading left, button right, aligned to baseline. */
.ttg-method-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.ttg-method-head > *:first-child { flex: 1 1 320px; min-width: 0; }
.ttg-method-head > *:last-child  { flex: 0 0 auto; }

/* Hero headline scale tweaks (theme.json fluid sizing is close but we want very tight tracking) */
.ttg-hero-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(64px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}

/* Hero image strip — 4 columns of editable Image blocks. */
.ttg-hero-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ttg-hero-strip .wp-block-image { margin: 0; }
.ttg-hero-strip .wp-block-image img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 6px; display: block;
}
@media (max-width: 880px) {
  .ttg-hero-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Moodboard 6-col grid populated by editable Image blocks. */
.ttg-moodboard {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 110px;
  gap: 14px;
}
.ttg-moodboard .wp-block-image {
  margin: 0; height: 100%; min-height: 0; min-width: 0;
  border-radius: 6px; overflow: hidden;
}
.ttg-moodboard .wp-block-image img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px;
}
/* 6-col grid filled with 7 tiles across 4 rows (24 cells, no gaps):
 *   Row 1-2: mb-1 (2x2) · mb-2 (1x2 vertical) · mb-3 (2x2) · mb-4 (1x2 vertical)
 *   Row 3-4: mb-5 (2x2) · mb-6 (2x2) · mb-7 (2x2)
 * mb-2 and mb-4 give vertical variety in the top row; the bottom row is uniform. */
.ttg-moodboard .mb-1 { grid-column: span 2; grid-row: span 2; }
.ttg-moodboard .mb-2 { grid-column: span 1; grid-row: span 2; }
.ttg-moodboard .mb-3 { grid-column: span 2; grid-row: span 2; }
.ttg-moodboard .mb-4 { grid-column: span 1; grid-row: span 2; }
.ttg-moodboard .mb-5 { grid-column: span 2; grid-row: span 2; }
.ttg-moodboard .mb-6 { grid-column: span 2; grid-row: span 2; }
.ttg-moodboard .mb-7 { grid-column: span 2; grid-row: span 2; }
@media (max-width: 880px) {
  .ttg-moodboard { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 90px; }
  .ttg-moodboard .wp-block-image { grid-column: span 1 !important; grid-row: span 2 !important; }
}

/* Trust strip — 4 stat items as Groups. */
.ttg-trust-row {
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: center;
}
.ttg-trust-item { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.ttg-trust-item .ttg-trust-num {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 34px; font-weight: 500; letter-spacing: -0.02em;
  margin: 0; line-height: 1;
}
.ttg-trust-item .ttg-trust-lbl {
  font-size: 13px; color: var(--wp--preset--color--muted); max-width: 18ch; margin: 0;
}

/* Method steps — each step is a Group of: number + title + description. */
.ttg-steps { display: grid; gap: 0; }
.ttg-step {
  display: grid; grid-template-columns: 80px 1fr 1fr; gap: 32px; align-items: start;
  padding: 36px 0; border-top: 1px solid rgba(0,0,0,.12);
}
.ttg-step:last-child { border-bottom: 1px solid rgba(0,0,0,.12); }
.ttg-step > * { margin: 0 !important; }
.ttg-step .ttg-step-n {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 42px; font-weight: 500; line-height: 1;
}
.ttg-step .ttg-step-t {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 28px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
}
.ttg-step .ttg-step-d { color: var(--wp--preset--color--ink-soft); font-size: 16px; max-width: 46ch; }
@media (max-width: 880px) {
  .ttg-step { grid-template-columns: 60px 1fr; gap: 20px; }
  .ttg-step .ttg-step-d { grid-column: 2; }
}

/* Phases list inside the "Asesoramiento" section. */
.ttg-phase-row {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 24px 0; border-top: 1px solid rgba(0,0,0,0.15); margin: 0;
}
.ttg-phase-row:last-child { border-bottom: 1px solid rgba(0,0,0,0.15); }
.ttg-phase-row > * { margin: 0 !important; }
.ttg-phase-row .ttg-phase-n {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 24px; font-weight: 500;
}
.ttg-phase-row .ttg-phase-t {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 22px; font-weight: 500; line-height: 1.2;
}
.ttg-phase-row .ttg-phase-d { font-size: 14px; color: var(--wp--preset--color--ink-soft); }

/* Pill links grid for "What we do" — uses wp:buttons. */
.ttg-link-grid .wp-block-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ttg-link-grid .wp-block-button { margin: 0; }
.ttg-link-grid .wp-block-button .wp-block-button__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 18px 26px;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  font-size: 14px; font-weight: 400;
  transition: all 0.2s;
}
.ttg-link-grid .wp-block-button .wp-block-button__link::after {
  content: "→"; transition: transform .2s; margin-left: auto;
}
.ttg-link-grid .wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--on-dark);
}
.ttg-link-grid .wp-block-button .wp-block-button__link:hover::after { transform: translateX(3px); }
@media (max-width: 880px) {
  .ttg-link-grid .wp-block-buttons { grid-template-columns: 1fr; }
}

/* Testimonial cards. */
.ttg-testimonial {
  background: var(--wp--preset--color--white);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 20px 40px -28px rgba(0,0,0,.25);
}
.ttg-testimonial .ttg-stars { letter-spacing: 2px; margin: 0 0 14px; font-size: 14px; }
.ttg-testimonial .ttg-quote {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 19px; line-height: 1.4; margin: 0 0 24px; font-weight: 500;
}
.ttg-testimonial .ttg-author {
  display: flex; align-items: center; gap: 12px; margin: 0;
}
.ttg-testimonial .ttg-author .wp-block-image {
  margin: 0; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; overflow: hidden;
}
.ttg-testimonial .ttg-author .wp-block-image img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}
.ttg-testimonial .ttg-author-name { font-size: 14px; font-weight: 600; line-height: 1.2; margin: 0; }
.ttg-testimonial .ttg-author-role { font-size: 12px; color: var(--wp--preset--color--muted); margin: 2px 0 0; }

/* FAQ — leverage core/details */
.wp-block-details {
  border-top: 1px solid rgba(255,255,255,.15); padding: 22px 0; cursor: pointer;
}
.wp-block-details summary {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 20px; font-weight: 500;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.wp-block-details summary::after {
  content: "+"; font-size: 24px; font-weight: 300; transition: transform 0.2s;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }

/* Rounded corners applied via className so the block markup stays canonical
 * and passes WP block validation (border in JSON requires extra classes that
 * are easy to miss). */
.ttg-cover-rounded { border-radius: 8px; overflow: hidden; }
.ttg-image-rounded { border-radius: 10px; overflow: hidden; }
.ttg-image-rounded img { border-radius: 10px; }

/* Image-as-background utility used by hero strip and community feature */
.ttg-bg-img {
  background-size: cover; background-position: center; border-radius: 6px;
}
.ttg-aspect-3-4 { aspect-ratio: 3 / 4; }
.ttg-aspect-4-5 { aspect-ratio: 4 / 5; }

/* Section vertical rhythm helper */
.ttg-section-pad { padding-top: 120px; padding-bottom: 120px; }
@media (max-width: 880px) { .ttg-section-pad { padding-top: 72px; padding-bottom: 72px; } }