/*
 * Taitembo Safaris Manager — safari.css
 * Loaded on tta_safari single pages + pages using shortcodes.
 * Supplements the inline CSS in single-safari.php.
 * Version: 1.0.0
 */

/* Google Fonts — loaded here so the shortcode grid cards
   inherit the same typefaces as the full single-safari template */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;1,400&family=Inter:wght@400;500;600&display=swap');

/* ── Shortcode grid cards (Kenya style — tta-k-card) ───────── */
/* These classes are already defined in kenya-tours.html but
   are duplicated here so the shortcode works on any page. */
.tta-safari-shortcode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 28px;
}
@media (max-width: 980px) { .tta-safari-shortcode-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tta-safari-shortcode-grid { grid-template-columns: 1fr; } }

/* ── Tanzania page shortcode cards (tta-z-card) ────────────── */
/* Mirror the tta-z-card definitions from tanzania-safaris.html */
.tta-z-card {
    position: relative; border-radius: 6px; overflow: hidden; height: 460px;
    display: flex; flex-direction: column; justify-content: flex-end;
    box-shadow: 0 12px 32px rgba(38,36,32,.12);
    transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.tta-z-card:hover { transform: translateY(-10px); box-shadow: 0 28px 52px rgba(38,36,32,.2); }
.tta-z-card img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 1.1s cubic-bezier(.22,1,.36,1);
    filter: contrast(1.22) saturate(1.12);
}
.tta-z-card:hover img { transform: scale(1.08); }
.tta-z-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(16,18,8,0) 30%, rgba(16,18,8,.96) 100%);
    z-index: 1;
}
.tta-z-card-badge {
    position: absolute; top: 20px; left: 20px; z-index: 2;
    background: rgba(250,248,243,.92); color: #A9895E;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px;
}
.tta-z-card-body { position: relative; z-index: 2; padding: 26px 28px; }
.tta-z-card-dur {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: #C9A661; margin-bottom: 8px;
}
.tta-z-card-title {
    font-family: 'Playfair Display', Georgia, serif; font-size: 23px;
    color: #FDFBF6; margin-bottom: 12px; line-height: 1.22;
}
.tta-z-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; border-top: 1px solid rgba(250,248,243,.2);
}
.tta-z-card-price { font-size: 13px; color: rgba(250,248,243,.78); }
.tta-z-card-price strong { color: #C9A661; font-weight: 500; }
.tta-z-card-link {
    font-size: 11.5px !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; color: #1C1B17 !important;
    background: #C9A661 !important; display: inline-flex !important;
    align-items: center !important; gap: 7px !important;
    padding: 9px 18px !important; border-radius: 999px !important;
    font-weight: 600 !important; white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(184,146,74,.35) !important;
}
.tta-z-card-link:hover { background: #fff !important; color: #A9895E !important; }
.tta-z-card-link:visited { color: #1C1B17 !important; }

/* ── Mobile hero adjustments ───────────────────────────────── */
@media (max-width: 640px) {
    .pkg-hero { height: 72vh; min-height: 480px; }
    .pkg-hero-title { font-size: clamp(26px, 8vw, 42px); }
    .pkg-hero-sub { display: none; }
    .pkg-hero-facts { gap: 18px; }
    .pkg-hero-fact-value { font-size: 15px; }
}

/* ── Accessibility — focus outlines ────────────────────────── */
.tta-pkg-root button:focus-visible,
.tta-pkg-root a:focus-visible {
    outline: 2px solid #C9A661;
    outline-offset: 3px;
}

/* ── Print — hide UI chrome ────────────────────────────────── */
@media print {
    .pkg-sticky-bar,
    .pkg-booking-overlay,
    .pkg-booking-panel,
    .pkg-lightbox { display: none !important; }
}