/* ============ SUBPAGE HERO (kategoria / wycieczka) ============ */
.page-hero{ position: relative; min-height: 360px; display: flex; align-items: flex-end; color: #fff; padding-bottom: 44px; }
.page-hero--sm{ min-height: 300px; }
.page-hero__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Irizar z boku: kadr niżej, żeby napis firmy na drzwiach i logo na masce były w kadrze */
.page-hero__img--autokar{ object-position: 72% 100%; }
.page-hero__scrim{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,19,53,.4) 0%, rgba(15,12,36,.88) 100%); }
.page-hero__content{ position: relative; z-index: 1; }
.page-hero__content h1{ font-size: clamp(30px, 4.5vw, 48px); color: #fff; text-shadow: 0 2px 24px rgba(6,4,18,.5); }
.page-hero__content p{ font-size: 15.5px; color: #F1EFFA; max-width: 60ch; margin-top: 14px; line-height: 1.6; text-shadow: 0 2px 16px rgba(6,4,18,.45); }
.breadcrumb{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 14px; flex-wrap: wrap; }
.breadcrumb a{ color: rgba(255,255,255,.75); transition: color .18s ease; }
.breadcrumb a:hover{ color: #fff; }
.breadcrumb span{ color: rgba(255,255,255,.4); }

/* ============ TRIP CARDS (kategoria/kierunek-landing) ============ */
.trip-cards{ display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
.trip-card{
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.trip-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px rgba(16,13,43,.14); }
.trip-card__media{ position: relative; aspect-ratio: 16/10; overflow: hidden; }
.trip-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.trip-card:hover .trip-card__media img{ transform: scale(1.05); }
.trip-card__days{
  position: absolute; top: 14px; left: 14px;
  background: rgba(15,12,36,.55); backdrop-filter: blur(4px); color: #fff;
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-sm);
}
.trip-card__body{ padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.trip-card__tag{ font-size: 12px; font-weight: 700; color: var(--indigo); text-transform: uppercase; letter-spacing: .04em; }
.trip-card__body h3, .trip-card__body h2{ font-size: 19px; font-weight: 800; }
.trip-card__body p{ font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.trip-card__footer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.trip-card__price{ display: flex; flex-direction: column; min-width: 0; }
.trip-card__price strong{ font-size: 18px; font-weight: 800; color: var(--indigo); line-height: 1.2; }
.trip-card__price span{ font-size: 11px; color: var(--ink-faint); font-weight: 600; }
@media (min-width: 640px){ .trip-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px){ .trip-cards--4{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.trip-cards--4 .trip-card__body{ padding: 20px; }
.trip-card--ask{ background: var(--surface-2); border-color: transparent; }
.trip-card--ask .trip-card__body h3{ font-size: 24px; }

/* ============ NAJWAŻNIEJSZE WYCIECZKI (front-page) ============ */
.highlights__group + .highlights__group{ margin-top: 48px; }
.highlights__title{ font-size: 20px; font-weight: 800; color: var(--indigo); margin-bottom: 20px; }

/* ============ ITINERARY + BOOKING CARD (wycieczka detail) ============ */
.trip-layout{ display: grid; grid-template-columns: minmax(0,1fr); gap: 48px; align-items: start; }
.itinerary{ display: flex; flex-direction: column; }
.itinerary__day{ display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.itinerary__day:last-child{ border-bottom: 1px solid var(--line); }
.itinerary__num{ font-family: var(--font); font-size: 26px; font-weight: 800; color: var(--indigo-light); line-height: 1.1; }
.itinerary__day h3{ font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.itinerary__day p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }

.booking-card{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: 0 24px 56px rgba(16,13,43,.12);
}
.booking-card__price{ font-size: 32px; font-weight: 800; color: var(--indigo); line-height: 1; }
.booking-card__price span{ display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); margin-top: 8px; line-height: 1.4; }
.booking-card__meta{ margin: 22px 0; display: flex; flex-direction: column; }
.booking-card__meta li{ display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.booking-card__meta li:last-child{ border-bottom: 1px solid var(--line); }
.booking-card__meta svg{ width: 17px; height: 17px; color: var(--indigo); flex-shrink: 0; }
@media (min-width: 960px){
  .trip-layout{ grid-template-columns: minmax(0,1fr) 320px; }
  .booking-card{ position: sticky; top: 96px; }
}