/* Countries directory — Night Glass hero and Europe roadmap */
.countries-directory { min-height: calc(100vh - 68px); overflow-x: clip; color: #eef1fb; background: #061329; }
.countries-directory__inner { width: min(1240px, 100%); margin: auto; padding: 0 28px 42px; }

/* The new live composition comes first. The previous compact header remains
   in the template for a safe next edit, but is not rendered to travellers. */
.countries-directory__inner > .countries-roadmap:not(.countries-roadmap--nightglass) { display: none; }

.countries-hero--nightglass {
  position: relative;
  isolation: isolate;
  min-height: 352px;
  margin-inline: calc(50% - 50vw);
  padding: 38px max(28px, calc((100vw - 1184px) / 2));
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 10, 27, .94) 0%, rgba(5, 14, 35, .75) 39%, rgba(8, 15, 42, .22) 72%, rgba(4, 9, 24, .52) 100%),
    linear-gradient(0deg, rgba(4, 10, 27, .88), transparent 58%),
    url('/assets/countries/albania/hero/albania-hero.webp') center / cover;
}
.countries-hero--nightglass::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 82% 14%, rgba(167, 106, 255, .32), transparent 30%), linear-gradient(110deg, rgba(94, 59, 231, .18), transparent 48%); }
.countries-hero__head { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.countries-hero--nightglass .m-eyebrow { margin: 0; color: #a98eff; font-size: 12px; letter-spacing: .13em; }
.countries-hero--nightglass .m-eyebrow span { margin-right: 8px; font-size: 20px; vertical-align: -1px; }
/* Heading ramp comes from the shared page-hero contract in trips-meridian.css. */
.countries-hero--nightglass h1 { margin: 10px 0 0; color: #fff; }
.countries-hero--nightglass p:last-child { margin: 14px 0 0; color: rgba(238, 241, 251, .86); font-size: 17px; }

.countries-search { display: flex; align-items: center; width: min(470px, 100%); min-height: 58px; padding-left: 18px; border: 1px solid rgba(214, 210, 255, .36); border-radius: 11px; overflow: hidden; background: rgba(15, 19, 53, .64); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); backdrop-filter: blur(14px); }
.countries-search > span { color: #fff; font-size: 27px; line-height: 1; transform: translateY(-2px); }
.countries-search input { min-width: 0; min-height: 44px; align-self: stretch; flex: 1; padding: 0 14px; border: 0; outline: 0; color: #fff; background: transparent; font: 500 15px var(--font-body); }
.countries-search input::placeholder { color: rgba(238, 241, 251, .72); }
.countries-search button { align-self: stretch; padding: 0 24px; border: 0; color: #fff; background: linear-gradient(135deg, #9479ff, #6044d9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 22px rgba(129, 94, 255, .38); font: 800 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

.countries-hero--nightglass .country-region-tabs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 39px; }
.country-region-tabs a { display: flex; align-items: center; gap: 10px; min-width: max-content; padding: 14px 16px; border: 1px solid rgba(188, 199, 238, .25); border-radius: 12px; color: #e8ebf8; background: rgba(9, 20, 47, .75); box-shadow: 0 8px 20px rgba(0, 0, 0, .15); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; backdrop-filter: blur(10px); }
.country-region-tabs a:hover { border-color: #9a86ff; background: rgba(81, 60, 180, .48); }
.country-region-tabs i { color: #dcd7ff; font-size: 20px; font-style: normal; line-height: 1; }
.country-region-tabs a[aria-current='page'] { border-color: #9077ff; color: #fff; background: linear-gradient(135deg, #8064f5, #5b3ed8); box-shadow: 0 7px 20px rgba(105, 74, 235, .4); }
.country-region-tabs b { min-width: 25px; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .12); font-size: 12px; text-align: center; }

.countries-roadmap--nightglass { display: grid; grid-template-columns: 340px minmax(0, 1fr) 276px; gap: 16px; margin-top: 14px; padding: 20px; border: 1px solid rgba(179, 193, 237, .27); border-radius: 16px; color: #eef1fb; background: linear-gradient(135deg, rgba(8, 22, 52, .96), rgba(8, 19, 44, .86)); box-shadow: 0 17px 45px rgba(0, 0, 0, .22); }
.countries-roadmap__intro { display: flex; gap: 16px; padding: 12px 16px 12px 4px; border-right: 1px solid rgba(185, 196, 236, .15); }
.countries-roadmap__seal { display: grid; flex: none; width: 52px; height: 52px; place-items: center; border: 1px solid #825eff; border-radius: 50%; color: #c0aeff; box-shadow: 0 0 21px rgba(130, 94, 255, .48); font-size: 28px; }
.countries-roadmap--nightglass .m-eyebrow { margin: 0; color: #9b7dff; font-size: 11px; letter-spacing: .12em; }
.countries-roadmap h2 { margin: 7px 0 0; color: #fff; font: 700 25px / 1.04 var(--font-display); letter-spacing: -.025em; }
.countries-roadmap__intro > div > p:not(.m-eyebrow) { margin: 16px 0 0; color: #bfc9e2; font-size: 14px; line-height: 1.55; }
.countries-roadmap__totals { display: flex; gap: 26px; margin-top: 22px; }
.countries-roadmap__totals span { display: grid; grid-template-columns: 48px auto; column-gap: 10px; align-items: center; }
.countries-roadmap__totals i { grid-row: 1 / span 2; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(141, 113, 255, .5); border-radius: 10px; color: #ae9bff; font-size: 22px; font-style: normal; }
.countries-roadmap__totals b { font: 700 28px / 1 var(--font-display); }
.countries-roadmap__totals small { color: #aeb9d3; font-size: 11px; line-height: 1.2; }

.countries-roadmap__tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Each track carries a region name, a percentage and a guide count. On a live
   site with more published countries than a development copy, that content
   was wider than a 320px phone and pushed 43px of scroll onto the document —
   found only by running the audit against production. */
.countries-roadmap__tracks a > * { min-width: 0; overflow-wrap: anywhere; }
.countries-roadmap__tracks a { display: grid; min-width: 0; align-content: start; min-height: 132px; padding: 13px 11px; border: 1px solid rgba(185, 196, 236, .17); border-radius: 12px; color: #eef1fb; background: rgba(18, 35, 72, .42); text-decoration: none; }
.countries-roadmap__tracks a:hover { border-color: #8a70fc; background: rgba(74, 57, 166, .25); }
.countries-roadmap__track-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: start; font-size: 12px; line-height: 1.05; }
.countries-roadmap__track-head i { color: #d6cfff; font-size: 18px; font-style: normal; }
.countries-roadmap__track-head b { font-size: 12px; }
.countries-roadmap__tracks em { display: block; height: 7px; margin-top: 18px; border-radius: 999px; background: linear-gradient(90deg, #8a67fa var(--progress), rgba(169, 183, 225, .16) var(--progress)); box-shadow: 0 0 11px rgba(127, 92, 255, .45); font-style: normal; }
.countries-roadmap__tracks strong { margin-top: 14px; color: #fff; font: 700 25px / 1 var(--font-display); }
.countries-roadmap__tracks small { margin-top: 3px; color: #aeb9d3; font-size: 11px; }
.countries-roadmap__link { display: grid; align-content: center; gap: 10px; padding: 24px; border: 1px solid rgba(151, 122, 255, .45); border-radius: 13px; color: #f5f3ff; background: radial-gradient(circle at 82% 15%, rgba(162, 119, 255, .4), transparent 36%), linear-gradient(135deg, rgba(92, 59, 202, .56), rgba(27, 35, 87, .86)); text-decoration: none; box-shadow: inset 0 0 30px rgba(117, 76, 238, .16); }
.countries-roadmap__link > span { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #a995ff; border-radius: 50%; color: #d8cfff; box-shadow: 0 0 20px rgba(148, 111, 255, .5); font-size: 24px; }
.countries-roadmap__link strong { font: 700 22px / 1.05 var(--font-display); }
.countries-roadmap__link small { color: #cbc9ea; font-size: 14px; line-height: 1.45; }

.countries-more a, .country-guides__head > a, .countries-empty a { color: var(--color-accent-700); font-size: 13px; font-weight: 800; text-decoration: none; }
.country-guides { padding-top: 30px; }.country-guides__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }.country-guides__head > div { display: flex; align-items: baseline; gap: 12px; }.country-guides__head h2 { margin: 0; font: 800 30px / 1 var(--font-display); }.country-guides__head span { color: var(--color-neutral-700); font-size: 14px; }
.country-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.country-guide-card { min-width: 0; overflow: hidden; border: 1px solid var(--rule-color); border-radius: 7px; background: rgba(16, 31, 61, .58); }.country-guide-card a { display: block; height: 100%; color: inherit; text-decoration: none; }.country-guide-card a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }.country-guide-card__image { height: 132px; overflow: hidden; background: #15284b; }.country-guide-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }.country-guide-card:hover img { transform: scale(1.035); }.country-guide-card__image.is-empty { display: grid; place-items: center; font: 800 34px var(--font-display); color: var(--color-neutral-700); }.country-guide-card__body { padding: 13px; }.country-guide-card h3 { margin: 0; font: 800 21px / 1.05 var(--font-display); }.country-guide-card p { margin: 6px 0 8px; color: var(--color-neutral-700); font-size: 12px; }.country-guide-card__body > div { display: -webkit-box; min-height: 37px; overflow: hidden; color: var(--color-neutral-700); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.country-guide-card__body > span { display: block; margin-top: 13px; color: var(--color-accent-700); font-size: 13px; font-weight: 800; }.country-guide-card__body b { font-size: 16px; }.country-guide-card__body em { display: block; margin-top: 6px; color: var(--color-neutral-700); font-size: 9px; font-style: normal; line-height: 1.35; }
.countries-more { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 16px; border: 1px solid var(--rule-color); border-radius: 7px; background: rgba(16, 31, 61, .38); }.countries-more strong, .countries-more span { display: block; }.countries-more strong { font-size: 14px; }.countries-more span { margin-top: 5px; color: var(--color-neutral-700); font-size: 13px; }.countries-empty { padding: 64px 20px; text-align: center; border: 1px solid var(--rule-color); border-radius: 7px; }.countries-empty h2 { margin: 0; font-family: var(--font-display); }.countries-empty p { color: var(--color-neutral-700); font-size: 15px; }

@media (max-width: 1120px) { .countries-roadmap--nightglass { grid-template-columns: 1fr; }.countries-roadmap__intro { border-right: 0; border-bottom: 1px solid rgba(185, 196, 236, .15); }.countries-roadmap__link { grid-template-columns: 54px 1fr; align-items: center; }.countries-roadmap__link small { grid-column: 2; } }
@media (max-width: 760px) { .countries-directory__inner { padding: 0 16px 30px; }.countries-hero--nightglass { min-height: 0; margin-inline: -16px; padding: 28px 16px 24px; }.countries-hero__head { display: block; }.countries-hero--nightglass h1 { font-size: 54px; }.countries-hero--nightglass p:last-child { font-size: 14px; }.countries-search { width: 100%; min-height: 53px; margin-top: 24px; }.countries-hero--nightglass .country-region-tabs { gap: 8px; margin-top: 26px; }.country-region-tabs a { padding: 10px 12px; font-size: 12px; }.country-region-tabs i { font-size: 17px; }.countries-roadmap--nightglass { padding: 14px; }.countries-roadmap__intro { padding: 8px 0 16px; }.countries-roadmap__seal { width: 42px; height: 42px; font-size: 23px; }.countries-roadmap h2 { font-size: 22px; }.countries-roadmap__intro > div > p:not(.m-eyebrow) { margin-top: 10px; font-size: 13px; }.countries-roadmap__totals { margin-top: 16px; }.countries-roadmap__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.countries-roadmap__tracks a { min-height: 115px; padding: 10px; }.countries-roadmap__tracks strong { margin-top: 10px; }.country-guides__head > div { display: block; }.country-guides__head span { display: block; margin-top: 5px; }.country-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.country-guide-card__image { height: 100px; }.country-guide-card h3 { font-size: 16px; }.country-guide-card__body { padding: 9px; }.country-guide-card__body > div { display: none; }.countries-more { align-items: flex-start; flex-direction: column; } }
.countries-directory .countries-roadmap { display: none; }

/* The directory uses the same content in both appearances. Modernist turns
   the glass composition into the paper/rule system rather than leaving a
   dark page under a light navigation bar. */
[data-theme='modernist'] .countries-directory { color: var(--color-text); background: var(--color-neutral-300); }
[data-theme='modernist'] .countries-directory__inner { background: var(--color-bg); }
[data-theme='modernist'] .countries-hero--nightglass {
  border-bottom: 2px solid var(--color-text);
  background: linear-gradient(90deg, rgba(243,242,242,.98) 0 42%, rgba(243,242,242,.72) 66%, rgba(243,242,242,.24)), url('/assets/countries/albania/hero/albania-hero.webp') center / cover;
}
[data-theme='modernist'] .countries-hero--nightglass::after { display: none; }
[data-theme='modernist'] .countries-hero--nightglass :is(h1, p:last-child) { color: var(--color-text); }
[data-theme='modernist'] .countries-hero--nightglass .m-eyebrow { color: var(--color-accent-700); }
[data-theme='modernist'] .countries-search { border: 2px solid var(--color-text); border-radius: 0; background: var(--color-bg); box-shadow: none; backdrop-filter: none; }
[data-theme='modernist'] .countries-search > span { color: var(--color-accent); }
[data-theme='modernist'] .countries-search input { color: var(--color-text); background: transparent; }
[data-theme='modernist'] .countries-search input::placeholder { color: var(--color-neutral-700); }
[data-theme='modernist'] .countries-search button { color: #fff; background: var(--color-accent); box-shadow: none; }
[data-theme='modernist'] .country-region-tabs a { border: 2px solid var(--color-text); border-radius: 0; color: var(--color-text); background: var(--color-bg); box-shadow: none; backdrop-filter: none; }
[data-theme='modernist'] .country-region-tabs a:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
[data-theme='modernist'] .country-region-tabs a[aria-current='page'] { border-color: var(--select-edge); color: var(--select-ink); background: var(--select-bg); box-shadow: none; }
[data-theme='modernist'] .country-region-tabs i { color: var(--color-accent); }
[data-theme='modernist'] .country-region-tabs a[aria-current='page'] i { color: inherit; }
[data-theme='modernist'] .country-region-tabs b { background: var(--color-neutral-200); }
[data-theme='modernist'] .country-region-tabs a[aria-current='page'] b { background: rgba(255,255,255,.14); }
[data-theme='modernist'] .countries-roadmap--nightglass { border: 2px solid var(--color-text); border-radius: 0; color: var(--color-text); background: var(--color-surface); box-shadow: none; }
[data-theme='modernist'] .countries-roadmap__intro { border-color: var(--color-text); }
[data-theme='modernist'] .countries-roadmap__seal,
[data-theme='modernist'] .countries-roadmap__totals i { border-color: var(--color-text); border-radius: 0; color: var(--color-accent); box-shadow: none; }
[data-theme='modernist'] .countries-roadmap--nightglass .m-eyebrow { color: var(--color-accent-700); }
[data-theme='modernist'] .countries-roadmap h2,
[data-theme='modernist'] .countries-roadmap__tracks strong { color: var(--color-text); }
[data-theme='modernist'] .countries-roadmap__intro > div > p:not(.m-eyebrow),
[data-theme='modernist'] .countries-roadmap__totals small,
[data-theme='modernist'] .countries-roadmap__tracks small { color: var(--color-neutral-700); }
[data-theme='modernist'] .countries-roadmap__tracks a { border: 1px solid var(--color-text); border-radius: 0; color: var(--color-text); background: var(--color-bg); }
[data-theme='modernist'] .countries-roadmap__tracks a:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
[data-theme='modernist'] .countries-roadmap__track-head i { color: var(--color-accent); }
[data-theme='modernist'] .countries-roadmap__tracks em { border-radius: 0; background: linear-gradient(90deg, var(--color-accent) var(--progress), var(--color-neutral-300) var(--progress)); box-shadow: none; }
[data-theme='modernist'] .countries-roadmap__link { border: 2px solid var(--color-text); border-radius: 0; color: var(--color-bg); background: var(--color-text); box-shadow: none; }
[data-theme='modernist'] .countries-roadmap__link > span { border-color: var(--color-bg); border-radius: 0; color: var(--color-accent-400); box-shadow: none; }
[data-theme='modernist'] .countries-roadmap__link small { color: var(--color-neutral-400); }
[data-theme='modernist'] .country-guide-card,
[data-theme='modernist'] .countries-more,
[data-theme='modernist'] .countries-empty { border: 2px solid var(--color-text); border-radius: 0; color: var(--color-text); background: var(--color-bg); }
[data-theme='modernist'] .country-guide-card__image { background: var(--color-neutral-300); }

@media (prefers-reduced-motion: reduce) {
  .country-guide-card__image img { transition: none; }
  .country-guide-card:hover img { transform: none; }
}