/* ============================================================
   ODU ACTIVE — PROGRAMS.CSS | Built by Nesture
   ============================================================ */

/* HERO */
.prog-hero {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  padding-top: var(--nav-height); overflow: hidden;
}
.prog-hero__bg { position: absolute; inset: 0; z-index: 0; }
.prog-hero__bg-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  filter: brightness(0.35) saturate(0.6);
}
.prog-hero__bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.2) 0%, rgba(8,8,8,0.85) 100%);
}
.prog-hero__content {
  position: relative; z-index: 2; text-align: center;
  padding: var(--space-16) var(--space-6); max-width: 760px; width: 100%;
}
.prog-hero__eyebrow {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-orange);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.prog-hero__eyebrow::before, .prog-hero__eyebrow::after {
  content: ''; width: 36px; height: 1px; background: var(--color-orange); opacity: 0.6;
}
.prog-hero__heading {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.95;
  letter-spacing: -0.02em; text-transform: uppercase;
  display: flex; flex-direction: column; margin-bottom: var(--space-6);
}
.prog-hero__line { color: var(--color-white); display: block; }
.prog-hero__line--accent { color: var(--color-orange); }
.prog-hero__body {
  font-size: clamp(0.9rem, 1.8vw, 1.05rem); color: var(--color-silver);
  font-weight: var(--fw-light); max-width: 50ch;
  margin: 0 auto var(--space-8); line-height: 1.8;
}
.prog-hero__jump {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); flex-wrap: wrap;
}
.prog-hero__pill {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-silver);
  border: 1px solid var(--color-border); padding: 8px 18px; border-radius: 999px;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.prog-hero__pill:hover { border-color: var(--color-orange); color: var(--color-orange); }

/* PACKAGE SECTIONS */
.pkg-section { border-top: 1px solid var(--color-border); padding: 0; }
.pkg-section__inner { display: grid; min-height: 680px; }
.pkg-section__inner--left  { grid-template-columns: 1fr 1fr; }
.pkg-section__inner--right { grid-template-columns: 1fr 1fr; }

.pkg-section__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-20) var(--space-16);
  background: var(--color-dark); position: relative;
}
.pkg-section__tag {
  position: absolute; top: var(--space-8); left: var(--space-16);
  font-family: var(--font-display); font-size: 0.62rem; font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-black); background: var(--color-orange);
  padding: 4px 14px; border-radius: var(--radius-sm);
}
.pkg-section__heading {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(2.8rem, 5vw, 4.5rem); text-transform: uppercase;
  line-height: 0.95; color: var(--color-white);
  margin: var(--space-4) 0 var(--space-5);
}
.pkg-section__body {
  color: var(--color-silver); font-weight: var(--fw-light);
  font-size: var(--fs-md); line-height: 1.8;
  margin-bottom: var(--space-6); max-width: 50ch;
}

/* FORMAT TABS */
.pkg-format-tabs {
  display: flex; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.pkg-format-tab {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-muted); background: none;
  border: 1px solid var(--color-border);
  padding: 8px 20px; border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--transition-fast);
}
.pkg-format-tab:hover { border-color: var(--color-silver); color: var(--color-silver); }
.pkg-format-tab.active {
  border-color: var(--color-orange); color: var(--color-orange);
  background: var(--color-orange-dim);
}

.pkg-format-panel { display: none; }
.pkg-format-panel.active { display: block; animation: fadeIn 0.3s ease; }

/* DETAILS GRID */
.pkg-section__details {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6);
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border);
}
.pkg-section__detail { display: flex; flex-direction: column; gap: 4px; }
.pkg-section__detail-label {
  font-family: var(--font-display); font-size: 0.62rem; font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted);
}
.pkg-section__detail-value {
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-light); color: var(--color-silver-light);
}
.pkg-section__detail-value--price {
  color: var(--color-orange); font-weight: var(--fw-bold); font-size: var(--fs-md);
}

/* INCLUDES */
.pkg-section__includes-label, .pkg-section__who-label {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-orange); margin-bottom: var(--space-3);
}
.pkg-section__list {
  list-style: none; display: flex; flex-direction: column;
  gap: var(--space-2); margin-bottom: var(--space-6);
}
.pkg-section__list li {
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: var(--fw-light); color: var(--color-silver);
  padding-left: var(--space-5); position: relative;
}
.pkg-section__list li::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 12px; height: 1px; background: var(--color-orange);
}
.pkg-section__who { margin-bottom: var(--space-6); }
.pkg-section__who-body {
  font-size: var(--fs-sm); font-weight: var(--fw-light);
  color: var(--color-silver); line-height: 1.7; max-width: none; margin: 0;
}

/* NOTICE BAR */
.pkg-section__notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: rgba(232,68,10,0.08); border: 1px solid rgba(232,68,10,0.2);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-light);
  color: var(--color-silver); line-height: 1.6; margin-bottom: var(--space-6);
}
.pkg-section__notice svg { color: var(--color-orange); flex-shrink: 0; margin-top: 2px; }

.pkg-section__cta { align-self: flex-start; }

/* IMAGE */
.pkg-section__image-wrap { position: relative; overflow: hidden; }
.pkg-section__image {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.75) saturate(0.7);
  transition: transform 0.8s ease, filter 0.8s ease;
}
.pkg-section__image-wrap:hover .pkg-section__image { transform: scale(1.04); filter: brightness(0.88) saturate(0.85); }
.pkg-section__image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(17,17,17,0.3), transparent);
}
.pkg-section__inner--right .pkg-section__image-overlay {
  background: linear-gradient(to left, rgba(17,17,17,0.3), transparent);
}
.pkg-divider { padding: 0 var(--space-16); background: var(--color-dark); }
.pkg-divider__line { height: 1px; background: var(--color-border); }

/* CANCELLATION POLICY */
.cancellation { border-top: 1px solid var(--color-border); background: var(--color-dark); }
.cancellation__inner {
  display: flex; align-items: flex-start; gap: var(--space-6);
  background: var(--color-panel); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-8);
}
.cancellation__icon { color: var(--color-orange); flex-shrink: 0; margin-top: 4px; }
.cancellation__heading {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  text-transform: uppercase; color: var(--color-white); margin-bottom: var(--space-3);
}
.cancellation__body {
  font-size: var(--fs-sm); font-weight: var(--fw-light);
  color: var(--color-silver); line-height: 1.8; max-width: none; margin: 0;
}

/* WHY */
.why { border-top: 1px solid var(--color-border); }
.why__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); margin-top: var(--space-12); }
.why__item {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8); background: var(--color-panel);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--transition-base);
}
.why__item:hover { border-color: rgba(232,68,10,0.4); }
.why__icon { color: var(--color-orange); }
.why__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); text-transform: uppercase; color: var(--color-white); margin: 0; }
.why__body { font-size: var(--fs-sm); font-weight: var(--fw-light); color: var(--color-silver); line-height: 1.8; margin: 0; max-width: none; }

/* CTA */
.prog-cta { position: relative; border-top: 1px solid var(--color-border); }
.prog-cta__bg { position: absolute; inset: 0; z-index: 0; }
.prog-cta__bg-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.3) saturate(0.5); }
.prog-cta__bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,8,8,0.5), rgba(8,8,8,0.8)); }
.prog-cta__inner { position: relative; z-index: 1; padding-block: var(--space-24); text-align: center; display: flex; flex-direction: column; align-items: center; }
.prog-cta__heading { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-3xl); text-transform: uppercase; line-height: 1.0; margin: var(--space-4) 0 var(--space-5); }
.prog-cta__body { color: var(--color-silver); font-weight: var(--fw-light); font-size: var(--fs-md); max-width: 52ch; line-height: 1.8; text-align: center; margin-bottom: 0; }
.prog-cta__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--space-8); }

/* RESPONSIVE */
@media (max-width: 1024px) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .pkg-section__inner--left, .pkg-section__inner--right { grid-template-columns: 1fr; }
  .pkg-section__image-wrap { min-height: 320px; order: -1; }
  .pkg-section__text { padding: var(--space-12) var(--space-6); }
  .pkg-section__tag { top: var(--space-5); left: var(--space-6); }
  .pkg-section__details { grid-template-columns: 1fr; }
  .pkg-divider { padding: 0 var(--space-6); }
  .why__grid { grid-template-columns: 1fr; }
  .cancellation__inner { flex-direction: column; }
  .prog-cta__actions { flex-direction: column; width: 100%; }
  .prog-cta__actions .btn { width: 100%; justify-content: center; }
}

/* ── NEW PACKAGE TAG VARIANTS ── */
.pkg-section__tag--recommended {
  background: var(--color-orange);
  color: var(--color-black);
}
.pkg-section__tag--elite {
  background: #fff;
  color: #000;
}

/* ── FLOATING CANCELLATION POLICY BUTTON ── */
.float-policy {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  background: rgba(8,8,8,0.92);
  border: 1px solid rgba(232,68,10,0.45);
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,68,10,0.1);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.float-policy svg { color: var(--color-orange, #e8440a); flex-shrink: 0; }
.float-policy:hover {
  border-color: rgba(232,68,10,0.9);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(232,68,10,0.2), 0 0 0 1px rgba(232,68,10,0.25);
}
@media (max-width: 480px) {
  .float-policy span { display: none; }
  .float-policy { padding: 0.75rem; bottom: 1.5rem; right: 1.5rem; }
  .float-policy svg { width: 18px; height: 18px; }
}