/* =====================================================================
   Reiseinfo Bridge Band — the way into the country dossier.

   Same family as the page's bottom CTA (full-bleed photograph, scrim,
   heavy type, one button) and deliberately not its twin. Three photo
   bands close this page — this one, the similar-countries grid and the
   CTA — so each has to hold a different shape:

     · similar countries — flat 72% film, a grid of cards
     · this band         — directional scrim, text left, photo readable
                           on the right
     · bottom CTA        — flat 32% film, everything centred

   The scrim runs left-to-right rather than sitting flat over the whole
   frame, so the country's own photograph stays a photograph on the side
   the text leaves free. That is the whole reason this reads as premium
   and the flat-film version did not.
   ===================================================================== */

.cp-ril {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 400px;
    background: #111214;
}

.cp-ril__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Directional scrim. Dense where the words are, thin where the picture
   is worth seeing — never a flat film over the whole frame. */
.cp-ril__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(17, 18, 20, 0.95) 0%,
        rgba(17, 18, 20, 0.90) 32%,
        rgba(17, 18, 20, 0.62) 58%,
        rgba(17, 18, 20, 0.34) 100%
    );
}

.cp-ril__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 84px 60px;
}

.cp-ril__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 620px;
}

.cp-ril__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF6A00;
}

.cp-ril__h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: #EDE3D5;
    margin: 0;
    text-wrap: balance;
}

.cp-ril__teaser {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(237, 227, 213, 0.80);
    margin: 2px 0 0;
    max-width: 56ch;
}

.cp-ril__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    height: 52px;
    padding: 0 32px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #111214;
    background: #FF6A00;
    border: 1px solid #FF6A00;
    border-radius: 2px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cp-ril__btn svg {
    transition: transform 0.25s ease;
}

.cp-ril__btn:hover,
.cp-ril__btn:focus-visible {
    background: #ff7d1f;
    border-color: #ff7d1f;
    outline: none;
}

.cp-ril__btn:hover svg,
.cp-ril__btn:focus-visible svg {
    transform: translateX(4px);
}

.cp-ril__btn:focus-visible {
    outline: 2px solid #EDE3D5;
    outline-offset: 3px;
}

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

@media (max-width: 1024px) {
    .cp-ril { min-height: 340px; }
    .cp-ril__inner { padding: 64px 36px; }
}

@media (max-width: 760px) {
    .cp-ril { min-height: 0; }
    .cp-ril__inner { padding: 52px 20px 56px; }
    .cp-ril__body { max-width: none; gap: 12px; }
    .cp-ril__teaser { font-size: 15px; }
    .cp-ril__btn { width: 100%; justify-content: center; padding: 0 20px; }

    /* The column is the full width here, so there is no free side of the
       photograph left to protect — the scrim goes flat and vertical. */
    .cp-ril__bg::after {
        background: linear-gradient(
            180deg,
            rgba(17, 18, 20, 0.86) 0%,
            rgba(17, 18, 20, 0.92) 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-ril__btn,
    .cp-ril__btn svg {
        transition: none;
    }

    .cp-ril__btn:hover svg,
    .cp-ril__btn:focus-visible svg {
        transform: none;
    }
}