/*
 * Destinations surface — Executive Arrival world, revision 9.
 * The directory is an engraved index panel: one silver surface, hairline
 * dividers, light display region names with a gold rule, city names as calm
 * interpunct text, and a midnight request cell. No boxed chips, no photo
 * tier; the gold fixed-price underline under Moscow/Saint Petersburg is the
 * only service-level signal.
 *
 * Revision 11 — count-aware atlas, wrap-free cells, and city service rows.
 * Every cell is an inline-size container and city names never wrap: the name
 * size is measured against its own cell
 * (min(38px, 100cqw / ratio)) so the longest city name ("Saint Petersburg")
 * holds one line at every width. Column tracks use minmax(0, 1fr)
 * so a cell with wide nowrap content can never grow wider than its
 * neighbours. Column bands follow the container, not device guesses:
 * 4 columns from 1280px (where the container reaches full width), 2 columns
 * down to 680px, 1 column below.
 */

.destinations-intro {
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
}

/* The register band opens with a bare section heading: the shared
   margin-bottom-md utility resolves to 0 and the 60px band padding doubles
   with the previous band, so tighten the top and give the heading a real
   gap above the atlas grid. */
.destinations-page > .container {
    padding-top: 34px;
}

.destinations-page .destinations-intro {
    margin-bottom: 32px;
}

.destinations-paths {
    text-align: left;
}

/* Two booking paths */

.destinations-option {
    padding-top: 22px;
    border-top: 1px solid rgba(207, 170, 119, 0.55);
}

.destinations-option h2 {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 32px;
}

.destinations-option p {
    margin-bottom: 24px;
}

/* City pages keep service availability as a quiet list rather than a second
   card grid. Linked Russian service pages and request-only KZ rows share the
   same readable rhythm. */
.destinations-services {
    max-width: 820px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.destinations-service {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #dedee2;
    font-size: 15px;
    line-height: 24px;
}

.destinations-service:first-child {
    padding-top: 0;
}

.destinations-service__name {
    color: #0f0f18;
    font-weight: 500;
}

.destinations-service__description {
    display: block;
    margin-top: 3px;
    color: #454649;
    font-size: 15px;
    line-height: 24px;
}

.destinations-service__name:hover,
.destinations-service__name:focus {
    color: #3c46dc;
}

/* Engraved destination index */

.destinations-register {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: #d4d4d7;
}

.destinations-register--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.destinations-register--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.destination {
    container-type: inline-size;
    padding: 32px 28px 36px;
    background: #eeeeef;
}

/*
 * Region names hold a single line: the type scales with the cell. The
 * divisor leaves headroom for the longest English city name at 38px
 * ("Saint Petersburg" ≈ 7.1 characters-wide units); a longer city name
 * means re-measuring it.
 */
.destination__name {
    margin: 0;
    color: #0f0f18;
    font-size: min(38px, calc(100cqw / 7.6));
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

:lang(ru) .destination:not(.destination--action) .destination__name {
    font-size: min(38px, calc(100cqw / 9));
}

/* The kk atlas carries the longest localized region name (Азия-Тынық мұхиты),
   so keep its display size just below the longest ru name. */
:lang(kk) .destination:not(.destination--action) .destination__name {
    font-size: min(38px, calc(100cqw / 9.3));
}

/* The closing request cell carries a sentence, not a region name: it wraps
   naturally at the fixed display size. */
.destination--action .destination__name {
    font-size: 38px;
    line-height: 44px;
    white-space: normal;
}

.destination__name::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin: 14px 0 0;
    background: #cfaa77;
}

.destination__description {
    margin: 16px 0 0;
    color: #454649;
    font-size: 15px;
    line-height: 24px;
}

.destination__cities {
    margin: 14px 0 0;
    color: #454649;
    font-size: 15px;
    line-height: 26px;
}

/* Status labels stay inside their card. Keep the short visible label together
   where possible, but let longer translations wrap instead of widening the
   grid or being clipped by the next card. */
.destination__item {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

.destination__sep {
    margin-left: 8px;
    color: #8c8e90;
}

.destination__city.is-fixed-price {
    border-bottom: 2px solid #cfaa77;
    padding-bottom: 1px;
}

/* Live city pages render as links inside the atlas cells. The link keeps the
   calm city-name look and only signals itself through hover/focus. */
.destination__city a {
    color: inherit;
    text-decoration: none;
}

.destination__city a:hover,
.destination__city a:focus {
    color: #0f0f18;
    text-decoration: underline;
    text-decoration-color: #cfaa77;
    text-underline-offset: 3px;
}

.destination__note {
    margin: 14px 0 0;
    color: #454649;
    font-size: 15px;
    line-height: 24px;
}

/* Midnight request cell */

.destination--action {
    background: #0f0f18;
}

.destination--action .destination__name {
    color: #ffffff;
}

.destination--action .destination__description,
.destination--action .destination__alt {
    color: #c9c9ce;
}

.destination__actions {
    margin: 20px 0 14px;
}

.destination__alt {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
}

.destination--action .destination__alt a {
    color: #ffffff;
}

.page-destinations a:not(.button):focus-visible {
    outline: 2px solid #3c46dc;
    outline-offset: 3px;
}

.destinations-register .destination__alt a:focus-visible,
.destinations-register .destination__alt a:focus-visible,
.destinations-register .destination__city:focus-visible,
.destinations-register .destination__city a:focus-visible {
    outline: 2px solid #3c46dc;
    outline-offset: 3px;
}

@media (max-width: 1279px) {
    .destinations-register {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 679px) {
    .destinations-register {
        grid-template-columns: minmax(0, 1fr);
    }

    .destination {
        padding: 26px 22px 28px;
    }
}

/* The Kazakh header keeps its language and contact rows visible at tablet
   widths. Give destination heroes the same clearance as the worldwide hub. */
@media (min-width: 992px) and (max-width: 1219px) {
    body:lang(kk) .main-container > .page-title.invert-colors {
        padding-top: 220px;
    }
}

/* Browsers without container queries use the documented title size. The
   longest localized name still fits the narrowest single-column cell. */
@supports not (width: 1cqw) {
    .destination__name {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-destinations .button {
        transition: none;
    }
}