/* Pilgrimage coach hire page. Loads after airport-transfers.css, event-transportation.css and
   sports-team-transportation.css and uses their --atx-* tokens. */

.atx p.pg-lead { max-width: 860px; margin: 14px 0 0; font-size: 17px; line-height: 1.7; }
.atx .pg-hero-link { margin-top: 6px; }
.atx .pg-hero-link a { color: var(--atx-lime); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.atx .pg-hero-link a:hover { color: var(--atx-white); }

/* ---------- route cards ---------- */
.atx .pg-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.atx .pg-route { display: flex; flex-direction: column; background: var(--atx-white); border: 1px solid var(--atx-line); border-radius: var(--atx-r); overflow: hidden; box-shadow: var(--atx-shadow-1); }
.atx .pg-map { position: relative; aspect-ratio: 5 / 3; background: #eaf3f6; border-bottom: 1px solid var(--atx-line); }
.atx .pg-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atx .pg-map__grid { stroke: #d3e3ea; stroke-width: 1; fill: none; }
.atx .pg-map__line { fill: none; stroke: var(--atx-blue); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.atx .pg-map__dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); background: var(--atx-white); border: 2px solid var(--atx-blue); }
.atx .pg-map__dot--end { background: var(--atx-lime); border-color: var(--atx-lime); }
.atx .pg-map__label { position: absolute; font-size: 12px; font-weight: 600; color: var(--atx-ink); white-space: nowrap; left: calc(var(--x) + 10px); top: var(--y); transform: translateY(-50%); }
.atx .pg-map__label--l { left: auto; right: calc(100% - var(--x) + 10px); }
.atx .pg-map__label--t { left: var(--x); top: calc(var(--y) - 22px); transform: translateX(-50%); }
.atx .pg-map__label--b { left: var(--x); top: calc(var(--y) + 10px); transform: translateX(-50%); }
.atx .pg-route__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; flex: 1; }
.atx .pg-route h3 { font-size: 20px; line-height: 1.25; }
.atx .pg-route__facts { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--atx-line); }
.atx .pg-route__facts > div { display: contents; }
.atx .pg-route__facts dt, .atx .pg-route__facts dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--atx-line); font-size: 14px; line-height: 1.4; }
.atx .pg-route__facts dt { color: var(--atx-muted); font-weight: 400; white-space: nowrap; }
.atx .pg-route__facts dd { color: var(--atx-ink); font-weight: 600; }
.atx .pg-route__facts > div:first-child dd { color: var(--atx-blue); }
.atx p.pg-route__stops { margin: 0; font-size: 14px; line-height: 1.6; color: var(--atx-ink); }
.atx .pg-route__stops span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--atx-muted); }

/* ---------- route notes ---------- */
.atx .pg-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.atx .pg-notes p { margin: 0; padding: 20px 22px; background: var(--atx-white); border: 1px solid var(--atx-line); border-left: 4px solid var(--atx-lime); border-radius: 12px; line-height: 1.65; }
.atx .pg-notes b { color: var(--atx-blue); }

/* ---------- segment cards ---------- */
.atx .pg-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.atx .pg-segments li { display: grid; gap: 12px; align-content: start; padding: 24px 22px; background: var(--atx-paper); border: 1px solid var(--atx-line); border-radius: var(--atx-r); }
.atx .pg-segments svg { width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: var(--atx-teal); color: var(--atx-lime); }
.atx .pg-segments h3 { font-size: 1.15rem; line-height: 1.3; color: var(--atx-blue); }
.atx .pg-segments p { margin: 0; line-height: 1.6; }

/* ---------- six-step timeline ---------- */
.atx .pg-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 32px 0 0; padding: 28px 24px; list-style: none; background: var(--atx-white); border: 1px solid var(--atx-line); border-radius: 18px; box-shadow: var(--atx-shadow-1); }
.atx .pg-steps::before { content: ""; position: absolute; top: 53px; left: calc(24px + 100% / 12); right: calc(24px + 100% / 12); height: 3px; border-radius: 3px; background: var(--atx-lime); }
.atx .pg-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.atx .pg-steps__n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--atx-white); border: 3px solid var(--atx-lime); color: var(--atx-teal); font-family: var(--atx-head); font-weight: 800; font-size: 20px; }
.atx .pg-steps b { font-size: 15.5px; line-height: 1.3; color: var(--atx-ink); }
.atx .pg-steps small { font-size: 13.5px; line-height: 1.45; color: var(--atx-muted); }

/* ---------- four-icon grid ---------- */
.atx .atx-benefits.pg-benefits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }

/* ---------- request ---------- */
#contact .atx-qgrid { margin-top: 32px; }

@media (max-width: 1024px) {
    .atx .pg-routes, .atx .pg-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atx .atx-benefits.pg-benefits--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .atx .pg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
    .atx .pg-steps::before { display: none; }
}

@media (max-width: 640px) {
    .atx .pg-routes, .atx .pg-segments, .atx .pg-notes, .atx .atx-benefits.pg-benefits--4 { grid-template-columns: minmax(0, 1fr); }
    .atx .pg-steps { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 22px 18px; }
    .atx .pg-steps li { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; }
    .atx .pg-steps__n { grid-row: span 2; width: 44px; height: 44px; font-size: 17px; }
    /* Vertical connector between the circles, the phone version of the desktop line (row gap is 26px). */
    .atx .pg-steps li:not(:last-child)::after { content: ""; position: absolute; left: 20.5px; top: 48px; bottom: -22px; width: 3px; border-radius: 3px; background: var(--atx-lime); }
    .atx .pg-map__label { font-size: 11px; }
}