/**
 * Export page (page-templates/export.php). Loaded only on that template.
 * Uses the theme tokens from app.css (--color-*, --font-*, --radius-card).
 */

/* ---- Hero: title + live route map + figures, one dark block ---- */
.xp-hero { position: relative; background: var(--color-ink); color: #fff; overflow: hidden; padding-top: clamp(2rem, 5vw, 3.5rem); }
.xp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-orange); }
.xp-crumb { display: flex; gap: .5rem; align-items: center; font-family: var(--font-mono); font-size: .75rem; color: rgba(255,255,255,.55); margin-bottom: 1.75rem; }
.xp-crumb a:hover { color: var(--color-orange); }
.xp-crumb span[aria-hidden] { color: var(--color-orange); }

.xp-hero__head { display: grid; gap: 1.5rem 3rem; align-items: end; }
@media (min-width: 1024px) { .xp-hero__head { grid-template-columns: 7fr 5fr; } }
.xp-hero__title { color: #fff; font-size: clamp(2.4rem, 6.2vw, 5.2rem); line-height: .98; font-weight: 600; letter-spacing: -.015em; max-width: 12ch; }
.xp-hero__lead { color: rgba(255,255,255,.78); font-size: 1.08rem; line-height: 1.65; max-width: 46ch; }
.xp-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* ---- Map ---- */
.xp-map { margin: clamp(1.5rem, 4vw, 2.75rem) 0 0; position: relative; }
.xm { display: block; width: 100%; height: auto; }
/* Phones: run the map edge to edge and zoom in a little; the far west of the
   Americas and the Pacific are the only parts cropped (no markets there). */
@media (max-width: 767px) {
	.xp-map { margin-inline: -1.25rem; overflow: hidden; }
	.xm { width: 135%; margin-left: -12%; }
	.xp-map__legend { padding-inline: 1.25rem; }
}
.xm-land path { fill: var(--color-steel); stroke: var(--color-ink); stroke-width: .5; transition: fill .25s; }
.xm-land path[data-c="TR"] { fill: var(--color-orange); }
.xm-land path.is-market { fill: #6b3a2a; }
.xm-land path.is-market.is-hot { fill: var(--color-orange-hot); }

.xm-route { fill: none; stroke: var(--color-orange); stroke-width: 1.1; stroke-linecap: round; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity .25s, stroke-width .25s; }
.xm-pin { fill: var(--color-orange); stroke: var(--color-ink); stroke-width: .8; transition: r .25s; }
.xm-home { fill: #fff; stroke: var(--color-orange); stroke-width: 2; }
.xm-home-ring { fill: none; stroke: var(--color-orange); stroke-width: 1; opacity: .5; }

/* One orchestrated moment: routes draw out from Ankara the first time the map is seen. */
@media (prefers-reduced-motion: no-preference) {
	.xp-map.is-armed .xm-route { stroke-dashoffset: 1; }
	.xp-map.is-armed .xm-pin { opacity: 0; }
	.xp-map.is-live .xm-route { animation: xm-draw 1.1s cubic-bezier(.5,0,.2,1) forwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
	.xp-map.is-live .xm-pin { animation: xm-pop .35s ease-out forwards; animation-delay: calc(var(--i) * 110ms + 1100ms); }
	.xp-map.is-live .xm-home-ring { transform-box: fill-box; transform-origin: center; animation: xm-ring 2.4s ease-out 3; }
}
@keyframes xm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes xm-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes xm-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }

/* Hovering a country in the list (or on the map) isolates its route. */
.xm.has-focus .xm-route { opacity: .15; }
.xm.has-focus .xm-route.is-hot { opacity: 1; stroke-width: 2; }
.xm-pin.is-hot { r: 4.2; }

.xp-map__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1rem; font-size: .85rem; color: rgba(255,255,255,.65); }
.xp-map__legend span { display: inline-flex; align-items: center; gap: .55rem; }
.xp-map__legend b { color: #fff; font-weight: 500; }
.xp-key { width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.xp-key--home { background: var(--color-orange); }
.xp-key--exp { background: #6b3a2a; box-shadow: inset 0 0 0 1px var(--color-orange); }

/* ---- Figures strip ---- */
.xp-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: clamp(2rem, 5vw, 3rem) 0 0; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 768px) { .xp-stats { grid-template-columns: repeat(4, 1fr); } }
.xp-stat { display: flex; flex-direction: column-reverse; gap: .35rem; padding: 1.5rem 1.25rem 1.75rem 0; }
.xp-stat + .xp-stat { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.12); }
@media (max-width: 767px) {
	.xp-stat:nth-child(3) { padding-left: 0; border-left: 0; }
	.xp-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}
.xp-stat dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1; color: #fff; }
.xp-stat dt { font-size: .9rem; color: rgba(255,255,255,.6); }

/* ---- Shared two-column intro ---- */
.xp-split { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .xp-split { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.xp-split__intro h2, .xp-ship h2, .xp-final h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
.xp-split__intro p, .xp-ship__p { margin-top: 1rem; color: var(--color-concrete); line-height: 1.7; max-width: 52ch; }

/* ---- Markets ---- */
.xp-regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
.xp-region h3 { font-size: 1.05rem; color: var(--color-concrete); padding-bottom: .6rem; border-bottom: 2px solid var(--color-ink); }
.xp-region ul { margin-top: .4rem; }
.xp-country { width: 100%; text-align: left; display: flex; align-items: center; gap: .65rem; padding: .55rem 0; font-size: 1.05rem; color: var(--color-ink); cursor: pointer; border-bottom: 1px solid var(--color-line); background: none; }
.xp-country::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-orange); flex: none; }
.xp-country:hover, .xp-country.is-hot { color: var(--color-orange); }

/* ---- Process (a real sequence, so it is numbered) ---- */
.xp-process { background: #fff; }
.xp-process__intro { margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.xp-steps { display: grid; gap: 2rem; counter-reset: none; }
@media (min-width: 768px) { .xp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
	.xp-steps { grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
	.xp-steps::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 2px; background: var(--color-line); }
	.xp-step { padding-right: 2rem; }
}
.xp-step { position: relative; }
.xp-step__n { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 999px; background: var(--color-ink); color: #fff; font-family: var(--font-display); font-size: 1.15rem; box-shadow: 0 0 0 6px #fff; }
.xp-step:last-child .xp-step__n { background: var(--color-orange); }
.xp-step h3 { margin-top: 1.25rem; font-size: 1.3rem; }
.xp-step p { margin-top: .6rem; color: var(--color-concrete); line-height: 1.65; font-size: .97rem; }

/* ---- Shipping & documents ---- */
.xp-ship__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .xp-ship__grid { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } }
.xp-partners { margin-top: 2rem; border-top: 2px solid var(--color-ink); }
.xp-partners li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-line); }
.xp-partners strong { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; text-transform: uppercase; }
.xp-partners span { color: var(--color-concrete); font-size: .92rem; text-align: right; }
.xp-docs { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.25rem); }
.xp-docs h3 { font-size: 1.25rem; }
.xp-docs ul { margin-top: 1.1rem; display: grid; gap: .85rem; }
.xp-docs li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.xp-docs li svg { flex: none; margin-top: .2rem; color: var(--color-orange); }

/* ---- Export manager ---- */
.xp-manager { background: var(--color-steel); color: #fff; padding-block: clamp(3.5rem, 8vw, 6rem); }
.xp-manager__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .xp-manager__grid { grid-template-columns: 4fr 8fr; gap: 3.5rem; } }
@media (min-width: 1024px) { .xp-manager__grid { grid-template-columns: 4fr 7fr; } }
.xp-manager__photo { max-width: 22rem; }
.xp-manager__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-card); }
.xp-manager h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); max-width: 20ch; }
.xp-manager__name { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; }
.xp-manager__name span { font-family: var(--font-sans); text-transform: none; font-size: .95rem; color: var(--color-orange); }
.xp-manager__bio { margin-top: .9rem; color: rgba(255,255,255,.75); line-height: 1.7; max-width: 62ch; }
.xp-manager__links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }
.xp-manager__links .btn { text-transform: none; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }

/* ---- Closing call ---- */
.xp-final { background: #fff; }
.xp-final__inner { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) { .xp-final__inner { grid-template-columns: 1fr auto; gap: 4rem; } }
.xp-final p { margin-top: .9rem; color: var(--color-concrete); line-height: 1.7; max-width: 58ch; }
.xp-final__cta { display: flex; flex-wrap: wrap; gap: .7rem; }