/*
 * mobile-fixes.css
 * Mobile UX overrides — loaded after style.css.
 * All rules scoped to max-width breakpoints. Do NOT edit style.css.
 */

/* ── 1. NAV HEIGHT (≤480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --nav-height: 3.5rem;
  }
  .nav {
    padding-block: 0;
  }
}

/* ── 2. HERO — PORTRAIT PEQUEÑO (≤900px) ────────────────────── */
/*
 * Foto empieza a la altura entre "Nicolás" y "Jorge" (73px desde
 * el top de hero__layout, medido en viewport 390px).
 * Reducida al 55% de ancho para no tapar el texto.
 */
@media (max-width: 900px) {
  .hero__image-col {
    inset: auto !important;
    top: 73px !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 55% !important;
  }

  .hero__portrait {
    object-fit: contain !important;
    object-position: top center !important;
    opacity: 0.55 !important;
    height: 100% !important;
    width: 100% !important;
  }
}

/* ── 3. ABOUT — STACK DIAGONAL PEQUEÑO (≤480px) ─────────────── */
/*
 * Se mantiene el efecto solapado en diagonal.
 * Solo se reduce el tamaño del stack para que no domine la sección.
 */
@media (max-width: 480px) {
  .about__image-stack {
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 4. SERVICES — CHAT WIDGET CLEARANCE (≤600px) ───────────── */
@media (max-width: 600px) {
  .services__scroll-wrapper {
    padding-right: 80px;
  }
}

/* ── 5. TESTIMONIALS — CENTRADO + CHAT CLEARANCE (≤600px) ───── */
@media (max-width: 600px) {
  .testimonial-card {
    align-items: center;
    text-align: center;
    padding-right: var(--space-xl);
    padding-left: var(--space-xl);
  }

  .testimonial-card__text {
    text-align: center;
  }

  .testimonial-card__footer {
    align-items: center;
    text-align: center;
  }

  .testimonials__track {
    padding-right: 0;
  }
}

/* ── 5b. ABOUT — cobertura geográfica Canarias ─────────────── */
.about__coverage {
  margin-top: var(--space-md, 1rem);
  font-size: .9rem;
  opacity: .75;
  font-style: italic;
}

/* ── 6a. ARTICLES — LINKS EN TICKER (publicaciones externas) ── */
a.articles__item {
  text-decoration: none;
}
a.articles__item:visited {
  color: var(--color-text);
}

/* ── 6. ARTICLES — TITLE OVERFLOW (≤480px) ──────────────────── */
@media (max-width: 480px) {
  .articles-list-item {
    min-width: 0;
  }

  .articles-list-item__title {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
  }

  .article-modal__content h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ── 7. LOCATIONS — LOGO CONTAIN (≤480px) ───────────────────── */
@media (max-width: 480px) {
  .location-card--cau,
  .location-card--hsr {
    aspect-ratio: 16 / 7;
    background: var(--color-surface-1);
    mask-image: none !important;
    -webkit-mask-image: none !important;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .location-card--cau .location-card__logo,
  .location-card--hsr .location-card__logo {
    position: static;
    width: auto;
    height: auto;
    max-height: 100px;
    max-width: 100%;
    object-fit: contain;
    filter: none;
  }
}

/* ── 8. INTRO OVERLAP — delay hero text until overlay clears ─── */
/*
 * Oculta eyebrow/tagline/cta del hero hasta que la animación de intro
 * haya terminado de desvanecerse (p >= 0.50 en main.js).
 */
html.intro-active .hero__tagline,
html.intro-active .hero__cta,
html.intro-active .hero__eyebrow {
  opacity: 0 !important;
  transition: opacity 0.4s ease 0.3s !important;
}

/* ── 9. SECTION SPACING (all viewports) ─────────────────────── */
.about,
.services,
.testimonials,
.articles,
.publications,
.locations,
.contact {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

/* ── 10. MODAL CONTRAST — light panel, always dark text ──────── */
/*
 * Both article modals use --color-surface-1 (light cream) as background.
 * Redefinimos las CSS vars en el scope del panel (herencia automática)
 * y usamos selectores padre para mayor especificidad — sin !important.
 */

/* ── Articles list modal ── */
.articles-list-modal__panel {
  /* Redefinir vars al scope del panel: todos los hijos heredan sin !important */
  --color-text: #111;
  --color-text-muted: #6a6560;
  --color-text-dim: #9a9590;
  --color-gold: #7a5a10;
  --color-teal: #1f6b5f;
  --color-border: #d4ccc4;
  --color-surface-2: #ede9e1;
  color: #111;
}
.articles-list-modal__panel .articles-list-modal__title { color: #111; }
.articles-list-modal__panel .articles-list-modal__label { color: #9a9590; }
.articles-list-modal__panel .articles-list-modal__close { color: #6a6560; border-color: #d4ccc4; }
.articles-list-modal__panel .articles-list-item__num    { color: #7a5a10; }
.articles-list-modal__panel .articles-list-item__title  { color: #111; white-space: normal; }
.articles-list-modal__panel .articles-list-item__date   { color: #6a6560; }
.articles-list-modal__panel .articles-list-item__arrow  { color: #9a9590; }
.articles-list-modal__panel .articles-list-item         { border-bottom-color: #d4ccc4; }
.articles-list-modal__panel .articles-list-item:hover   { background: #ede9e1; }
.articles-list-modal__panel .articles-list-item:hover .articles-list-item__title { color: #111; }
.articles-list-modal__panel .articles-list-item:hover .articles-list-item__arrow { color: #1f6b5f; }

/* ── Article reader modal ── */
.article-modal__panel {
  --color-text: #111;
  --color-text-muted: #3a3632;
  --color-text-dim: #6a6560;
  --color-gold: #7a5a10;
  --color-teal: #1f6b5f;
  --color-border: #d4ccc4;
  --color-surface-2: #ede9e1;
  padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
  color: #111;
}
.article-modal__panel .article-modal__close          { color: #6a6560; border-color: #d4ccc4; }
.article-modal__panel .article-modal__content h3     { color: #111; }
.article-modal__panel .article-modal__content h4     { color: #2a2a2a; }
.article-modal__panel .article-modal__content p,
.article-modal__panel .article-modal__content li     { color: #3a3632; }
.article-modal__panel .article-modal__content em,
.article-modal__panel .article-modal__content strong { color: inherit; }
.article-modal__panel .article-modal__content time   { color: #1f6b5f; border-bottom-color: #d4ccc4; }
.article-modal__panel .article-toc                   { background: #ede9e1; border-color: #d4ccc4; border-left-color: #1f6b5f; }
.article-modal__panel .article-toc__title            { color: #111; }
.article-toc__toggle {
  color: #6a6560 !important;
}
.article-toc__list,
.article-toc__link {
  color: #6a6560 !important;
}
.article-toc__link:hover,
.article-toc__link.is-active,
.article-toc__item.is-active > .article-toc__link {
  color: #1f6b5f !important;
}
.article-author {
  background: #ede9e1 !important;
  border-left-color: #1f6b5f !important;
}
.article-author__avatar {
  color: #1f6b5f !important;
  background: rgba(31, 107, 95, 0.15) !important;
}
.article-author__name {
  color: #111 !important;
}
.article-author__role {
  color: #6a6560 !important;
}