/* Safari country page (/safari/{land}): what the shell adds on top of the
   category page's own section styles (category-hero.css, category-parks.css,
   category-countries.css, category-stories.css, category-faq.css) and the
   light tour grid (cp-tours-section.css). The section header is the house
   one: orange eyebrow, 800 headline, grey lede. */

/* The tours grid: white ground, the house header over it, 88px like the
   category page's bands. cp-tours-section.css gives the grid and the cards. */
.cps-tours {
    background: #fff;
    padding: 88px 0;
    scroll-margin-top: 90px;
}
.cps-tours .cp-tours__inner {
    max-width: 1240px;
    padding: 0 24px;
    gap: 36px;
}
.cps-tours .cp-tours__grid {
    gap: 20px;
}

/* House section header, one step up from the category page's scale: this
   is the first thing read after the hero, and at 10px / 15px on white the
   eyebrow and the lede were too small and too pale to be read. */
.cps-header {
    max-width: 72ch;
}
.cps-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #FF6A00;
    margin-bottom: 14px;
}
.cps-h2 {
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #111214;
    margin: 0 0 16px;
}
.cps-lede {
    font-size: 17px;
    line-height: 1.65;
    color: #33353a;
    margin: 0;
}

/* The country intro: the copy a little wider than the mosaic (the category
   page's 1.78fr / 1fr column suits its long essay; a country's intro is two
   short paragraphs beside four photographs). */
@media (min-width: 901px) {
    .cat-phil--country .cat-phil__inner {
        grid-template-columns: 1.2fr 1fr;
        gap: 32px;
    }
    .cat-phil--country .cat-phil__mosaic {
        min-height: 360px;
        max-height: 600px;
    }
}

/* The three quick stats, a light strip inside the intro's copy card:
   the figure as the headline, the label under it, a hairline above. */
.cps-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin: 0 0 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(17, 18, 20, .12);
}
.cps-stats__item {
    min-width: 0;
}
.cps-stats__value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: #111214;
    margin: 0 0 8px;
}
.cps-stats__value::after {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    margin-top: 10px;
    background: #FF6A00;
    border-radius: 2px;
}
.cps-stats__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(17, 18, 20, .55);
    margin: 0;
}

@media (max-width: 600px) {
    .cps-tours {
        padding: 56px 0;
    }
    .cps-tours .cp-tours__inner {
        padding: 0 20px;
    }
    .cps-lede {
        font-size: 16px;
    }
    .cps-stats {
        gap: 16px 28px;
    }
    .cps-stats__value {
        font-size: 26px;
    }
}

/* Safari-Regionen: the country page's riding-zones block in this page's
   language. The dark photo band with the white headline becomes the house
   section header on the milk topo ground, the meta row reads landscape and
   time to go instead of road surface (countrypage.riding_*_22), and every
   zone that describes a published park carries its link. The alternating
   photo/text cards and the phone carousel are the shared block's own. */
.cp-riding--safari {
    background: #F5EDDE url('/images/backgrounds/6a0acbec-9e6a-463e-a7e9-0ae96154faa9.webp') center / cover no-repeat;
    padding: 88px 0 72px;
}
.cp-riding--safari .cp-riding__hero {
    background: none;
    text-align: left;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 40px;
    overflow: visible;
}
.cp-riding--safari .cp-riding__hero::before {
    display: none;
}
.cp-riding--safari .cp-riding__h2 {
    max-width: 72ch;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.08;
    color: #111214;
    margin: 0 0 16px;
}
.cp-riding--safari .cp-riding__lead {
    max-width: 72ch;
    margin: 0;
    color: #33353a;
}
.cp-riding--safari .cp-riding__inner {
    padding-bottom: 0;
}
.cp-riding--safari .cp-riding__cards {
    max-width: 1240px;
    padding: 0 24px;
    box-sizing: border-box;
    margin: 0 auto;
    gap: 20px;
}
.cp-riding--safari .cp-riding__card {
    border: 0;
    border-radius: 6px;
}
.cp-riding--safari .cp-riding__card-content {
    background-image: none;
}
.cp-riding--safari .cp-riding__card-h3 {
    font-size: 28px;
    letter-spacing: -.02em;
    text-transform: none;
    color: #111214;
}
.cp-riding--safari .cp-riding__meta {
    border-top-color: #EDE3D5;
}
.cp-riding--safari .cp-riding__meta-item {
    border-right-color: #EDE3D5;
}
.cp-riding--safari .cp-riding__meta-label,
.cp-riding--safari .cp-riding__label {
    color: #FF6A00;
}
.cp-riding--safari .cp-riding__park-link {
    margin: 22px 0 8px;
}
.cp-riding--safari .cp-riding__tour-link {
    color: #111214;
}
.cp-riding--safari .cp-riding__tour-link:hover {
    color: #B84A00;
    opacity: 1;
}
@media (max-width: 960px) {
    .cp-riding--safari {
        padding: 64px 0 48px;
    }
}
@media (max-width: 600px) {
    /* Slide 1 of the phone carousel on the milk ground: dark text, dark hint */
    .cp-riding--safari {
        padding: 48px 0 40px;
    }
    .cp-riding--safari .cp-riding__hero {
        text-align: center;
        padding: 0 22px 24px;
        min-height: 0;
    }
    .cp-riding--safari .cp-riding__hint {
        color: #111214;
        border-color: rgba(17, 18, 20, 0.35);
    }
    .cp-riding--safari .cp-riding__hint:active {
        background: rgba(17, 18, 20, 0.08);
    }
    .cp-riding--safari .cp-riding__card {
        border-radius: 0;
    }
}