/* ============================================================
   Ronik Services — Itinerary page styles
   Loaded in addition to styles.css. Reuses its design tokens
   (--blue, --yellow, --green, --glass, --btn, etc.).
============================================================ */

/* ---- Itinerary hero (full-width image band) ---- */
.it-hero {
  position: relative; z-index: 1; min-height: min(78vh, 720px);
  display: flex; align-items: flex-end;
  padding: clamp(120px, 16vw, 160px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
}
/* Belt-and-suspenders: keep all page content above the fixed animated background */
main { position: relative; z-index: 1; }
.it-hero__bg { position: absolute; inset: 0; z-index: 0; }
.it-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.it-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,20,.55) 0%, rgba(7,11,20,.35) 40%, rgba(7,11,20,.92) 100%);
}
.it-hero .container { position: relative; z-index: 1; }
.it-hero__eyebrow { color: var(--yellow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: 16px; }
.it-hero__title { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; }
.it-hero__lead { color: #dbe4f5; font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 60ch; margin-top: 18px; }

.it-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.it-meta span {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-2); background: rgba(7,11,20,.5); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 15px; font-size: .86rem; font-weight: 500; color: var(--text);
}
.it-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--grad-flag, linear-gradient(90deg,#00A1DE,#FAD201,#20603D)); }

.it-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---- Quick facts row ---- */
.it-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.it-fact { padding: 22px 24px; }
.it-fact strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 4px; }
.it-fact span { color: var(--muted); font-size: .92rem; }

/* ---- At a glance timeline ---- */
.glance { display: grid; gap: 16px; }
.glance__row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; padding: 20px 24px; }
.glance__days { font-family: var(--font-display); font-weight: 700; color: var(--yellow); font-size: 1rem; }
.glance__where { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.glance__what { color: var(--muted); font-size: .95rem; }

/* ---- Day block ---- */
.day-block { margin-top: clamp(40px, 6vw, 72px); }
.day-block:first-of-type { margin-top: 0; }
.day-block__tag { color: var(--green-lt, #3a9366); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; margin-bottom: 10px; }
.day-block__title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.02em; margin-bottom: 16px; }
.day-block__lead { color: var(--muted); font-size: 1.06rem; max-width: 66ch; }
.day-block__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.day-block__chips span { font-size: .8rem; color: var(--text); border: 1px solid var(--border-2); border-radius: 999px; padding: 5px 12px; background: var(--surface-2); }

/* Photo grids */
.photo-grid { display: grid; gap: 12px; margin-top: 24px; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); display: block; border: 1px solid var(--border); }
.photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid--2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid--wide { grid-template-columns: 1fr; }
.photo-grid--wide img { aspect-ratio: 16/6.5; }
.photo-grid--3 img, .photo-grid--2 img { aspect-ratio: 4/3; }

/* Single crisp portrait feature (for the one high-res gorilla shot) */
.photo-feature { margin-top: 24px; }
.photo-feature img {
  width: 100%; max-width: 560px; aspect-ratio: 4/5; object-fit: cover; object-position: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; margin-inline: auto;
}

/* Runs list (how the days run) */
.runs { display: grid; gap: 14px; margin-top: 24px; }
.runs li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 18px 20px; }
.runs__n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-display); font-weight: 700; color: #061021; background: var(--grad-sun, linear-gradient(120deg,#FAD201,#ffb000)); }
.runs p { color: var(--muted); font-size: .98rem; }
.runs strong { color: var(--text); }

/* Callout (gorilla permit / fitness) */
.callout { padding: 26px 28px; margin-top: 24px; border-left: 3px solid var(--yellow); }
.callout h4 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 8px; }
.callout .price { font-family: var(--font-display); font-size: 1.6rem; color: var(--yellow); font-weight: 700; margin-bottom: 6px; }
.callout p { color: var(--muted); font-size: .95rem; margin: 0; }
[dir="rtl"] .callout { border-left: 0; border-right: 3px solid var(--yellow); }

/* Practicalities: included / not included */
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.inc-card { padding: 26px 28px; }
.inc-card h4 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 14px; }
.inc-card p { color: var(--muted); font-size: .96rem; margin: 0; }
.inc-card--yes h4 { color: var(--green-lt, #3a9366); }
.inc-card--no h4 { color: var(--muted-2); }

/* Accommodation tiers */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { padding: 24px 26px; }
.tier__name { font-family: var(--font-display); font-weight: 700; color: var(--blue-lt, #4fc3f0); margin-bottom: 8px; }
.tier p { color: var(--muted); font-size: .94rem; margin: 0; }

/* Small print rows */
.smallprint { display: grid; gap: 14px; margin-top: 8px; }
.smallprint p { color: var(--muted); font-size: .96rem; margin: 0; }
.smallprint strong { color: var(--text); }

/* Contact CTA */
.it-contact__channels { display: grid; gap: 12px; margin: 24px 0; }
.it-contact__channels li { display: flex; gap: 14px; align-items: baseline; }
.it-contact__channels span:first-child { width: 90px; flex: 0 0 auto; color: var(--muted-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.it-contact__channels a { color: var(--blue); }

@media (max-width: 820px) {
  .it-facts, .tier-grid { grid-template-columns: 1fr; }
  .inc-grid { grid-template-columns: 1fr; }
  .photo-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .glance__row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 600px) {
  /* Shorter hero on phones so the headline sits near the top, not pushed down */
  .it-hero { min-height: auto; padding: 108px 0 32px; }
}
@media (max-width: 520px) {
  .photo-grid--3, .photo-grid--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   PRINT / SAVE-AS-PDF — ink-friendly light layout.
   (The site is dark; browsers drop background colours when printing,
   so we restyle to dark-on-white for a clean, readable PDF.)
============================================================ */
@media print {
  @page { margin: 15mm; }
  html, body { background: #fff !important; color: #1a1a1a !important; }

  /* Hide chrome, decoration and interactive-only bits */
  .bg-fx, .nav, header.nav, .wa-float, .wa-modal, .scroll-hint, .flag-strip,
  .it-hero__bg, .it-hero__cta, .it-hero__eyebrow, .footer__strip, .footer__links,
  .nav__lang, [data-print], .section__note { display: none !important; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }

  .section { padding: 14px 0 !important; }
  .container { max-width: 100% !important; padding: 0 !important; }

  .it-hero { min-height: auto !important; padding: 0 0 10px !important; display: block !important; }
  .it-hero__title, .section__title, .day-block__title,
  h1, h2, h3, h4 { color: #111 !important; }
  .it-hero__title { font-size: 26pt !important; }
  .section__title { font-size: 18pt !important; }
  .day-block__title { font-size: 15pt !important; }

  .it-hero__lead, .day-block__lead, .about__lead p, p,
  .glance__what, .runs p, .tier p, .inc-card p, .smallprint p,
  .section__intro, .about__creds { color: #333 !important; }

  .kicker { color: #1a5f8a !important; }
  .day-block__tag { color: #1f6a45 !important; }
  .glance__days, .callout .price, .tier__name { color: #b07d00 !important; }
  a { color: #1a5f8a !important; }

  /* Cards → clean white boxes */
  .glass, .it-meta span, .day-block__chips span, .tier, .inc-card,
  .callout, .glance__row, .runs li {
    background: #fff !important; border: 1px solid #d8d8d8 !important;
    box-shadow: none !important; backdrop-filter: none !important;
  }
  .it-meta { gap: 8px; }
  .it-meta span { color: #111 !important; padding: 4px 10px; }
  .it-meta span::before { display: none; }

  .runs__n { background: #eee !important; color: #111 !important; }
  .callout { border-left: 3px solid #b07d00 !important; }
  [dir="rtl"] .callout { border-left: 0 !important; border-right: 3px solid #b07d00 !important; }

  /* Images print (they are <img>, not CSS backgrounds) */
  .photo-grid img { border: 1px solid #ddd !important; }

  /* Keep logical blocks from splitting across pages */
  .day-block, .glance__row, .callout, .inc-card, .tier, .runs li,
  .photo-grid, .section__head { page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
  #days .day-block { page-break-before: auto; }

  .footer { border: 0 !important; background: #fff !important; }
  .footer__brand p, .footer__bottom p { color: #555 !important; }
}