.area-route {
margin-top: var(--space-lg);
padding: var(--space-lg);
border-radius: var(--radius-card);
background: linear-gradient(135deg, #1b2f63 0%, #203c85 55%, #24337a 100%);
box-shadow: 0 18px 45px -20px rgba(16, 27, 66, 0.7);
color: #fff;
}
.area-route__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.area-route__heading {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0;
padding: 0;
min-width: 0;
}
.area-route__name {
font-size: 27px;
font-weight: 800;
letter-spacing: -.02em;
color: #fff;
}
.area-route__loc { font-weight: 500; opacity: .65; font-size: .62em; }
.area-route__eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1b2f63;
background: #c9d4f0;
padding: 4px 10px;
border-radius: var(--radius-pill);
}
.area-route__logo {
height: 34px;
width: auto;
flex-shrink: 0;
opacity: 0.95;
}
.routes-grid {
display: grid;
grid-template-columns: 1fr 2fr; gap: var(--space-lg);
align-items: stretch; } .routes-map {
display: flex;
flex-direction: column;
gap: var(--space-sm);
height: 100%; }
.routes-map__frame {
position: relative;
width: 100%;
flex: 1 1 auto; min-height: 260px;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18); z-index: 0;
isolation: isolate;
} .routes-map__frame:not(.is-fullscreen) .leaflet-pane,
.routes-map__frame:not(.is-fullscreen) .leaflet-top,
.routes-map__frame:not(.is-fullscreen) .leaflet-bottom { z-index: 1; } .routes-leaflet {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: #e8eef5;
}
.routes-leaflet .leaflet-control-attribution { font-size: 9px; } .routes-map__frame.is-fullscreen {
position: fixed;
inset: 0;
z-index: 99999;
width: 100vw;
height: 100vh;
min-height: 0;
border-radius: 0;
border: 0;
} .routes-map__fs {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 1000;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: var(--radius-sm);
background: rgba(27, 47, 99, 0.9);
color: #fff;
font-size: 16px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.routes-map__fs:hover { background: #1b2f63; } .routes-fs-close {
position: fixed;
top: 16px;
right: 16px;
z-index: 100001;
display: flex;
align-items: center;
gap: 7px;
padding: 10px 20px;
border: 1.5px solid rgba(255,255,255,.35);
border-radius: 999px;
background: rgba(27, 47, 99, 0.92);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.routes-fs-close:hover { background: #1b2f63; }
.routes-map__frame:not(.is-fullscreen) .routes-fs-close { display: none; } .route-pin span {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
color: #fff;
font-weight: 700;
font-size: 13px;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.route-pin--history span { background: #c88a3c; }
.route-pin--culture span { background: #8b5cf6; }
.route-pin--sacred  span { background: #3b6fe0; }
.route-pin--nature  span { background: #2fa46b; }
.route-pin--coast   span { background: #14b8a6; }
.routes-map__placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
border-radius: var(--radius-md);
border: 1px dashed rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
font-size: var(--font-size-small);
}
.routes-map__meta { text-align: center; }
.routes-map__metric {
font-size: var(--font-size-body);
font-weight: 700;
color: #fff;
}
.routes-map__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 6px;
}
.routes-map__chips span {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.14);
padding: 3px 9px;
border-radius: var(--radius-pill);
} .routes-map__cta {
display: block;
text-align: center;
background: #fff;
color: var(--color-primary);
text-decoration: none;
padding: 12px 16px;
margin-top: var(--space-md);
border-radius: var(--radius-pill);
font-weight: 700;
font-size: var(--font-size-body);
border: 1.5px solid rgba(255, 255, 255, 0.9);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.routes-map__cta:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
} .routes-tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-sm);
align-content: start;
}
.routes-tile {
position: relative;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-md);
padding: 14px 16px;
} .routes-tile.span-1 { grid-column: span 1; }
.routes-tile.span-2 { grid-column: span 2; }
.routes-tile.span-3 { grid-column: span 3; } .routes-tile::after { content: none; }
.routes-tile__num {
position: absolute;
bottom: 11px;
right: 12px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #64748b;
color: #fff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: transform var(--transition-fast);
}
.routes-tile__num:hover { transform: scale(1.12); }
.routes-tile--history .routes-tile__num { background: #c88a3c; }
.routes-tile--culture .routes-tile__num { background: #8b5cf6; }
.routes-tile--sacred  .routes-tile__num { background: #3b6fe0; }
.routes-tile--nature  .routes-tile__num { background: #2fa46b; }
.routes-tile--coast   .routes-tile__num { background: #14b8a6; } .routes-tile__avatar {
position: absolute;
top: 13px;
right: 13px;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px -2px rgba(13, 22, 55, 0.35);
}
.routes-tile__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.routes-tile__emoji { font-size: 22px; line-height: 1; }
.routes-tile__avatar--history { background: #f6e6c8; box-shadow: 0 0 0 3px #c88a3c, 0 2px 8px -2px rgba(13,22,55,.4); }
.routes-tile__avatar--culture { background: #ece3fb; box-shadow: 0 0 0 3px #8b5cf6, 0 2px 8px -2px rgba(13,22,55,.4); }
.routes-tile__avatar--sacred  { background: #dde7ff; box-shadow: 0 0 0 3px #3b6fe0, 0 2px 8px -2px rgba(13,22,55,.4); }
.routes-tile__avatar--nature  { background: #d8f0e1; box-shadow: 0 0 0 3px #2fa46b, 0 2px 8px -2px rgba(13,22,55,.4); }
.routes-tile__avatar--coast   { background: #d3f1ee; box-shadow: 0 0 0 3px #14b8a6, 0 2px 8px -2px rgba(13,22,55,.4); } button.routes-tile__avatar {
padding: 0;
border: 0;
border-radius: 50%;
overflow: hidden;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
transition: transform var(--transition-fast);
}
button.routes-tile__avatar:hover { transform: scale(1.06); }
.routes-tile__zoom {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 26, 58, 0.45);
color: #fff;
font-size: 15px;
opacity: 0;
transition: opacity var(--transition-fast);
}
button.routes-tile__avatar:hover .routes-tile__zoom { opacity: 1; } .routes-tile__photo {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px; z-index: 5;
margin: 0;
border-radius: var(--radius-sm);
overflow: hidden;
background: #0f1a3a;
cursor: pointer;
pointer-events: none;
clip-path: circle(0% at calc(100% - 35px) 35px);
transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.routes-tile__photo.is-open {
pointer-events: auto;
clip-path: circle(150% at calc(100% - 35px) 35px);
}
.routes-tile__photo img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.12);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.routes-tile__photo.is-open img { transform: scale(1); }
.routes-tile__photo-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 14px 14px 12px;
font-size: var(--font-size-small);
font-weight: 700;
color: #fff;
background: linear-gradient(to top, rgba(8, 14, 34, 0.85), rgba(8, 14, 34, 0));
opacity: 0;
transition: opacity 0.3s ease 0.2s;
}
.routes-tile__photo.is-open .routes-tile__photo-cap { opacity: 1; }
.routes-tile__photo-credit {
display: block;
margin-top: 4px;
font-size: 9px;
font-weight: 400;
color: rgba(255,255,255,.5);
text-decoration: none;
}
.routes-tile__photo-credit:hover { color: rgba(255,255,255,.8); }
.routes-tile__name {
font-weight: 700;
font-size: var(--font-size-body);
color: #fff;
line-height: 1.3;
padding-right: 60px; margin-bottom: 8px;
}
.routes-tile__name-local {
display: block;
font-weight: 500;
font-size: var(--font-size-small);
color: rgba(255, 255, 255, 0.55);
margin-top: 2px;
}
.routes-tile { padding-bottom: 56px; }  .routes-tile__rating { display: flex; align-items: center; gap: 7px; margin: 4px 0 2px; }
.routes-tile__rating .rt-score { font-size: 13px; font-weight: 800; color: #fff; }
.routes-tile__rating .rt-stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; white-space: nowrap; letter-spacing: 1px; }
.routes-tile__rating .rt-empty { color: rgba(255, 255, 255, 0.28); }
.routes-tile__rating .rt-fill { position: absolute; left: 0; top: 0; width: var(--p, 0%); overflow: hidden; color: #fbbf24; }
.routes-tile__rating .rt-count { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.routes-tile__desc {
margin-top: 8px;
font-size: var(--font-size-small);
color: rgba(255, 255, 255, 0.62);
line-height: 1.45;
}
.routes-tile__meta {
margin-top: 8px;
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.55;
}
.routes-tile__links {
margin-top: 8px;
}
.routes-tile__links a {
font-size: 11px;
font-weight: 700;
color: #9bc1ff;
text-decoration: none;
}
.routes-tile__links a:hover { color: #fff; text-decoration: underline; } .routes-pill {
position: absolute;
left: 16px;
bottom: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.routes-pill__icon { font-size: 13px; }
.routes-pill--history { background: #f6e6c8; color: #7a5512; }
.routes-pill--culture { background: #ece3fb; color: #5a2f98; }
.routes-pill--sacred  { background: #dde7ff; color: #234e9e; }
.routes-pill--nature  { background: #d8f0e1; color: #246b45; }
.routes-pill--coast   { background: #d3f1ee; color: #0f766e; } .routes-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
}
.routes-modal.is-open { display: block; }
.routes-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 16, 38, 0.82);
backdrop-filter: blur(2px);
}
.routes-modal__box {
position: absolute;
inset: 4vh 4vw;
display: flex;
flex-direction: column;
background: #0f1a3a;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.routes-modal__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
color: #fff;
}
.routes-modal__title { font-weight: 700; font-size: var(--font-size-body); }
.routes-modal__close {
width: 34px;
height: 34px;
border: 0;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 16px;
cursor: pointer;
}
.routes-modal__close:hover { background: rgba(255, 255, 255, 0.22); }
.routes-modal__frame { flex: 1; }
.routes-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 1024px) {
.routes-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.routes-tile.span-1, .routes-tile.span-2, .routes-tile.span-3 { grid-column: auto; }
}
@media (max-width: 768px) {
.area-route { padding: var(--space-md); }
.routes-grid { grid-template-columns: 1fr; }
.routes-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .area-route__head    { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: start; }
.area-route__heading { display: contents; }
.area-route__eyebrow { grid-column: 1; grid-row: 1; justify-self: start; white-space: nowrap; font-size: 9.5px; letter-spacing: .04em; padding: 3px 9px; }
.area-route__logo    { grid-column: 2; grid-row: 1; height: 22px; width: auto; }
.area-route__name    { grid-column: 1 / -1; grid-row: 2; font-size: 21px; }
}
@media (max-width: 640px) {
.area-route__logo,
.area-route__logo img { height: 22px !important; width: auto !important; }
.area-route__eyebrow { font-size: 9.5px; letter-spacing: .04em; padding: 3px 9px; }
}
@media (max-width: 480px) {
.routes-tiles { grid-template-columns: 1fr; }
.routes-tile.span-1, .routes-tile.span-2, .routes-tile.span-3 { grid-column: auto; }
.area-route__name { font-size: 18px; }
}