/* ==========================================================================
   travel.css — Getting There: card heads with an icon, numbered "steps" list
   for the train route, and a soft callout for the ZTL warning.
   ========================================================================== */

/* Card title with a leading icon (train / car). */
.wf-travel__head {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.wf-travel__icon {
  display: inline-flex;
  color: var(--c-terracotta);
}
.wf-travel__icon svg { width: 1.4em; height: 1.4em; }

/* Numbered route steps with circular terracotta markers. */
.wf-steps {
  list-style: none;
  counter-reset: wf-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.wf-steps > li {
  counter-increment: wf-step;
  position: relative;
  padding-inline-start: 2.6rem;
  min-block-size: 1.8rem;
  line-height: 1.5;
}
.wf-steps > li::before {
  content: counter(wf-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-terracotta);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}

/* Iberia Joven discount callout — reuses .wf-card but tighter: no accent
   border, less padding and a smaller body than a regular card. */
.wf-travel__iberia {
  margin-block-start: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--step--1);
}

/* ZTL warning callout. */
.wf-note {
  border-inline-start: 3px solid var(--c-terracotta);
  background: var(--c-parchment-deep);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--step--1);
  color: var(--c-sepia);
}

/* ── #travel compact mobile layout ────────────────────────────────────────
   Phones only: the 3 airport cards go 2-up, and the train/car step cards
   get tighter padding/type/markers — same spirit as the #explore/#food
   compaction, nothing removed, just smaller and closer together so it
   still reads as the same friendly card-with-icon design. >=48rem is
   untouched. */
@media (max-width: 47.99rem) {
  .wf-travel__airports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }
  /* 3 cards don't divide evenly into 2 columns; rather than leave the 3rd
     (Ancona) stranded alone on a half-empty row, it spans the full row so
     the layout reads as deliberate — a pair up top, one full-width below. */
  .wf-travel__airports .wf-card:last-child {
    grid-column: 1 / -1;
  }
  .wf-travel__airports .wf-card {
    padding: var(--space-sm);
  }
  .wf-travel__airports .wf-card__title {
    font-size: var(--step-0);
    margin-block-end: var(--space-2xs);
  }
  .wf-travel__airports .wf-card__body {
    font-size: var(--step--1);
  }
  .wf-travel__iberia {
    padding: var(--space-xs) var(--space-sm);
  }

  .wf-travel__steps .wf-card {
    padding: var(--space-sm);
  }
  .wf-travel__steps .wf-card__body.u-stack--sm > * + * {
    margin-block-start: var(--space-xs);
  }
  .wf-travel__steps .wf-card__body {
    font-size: var(--step--1);
  }
  .wf-travel__head {
    gap: 0.4em;
  }
  .wf-travel__icon svg {
    width: 1.2em;
    height: 1.2em;
  }
  .wf-card__title.wf-travel__head {
    font-size: var(--step-0);
  }
  .wf-steps {
    gap: var(--space-xs);
  }
  .wf-steps > li {
    padding-inline-start: 2.1rem;
    min-block-size: 1.5rem;
  }
  .wf-steps > li::before {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: 0.8rem;
  }
  .wf-note {
    padding: var(--space-xs) var(--space-sm);
  }
}