/* ==========================================================================
   BLOCK HP-2 — Large Text, Style 1 (with Scrollers)
   Files: block-hp-2-large-text.php | block-hp-2-large-text.css
   ========================================================================== */

/* ── Shell ──────────────────────────────────────────────────────────────── */
.taula-hp2 {
  background: #ffffff;
  color: #0d0d0d;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden; /* clip scrollers at block edges */
}

/* ── Scroller — shared ──────────────────────────────────────────────────── */
.taula-hp2__scroller {
  width: 100%;
  overflow: hidden;
  line-height: 0; /* collapse whitespace below inline imgs */
}

/*
 * Track: three copies of the PNG in a flex row.
 * Animating by -33.333% moves exactly one image width,
 * creating a seamless loop regardless of the image's pixel width.
 */
.taula-hp2__track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
}

.taula-hp2__track img {
  display: block;
  height: 32px;      /* halved from 64px */
  width: auto;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */

/* Right-to-Left (standard ticker) */
@keyframes taula-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* Left-to-Right (reverse) */
@keyframes taula-scroll-ltr {
  from { transform: translateX(-33.333%); }
  to   { transform: translateX(0); }
}

/* ── Apply animations ───────────────────────────────────────────────────── */
.taula-hp2__scroller--rtl .taula-hp2__track {
  animation: taula-scroll-rtl 30s linear infinite;
}

.taula-hp2__scroller--ltr .taula-hp2__track {
  animation: taula-scroll-ltr 30s linear infinite;
}

/* Pause on hover / reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .taula-hp2__track {
    animation: none;
  }
}

/* ── Statement body ─────────────────────────────────────────────────────── */
.taula-hp2__body {
  padding: 155px 200px; /* vertical: 80→155px (+75px each side = +150px total height); horizontal: 100→200px (doubled) */
  text-align: center;
}

.taula-hp2__statement {
  font-family: var(--font-heading); /* Staatliches */
  font-size: 80px;
  font-weight: 400;
  line-height: 0.95;
  color: #0d0d0d;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ── CSS-driven language switching ─────────────────────────────────────── */
.taula-hp2__lang {
  display: none;
}

html[data-taula-lang="CA"] .taula-hp2__lang[data-lang="CA"],
html[data-taula-lang="ES"] .taula-hp2__lang[data-lang="ES"],
html[data-taula-lang="EN"] .taula-hp2__lang[data-lang="EN"] {
  display: inline;
}

/* Fallback: show EN if no lang attribute */
html:not([data-taula-lang]) .taula-hp2__lang[data-lang="EN"],
html[data-taula-lang=""] .taula-hp2__lang[data-lang="EN"] {
  display: inline;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .taula-hp2__statement {
    font-size: 64px;
  }

  .taula-hp2__body {
    padding: 100px 120px; /* scaled down from desktop; horizontal halved from 60→120px */
  }
}

@media (max-width: 768px) {
  .taula-hp2__statement {
    font-size: 48px;
    line-height: 0.95;
  }

  .taula-hp2__body {
    padding: 72px 48px; /* proportionally scaled */
  }

  .taula-hp2__track img {
    height: 24px; /* halved from 48px */
  }
}

@media (max-width: 480px) {
  .taula-hp2__statement {
    font-size: 36px;
  }

  .taula-hp2__body {
    padding: 56px 24px; /* proportionally scaled */
  }

  .taula-hp2__track img {
    height: 20px; /* halved from 40px */
  }
}