/* SkyZio: styles for the tour landing pages, related-services links and footer tour links.
   Kept apart from style.css so the two can be edited independently. Uses its tokens. */

/* ---------- tour cards: title link and two actions ---------- */
.tour-body h3 a { color: inherit; transition: color .25s; }
.tour-body h3 a:hover { color: var(--sun-deep); }
.tour-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; }
.tour-links .tour-cta { margin-top: 0; }
.tour-ask { font-size: 14.5px; font-weight: 700; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(91, 103, 130, .35); text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
.tour-ask:hover { color: var(--ink); text-decoration-color: var(--sun); }

/* ---------- tour landing pages ---------- */
.page-tour .ph-title { font-size: clamp(36px, 4.4vw, 62px); }
.page-tour .ph-art .tp-art { width: 100%; height: auto; display: block; border-radius: 34px; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8); }
.tp-season { margin: 26px 0 30px; padding: 18px 18px 16px; border-radius: 20px; background: #fff; border: 1px solid rgba(14, 26, 51, .07); }
.tp-season-label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.tp-season-label .ic { width: 18px; height: 18px; color: var(--sun-deep); }
.tp-season-label b { color: var(--ink); }
.tp-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 12px; }
.tp-months span { padding: 7px 0; border-radius: 8px; text-align: center; font-size: 11.5px; font-weight: 700; color: #a1a9bc; background: #F5F2EC; }
.tp-months span.on { color: #fff; background: #E07A12; }
.tp-season-why { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.tp-not { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.tp-not b { color: var(--ink); }
.tp-related { background: #fff; }
.tp-related .tour-grid { margin-top: 0; }

/* ---------- related services ---------- */
.related-sec { background: #fff; padding: 100px 0; }
.related-sec .sec-head { margin-bottom: 36px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- footer: popular tours row ---------- */
.footer-tours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; padding: 0 0 34px; }
.footer-tours h4 { margin: 0 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.footer-tours a { font-size: 14.5px; color: rgba(255, 255, 255, .62); transition: color .3s; }
.footer-tours a:hover { color: #fff; }

@media (max-width: 980px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .related-grid { grid-template-columns: 1fr; }
  .related-sec { padding: 72px 0; }
  .tp-months { grid-template-columns: repeat(6, 1fr); }
  .page-tour .ph-art .tp-art { border-radius: 24px; }
  .footer-tours { gap: 8px 16px; }
}