/* ============================================================
   SAFARI PACKAGE — archive + single detail page
   Spec §3.3 and §3.4. No old CSS variable names.
   ============================================================ */

/* ============================================================
   ARCHIVE PAGE
   ============================================================ */
.packages-archive { padding: 4rem 0; }

.packages-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    padding: 1rem 1.25rem;
    background: #F9FAFB;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
}
.packages-filter__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4B5563;
    margin-right: 0.5rem;
}
.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1.5px solid #E5E7EB;
    background: #fff;
    color: #4B5563;
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.4,0,0.2,1);
}
.filter-btn:hover,
.filter-btn.active {
    background: #D4AF37;
    border-color: #D4AF37;
    color: #fff;
}

/* Archive grid — 3 cols desktop */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1023px) { .packages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .packages-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PACKAGE CARD (archive)
   ============================================================ */
.package-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transition: transform 300ms cubic-bezier(0.4,0,0.2,1),
                box-shadow 300ms cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
}
.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.package-card__img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}
.package-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.4,0,0.2,1);
    display: block;
}
.package-card:hover .package-card__img { transform: scale(1.05); }
.package-card__badge {
    position: absolute;
    top: 0.75rem; left: 0.75rem;
    background: #D4AF37;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 9999px;
}
.package-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.package-card__location {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.package-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: #1A1A2E;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    flex: 1;
}
.package-card__title a { color: inherit; text-decoration: none; }
.package-card__excerpt {
    font-size: 0.875rem;
    color: #6B7280;
    line-height: 1.65;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.package-card__meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #F3F4F6;
}
.package-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6B7280;
}
.package-card__meta-item svg { width: 13px; height: 13px; color: #D4AF37; }
.package-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.package-card__price {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #D4AF37;
    font-weight: 700;
}
.package-card__price-from {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #9CA3AF;
    font-weight: 400;
    display: block;
}

/* ============================================================
   PACKAGE HERO — §3.4 exact spec
   70vh, bg-cover bg-center, no overlay (text-shadows only)
   Title + Excerpt + Meta pills + Price + CTA centred
   ============================================================ */
.pkg-hero {
    position: relative;
    height: 70vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pkg-hero__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 5rem 1rem 2rem;   /* clear fixed navbar on mobile */
}
@media (min-width: 768px) { .pkg-hero__inner { padding: 2rem; } }

.pkg-hero__content {
    max-width: 48rem;           /* max-w-3xl = 768px */
    margin: 0 auto;
    text-align: center;
}

/* Title — Playfair, text-shadow 3px 3px 6px (spec §3.4) */
.pkg-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.875rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.25;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
    filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04));
}
@media (min-width: 768px) { .pkg-hero__title { font-size: 2.25rem; } }

/* Excerpt — text-shadow 2px 2px 4px (spec §3.4) */
.pkg-hero__excerpt {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 1.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
@media (min-width: 768px) { .pkg-hero__excerpt { font-size: 1.25rem; margin-bottom: 2rem; } }

/* Meta pills row — bg rgba(0,0,0,0.6), rounded-sm (4px) (spec §3.4) */
.pkg-hero__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.pkg-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,0,0,0.6);
    padding: 0.375rem 0.875rem;
    border-radius: 0.25rem;     /* rounded-sm = 4px */
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.pkg-hero__pill svg { flex-shrink: 0; }

/* Price + CTA row */
.pkg-hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}
.pkg-hero__price {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: #F4E9C1;             /* gold-light */
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: center;
}
.pkg-hero__price-from {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.pkg-hero__price-pp {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Main layout: 2/3 content + 1/3 sticky sidebar */
.package-single { padding: 3rem 0 5rem; }
.package-single__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 1023px) {
    .package-single__layout { grid-template-columns: 1fr; }
}

/* Location + Title */
.package-single__location {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4AF37;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.package-single__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.875rem, 4vw, 3rem);
    color: #1A1A2E;
    margin-bottom: 1.25rem;
    line-height: 1.15;
}

/* Meta pills row (duration, group size, best time, difficulty) */
.pkg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.pkg-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: #F3F4F6;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
}
.pkg-meta__item svg { width: 14px; height: 14px; color: #D4AF37; flex-shrink: 0; }

/* Section title style */
.package-single__section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #1A1A2E;
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #D4AF37;
    display: inline-block;
}

/* Highlights two-column grid */
.highlights-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    list-style: none;
    padding: 0;
}
@media (max-width: 639px) { .highlights-list { grid-template-columns: 1fr; } }
.highlights-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}
.highlights-list li svg {
    width: 18px; height: 18px;
    color: #16A34A;   /* green-600 */
    flex-shrink: 0;
    margin-top: 1px;
}

/* Itinerary timeline — §4.4 exact spec values */
.itinerary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.itinerary__day {
    border-left: 2px solid #9E7E2D;
    padding-left: 1.5rem;
    position: relative;
}
/* Spec §4.4: 16×16 circle, bg-gold-dark, absolute left-[-9px] top-0 — no gradient, no shadow */
.itinerary__day-dot {
    position: absolute;
    left: -0.5625rem;   /* -9px exactly */
    top: 0;
    width: 1rem;        /* 16px */
    height: 1rem;       /* 16px */
    border-radius: 9999px;
    background: #9E7E2D;
    flex-shrink: 0;
}
.itinerary__day-content { padding-top: 0.25rem; }
.itinerary__day-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.itinerary__day-desc {
    font-size: 1rem;
    color: #374151;
    line-height: 1.625;
    margin-bottom: 0.75rem;
}
.itinerary__day-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.itinerary__day-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
}
.itinerary__day-meta span:first-child { font-weight: 600; color: #9E7E2D; }
.itinerary__day-meta span:last-child  { color: #374151; }

/* Activity tags */
.activities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.activity-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    background: rgba(212,175,55,0.1);
    color: #9E7E2D;
    border-radius: 0.25rem;
    border: 1px solid rgba(212,175,55,0.2);
    font-weight: 500;
}

/* Inclusions & Exclusions — two-column grid */
.inc-exc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: #F9FAFB;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
}
@media (max-width: 639px) { .inc-exc { grid-template-columns: 1fr; } }

.inc-exc h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    margin-bottom: 1rem;
}
.inc-exc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.inc-exc__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}
.inc-exc__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.inc-exc__icon--check { color: #16A34A; }
.inc-exc__icon--x     { color: #DC2626; }

/* Actions bar */
.package-single__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 2rem 0;
    padding: 1.5rem;
    background: #F9FAFB;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
}

/* ============================================================
   BOOKING CARD — sticky sidebar  §3.4 right column
   ============================================================ */
.booking-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    position: sticky;
    top: 5.5rem;   /* clears fixed navbar */
}
.booking-card__price {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #D4AF37;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.booking-card__price-from {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #9E7E2D;
    font-weight: 600;
}
.booking-card__price-note {
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-bottom: 1.25rem;
}
.booking-card__divider {
    border: none;
    border-top: 1px solid #E5E7EB;
    margin: 1rem 0;
}
.booking-card .form-input  { border-color: #D1D5DB; color: #111827; }
.booking-card .form-label  { color: #374151; }
.booking-card .form-textarea { min-height: 80px; }

@media (max-width: 1023px) {
    .booking-card { position: static; }
}