/* Reiseinformation SEO cluster — pillar hub + country spokes.
   Palette: #111214 (ink), #EDE3D5 (milk), #FF6A00 (CTA only), white, subtle grays.
   Clean, almost monochrome, offroad-premium. No gradients, minimal shadows. */

:root {
    --ri-ink: #111214;
    --ri-milk: #EDE3D5;
    --ri-cta: #FF6A00;
    --ri-line: #e3ddd2;
    --ri-muted: #6c6a66;
    --ri-white: #ffffff;
}

.ri { color: var(--ri-ink); background: var(--ri-white); }
.ri * { box-sizing: border-box; }
.ri-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.ri-section { padding: 64px 0; border-bottom: 1px solid var(--ri-line); }
.ri-section--milk {
    background-image: linear-gradient(rgba(237,227,213,.82), rgba(237,227,213,.82)),
        url('https://www.overcross.com/images/backgrounds/6a0acbec-9e6a-463e-a7e9-0ae96154faa9.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.ri-section--ink { background: #111214; color: var(--ri-milk); border-bottom: none; }
.ri-eyebrow { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ri-cta); margin-bottom: 14px; }
.ri-h2 { position: relative; font-size: 32px; line-height: 1.12; font-weight: 800; margin: 0 0 10px;
    letter-spacing: -0.02em; padding-top: 20px; }
.ri-h2::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 4px;
    background: var(--ri-cta); border-radius: 2px; }
.ri-h2--light { color: var(--ri-milk); }
.ri-lead { font-size: 17px; line-height: 1.65; color: var(--ri-muted); margin: 0 0 30px; max-width: 760px; }
.ri-section--ink .ri-lead { color: rgba(237,227,213,.72); }
.ri-prose { font-size: 16px; line-height: 1.72; }
.ri-prose p { margin: 0 0 16px; }
.ri-prose a { color: var(--ri-ink); text-decoration: underline; text-underline-offset: 3px; }
.ri-prose a:hover { color: var(--ri-cta); }
.ri-prose ul { margin: 0 0 16px; padding-left: 20px; }
.ri-prose li { margin: 0 0 6px; }

/* Hero — full-bleed, countrypage look (taller, content anchored to bottom) */
.ri-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end;
    background: var(--ri-ink) center/cover no-repeat; color: var(--ri-milk); }
.ri-hero::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(17,18,20,.12) 0%, rgba(17,18,20,.5) 52%, rgba(17,18,20,.92) 100%); }
.ri-hero__inner { position: relative; z-index: 2; width: 100%; padding: 0 20px 76px; }
.ri-hero__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .2em;
    font-size: 11px; font-weight: 800; color: var(--ri-cta); margin-bottom: 14px; }
.ri-hero__h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.03; font-weight: 800;
    letter-spacing: -1.2px; text-transform: uppercase; color: var(--ri-milk); margin: 0 0 16px; max-width: 900px; }
.ri-hero__lead { font-size: 18px; line-height: 1.62; max-width: 620px; color: rgba(237,227,213,.78); margin: 0 0 30px; }

/* Hero CTAs */
.ri-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.ri-hero__btn { display: inline-flex; align-items: center; justify-content: center; height: 54px;
    padding: 0 34px; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; border-radius: 2px; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.ri-hero__btn--primary { background: var(--ri-cta); color: var(--ri-ink); border: 2px solid var(--ri-cta); }
.ri-hero__btn--primary:hover { background: #e55e00; border-color: #e55e00; color: var(--ri-ink); }
.ri-hero__btn--ghost { background: transparent; color: var(--ri-milk); border: 2px solid rgba(237,227,213,.45); }
.ri-hero__btn--ghost:hover { border-color: var(--ri-milk); color: var(--ri-milk); }

/* Breadcrumbs */
.ri-crumbs { font-size: 13px; color: var(--ri-muted); padding: 16px 0; }
.ri-crumbs a { color: var(--ri-muted); text-decoration: none; }
.ri-crumbs a:hover { color: var(--ri-cta); }
.ri-crumbs span { margin: 0 8px; opacity: .5; }

/* CTA button */
.ri-btn { display: inline-block; background: var(--ri-cta); color: #fff; font-weight: 700;
    padding: 13px 22px; border-radius: 8px; text-decoration: none; letter-spacing: .02em;
    border: none; cursor: pointer; transition: filter .15s ease; }
.ri-btn:hover { filter: brightness(.94); color: #fff; }
.ri-btn--ghost { background: transparent; color: var(--ri-ink); border: 1px solid var(--ri-ink); }
.ri-btn--ghost:hover { background: var(--ri-ink); color: #fff; }

/* Generic card grid */
.ri-grid { display: grid; gap: 18px; }
.ri-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ri-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ri-card { border: 1px solid var(--ri-line); border-radius: 14px; padding: 24px; background: var(--ri-white);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ri-card:hover { transform: translateY(-3px); border-color: #d8d0c2; box-shadow: 0 12px 28px rgba(17,18,20,.07); }
.ri-card__icon { font-size: 22px; color: var(--ri-cta); margin-bottom: 10px; }
.ri-card__h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.ri-card__text { font-size: 15px; line-height: 1.6; color: var(--ri-muted); margin: 0; }
.ri-card a.ri-card__h3 { text-decoration: none; color: var(--ri-ink); }
.ri-card a.ri-card__h3:hover { color: var(--ri-cta); }

/* Quick facts bar */
.ri-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ri-line);
    border: 1px solid var(--ri-line); border-radius: 14px; overflow: hidden; }
.ri-facts__item { background: var(--ri-white); padding: 20px 22px; transition: background .15s ease; }
.ri-facts__item:hover { background: #fffdf9; }
.ri-facts__label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: var(--ri-cta); }
.ri-facts__value { font-size: 17px; font-weight: 700; margin-top: 6px; line-height: 1.3; }

/* Table of contents — pill navigation */
.ri-toc { background: var(--ri-milk); border-radius: 14px; padding: 22px 24px; }
.ri-toc__title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--ri-cta); margin: 0 0 14px; }
.ri-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ri-toc a { display: inline-flex; align-items: center; padding: 8px 15px; background: #fff;
    border: 1px solid var(--ri-line); border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--ri-ink); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.ri-toc a:hover { border-color: var(--ri-cta); color: var(--ri-cta); }

/* Tables */
.ri-table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--ri-line);
    border-radius: 12px; overflow: hidden; background: #fff; }
.ri-table thead { background: var(--ri-milk); }
.ri-table th { text-align: left; padding: 13px 16px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .08em; font-weight: 800; color: var(--ri-ink); }
.ri-table td { text-align: left; padding: 13px 16px; border-top: 1px solid var(--ri-line); }
.ri-table tbody tr:hover { background: #faf8f4; }

/* Best-time calendar */
.ri-cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 18px; }
.ri-cal__m { text-align: center; padding: 10px 4px; border-radius: 8px; font-size: 12px; font-weight: 700; border: 1px solid var(--ri-line); }
.ri-cal__m--good { background: #1f6b3a; color: #fff; border-color: #1f6b3a; }
.ri-cal__m--ok { background: var(--ri-milk); color: var(--ri-ink); }
.ri-cal__m--bad { background: #f1f1f1; color: #b0aca5; }
.ri-cal__legend { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--ri-muted); }
.ri-cal__dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* Checklist / packlist */
.ri-checklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.ri-checklist li { break-inside: avoid; padding: 11px 0 11px 32px; position: relative; font-size: 15px;
    line-height: 1.5; border-bottom: 1px solid var(--ri-line); }
.ri-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 10px; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
    color: var(--ri-cta); background: rgba(255,106,0,.1); border-radius: 6px; }

/* FAQ accordion */
.ri-faq { border-top: 1px solid var(--ri-line); }
.ri-faq__item { border-bottom: 1px solid var(--ri-line); }
.ri-faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-size: 17px; font-weight: 700; padding: 20px 44px 20px 0; position: relative; color: var(--ri-ink);
    transition: color .15s ease; }
.ri-faq__q:hover { color: var(--ri-cta); }
.ri-faq__q::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 22px; color: var(--ri-cta); }
.ri-faq__item.is-open .ri-faq__q::after { content: "\2212"; }
.ri-faq__a { display: none; padding: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--ri-muted); }
.ri-faq__item.is-open .ri-faq__a { display: block; }

/* Country chips (related block) */
.ri-countries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ri-countries a { display: block; padding: 14px 16px; border: 1px solid var(--ri-line); border-radius: 10px;
    text-decoration: none; color: var(--ri-ink); font-weight: 600; font-size: 15px; transition: border-color .15s ease; }
.ri-countries a:hover { border-color: var(--ri-cta); color: var(--ri-cta); }

/* Textured background for the SEO text block (milk scrim keeps prose readable) */
.ri-bg-texture {
    background-image: linear-gradient(rgba(237,227,213,.88), rgba(237,227,213,.88)),
        url('https://www.overcross.com/images/backgrounds/6a0acbec-9e6a-463e-a7e9-0ae96154faa9.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Country search */
.ri-search { position: relative; max-width: 440px; margin: 6px 0 10px; }
.ri-search__input { width: 100%; padding: 13px 16px 13px 44px; border: 1px solid var(--ri-line);
    border-radius: 10px; font-size: 15px; background: #fff; color: var(--ri-ink); appearance: none; }
.ri-search__input::placeholder { color: var(--ri-muted); }
.ri-search__input:focus { outline: none; border-color: var(--ri-cta); box-shadow: 0 0 0 3px rgba(255,106,0,.12); }
.ri-search__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--ri-muted); font-size: 16px; pointer-events: none; }
.ri-search__empty { color: var(--ri-ink); font-size: 15px; font-weight: 600; margin: 8px 0 18px; }

/* Continent groups + photo cards (pillar country grid) */
.ri-continent { margin-top: 36px; }
.ri-continent:first-of-type { margin-top: 28px; }
.ri-continent__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
    padding-bottom: 10px; border-bottom: 2px solid var(--ri-ink); }
.ri-continent__title { font-size: 21px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.ri-continent__count { font-size: 12px; font-weight: 700; color: var(--ri-muted);
    background: var(--ri-milk); border-radius: 999px; padding: 3px 11px; }

.ri-cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ri-ccard { position: relative; display: block; border-radius: 6px; overflow: hidden;
    aspect-ratio: 4 / 3; text-decoration: none; background: #222326; isolation: isolate;
    transition: transform .25s ease; }
.ri-ccard:hover { transform: translateY(-4px); }
.ri-ccard__img { position: absolute; inset: 0; background: #222326 center/cover no-repeat;
    transition: transform .4s ease; z-index: 0; }
.ri-ccard:hover .ri-ccard__img { transform: scale(1.06); }
.ri-ccard__overlay { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(17,18,20,.28) 0%, rgba(17,18,20,.62) 100%); }
.ri-ccard__name { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center;
    justify-content: center; text-align: center; padding: 16px;
    color: var(--ri-milk); font-weight: 800; font-size: 17px; line-height: 1.2;
    text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* Destination gallery (photos from tours + tour galleries) */
.ri-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 158px; gap: 12px; margin-top: 24px; }
.ri-gallery__item { width: 100%; height: 100%; object-fit: cover; display: block;
    background: #222326; border-radius: 10px; transition: transform .35s ease; }
.ri-gallery__item:hover { transform: scale(1.02); }
.ri-gallery__item--feature { grid-column: span 2; grid-row: span 2; }

/* Tours */
.ri-tours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ri-tour { border: 1px solid var(--ri-line); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; color: var(--ri-ink); display: block; }
.ri-tour__img { aspect-ratio: 4/3; background: var(--ri-milk) center/cover no-repeat; }
.ri-tour__body { padding: 14px 16px; }
.ri-tour__title { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; }
.ri-tour__meta { font-size: 13px; color: var(--ri-muted); display: flex; justify-content: space-between; }
.ri-tour__price { color: var(--ri-ink); font-weight: 700; }

/* SEO footer country list */
.ri-seofooter ul { list-style: none; margin: 0; padding: 0; columns: 4; }
.ri-seofooter a { font-size: 14px; color: var(--ri-muted); text-decoration: none; line-height: 2; }
.ri-seofooter a:hover { color: var(--ri-cta); }

/* AI-edit preview badge */
.ri-aiedit { position: fixed; left: 18px; bottom: 18px; z-index: 9999; background: var(--ri-cta);
    color: #fff; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 6px; letter-spacing: .04em; }

@media (max-width: 980px) {
    .ri-grid--3, .ri-grid--4, .ri-countries, .ri-tours { grid-template-columns: repeat(2, 1fr); }
    .ri-cgrid, .ri-gallery { grid-template-columns: repeat(3, 1fr); }
    .ri-facts { grid-template-columns: repeat(2, 1fr); }
    .ri-seofooter ul { columns: 2; }
}
@media (max-width: 600px) {
    .ri-grid--3, .ri-grid--4, .ri-countries, .ri-tours, .ri-facts { grid-template-columns: 1fr; }
    .ri-cgrid, .ri-gallery { grid-template-columns: repeat(2, 1fr); }
    .ri-gallery { grid-auto-rows: 130px; }
    .ri-gallery__item--feature { grid-column: span 2; grid-row: span 1; }
    .ri-checklist, .ri-seofooter ul { columns: 1; }
    .ri-cal { grid-template-columns: repeat(6, 1fr); }
}