/* =====================================================================
   Season Teaser — a divider, not a band.

   This is the seam between the riding zones above and the reviews band
   below, and it now reads as one: a rule with its label sitting on it,
   the season line centred underneath, and the way into the dossier last.

   White ground on purpose. The riding-zones block above is white too, so
   the two run together and the rule is what closes the light half of the
   page before the dark reviews band — which is the whole point of a
   separator. It used to be a milk band, i.e. a third colour between two
   sections that were already distinct.

   The text stays. It is authored per country and carries the one thing
   the Reiseinfo link cannot: why this country has no single best season.
   Only its weight changes — quiet, centred, at a reading measure.
   ===================================================================== */

.cp-st {
    background: #fff;
}

.cp-st__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 54px 60px 58px;
    text-align: center;
}

/* ── The rule, with the label on it ─────────────────────────────────── */

.cp-st__rule {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
}

/* Faded at the outer ends so it reads as a drawn divider rather than a
   border that happens to run out of page. */
.cp-st__rule::before,
.cp-st__rule::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: linear-gradient(to right, rgba(17, 18, 20, 0) 0%, rgba(17, 18, 20, 0.20) 100%);
}

.cp-st__rule::after {
    background: linear-gradient(to left, rgba(17, 18, 20, 0) 0%, rgba(17, 18, 20, 0.20) 100%);
}

.cp-st__eyebrow {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF6A00;
    white-space: nowrap;
}

/* ── The line itself ────────────────────────────────────────────────── */

.cp-st__text {
    max-width: 82ch;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(17, 18, 20, 0.68);
}

/* ── Into the dossier ───────────────────────────────────────────────── */

/* #B85000, not the brand #FF6A00: this is text to read, and the brand
   orange only reaches 2.9:1 on white. */
.cp-st__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111214;
    text-decoration: none;
    border-bottom: 2px solid #FF6A00;
    transition: color 0.18s ease, gap 0.18s ease;
}

.cp-st__link:hover,
.cp-st__link:focus-visible {
    color: #B85000;
    gap: 11px;
    outline: none;
}

.cp-st__link:focus-visible {
    outline: 2px solid #FF6A00;
    outline-offset: 4px;
}

.cp-st__link svg {
    flex: 0 0 auto;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .cp-st__inner { padding: 46px 36px 50px; }
    .cp-st__rule { gap: 16px; }
}

@media (max-width: 620px) {
    .cp-st__inner { padding: 38px 20px 42px; }
    .cp-st__rule { gap: 12px; margin-bottom: 16px; }
    .cp-st__eyebrow { letter-spacing: 1.5px; }
    .cp-st__text { font-size: 15px; }
    .cp-st__link { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-st__link { transition: none; }
    .cp-st__link:hover,
    .cp-st__link:focus-visible { gap: 7px; }
}