/*
 * The three shared partials: the title line, the eyebrow label and the CTA
 * pair.
 *
 * None is a block. An eyebrow is an attribute of the module above it, and the
 * CTA pair is placed by its parent block's own render so an editor can change
 * the labels and destinations but cannot remove the call to action.
 */

/*
 * One rendered line of a title.
 *
 * Every title on the site is an array of lines, one span per line, so the break
 * is a content decision and each line can be staggered in by the reveal. A span
 * is inline by default, so without this the lines run together —
 * "InscripciónSin Matrícula" — and the whole heading enters as a single line
 * instead of a stagger.
 *
 * It lives here rather than in three block stylesheets because btd_title() in
 * inc/render.php is shared by hero, feature and page-header. In the Next app
 * the rule was written out once per CSS module, which is how it came to be
 * missing here: there was no single file it obviously belonged to.
 */
.btd-title__line {
  display: block;
}

.btd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1.2vw;
  /* Flat, off the fluid --text-label. That token still drives the rate-table
     column heads and the footer headings, which were measured on their own
     frames — see "Sizes: found, reported, not changed" in known-issues.md. */
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.btd-eyebrow::before {
  content: "";
  width: 2px;
  height: 1em;
  background: var(--eyebrow-tick, var(--lime));
}

/* --- CTA pair ----------------------------------------------------------- */

.btd-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.65vw, 3.3rem);
}

/* Tone only swaps the pill fill — adding a third tone is one more rule here. */
.btd-cta-group[data-tone="light"] {
  --cta-fill: var(--lime);
  --cta-fill-hover: #b6e28e;
  --cta-label: var(--ink);
}

.btd-cta-group[data-tone="dark"] {
  --cta-fill: var(--white);
  --cta-fill-hover: #e2e2e2;
  --cta-label: var(--black);
}

.btd-cta-group[data-align="center"] {
  justify-content: center;
}

.btd-cta-group[data-align="start"] {
  justify-content: flex-start;
}

.btd-cta--primary,
.btd-cta--secondary {
  display: inline-flex;
  align-items: center;
  /* The CTA's own size. It is within a rounding error of the feature body's
     1.105vw, but they are set on different surfaces and were measured
     separately; the port keeps both as they were. */
  font-size: var(--text-body);
  line-height: 1;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.btd-cta--primary {
  padding: 0.78rem 0.95rem;
  border-radius: 999px;
  background: var(--cta-fill);
  color: var(--cta-label);
}

.btd-cta--primary:hover {
  background: var(--cta-fill-hover);
}

.btd-cta--secondary:hover {
  opacity: 0.7;
}

/* No gap here: it would still sit between the collapsed spacer and the arrow,
   leaving a blank strip in the initial state. The space between text and arrow
   is the label's margin instead, which the spacer's animated width absorbs. */
.btd-cta__inner {
  position: relative;
  display: flex;
  align-items: center;
}

/* Empty box whose width the reveal animates; that is what grows the button. */
.btd-cta__spacer {
  display: none;
  flex: 0 0 auto;
}

.btd-cta__label {
  display: flex;
  margin-right: 0.55rem;
  white-space: nowrap;
}

.btd-cta__char {
  display: inline-block;
  white-space: pre;
}

.btd-cta__arrow {
  display: inline-flex;
  /* never let the arrow squash while the button is still narrow */
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btd-cta__arrow svg {
  width: 1rem;
  height: 1rem;
}

.btd-cta--primary:hover .btd-cta__arrow,
.btd-cta--secondary:hover .btd-cta__arrow {
  transform: translateX(3px);
}

/* Animated mode — only once the reveal has measured the label and taken over.
   Before that the button lays out normally, so no-JS still works. */
[data-cta-ready] .btd-cta__spacer {
  display: block;
}

[data-cta-ready] .btd-cta__label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}