/* ==========================================================================
   Shared components for inner public pages
   Theme tokens from assets/css/base/variables.css
   gold #f8c900 · magenta #b02576 · deep purple #5c346c
   Loaded via each page's own <head> alongside the page css file.
   ========================================================================== */

.inner-page {
    overflow-x: hidden;
    color: var(--text-color);
    background: var(--bg-color);
    font-family: var(--font-family-body);
}

.inner-page .container {
    max-width: 1240px;
}

/* ==========================================================================
   SESSION PAGE BODY SPACING
   The post-login header (partials/session-header.php) is a 100px sticky bar
   now instead of a 70px fixed one, so it occupies flow space. The legacy
   .section-padding still carries the old 130px top padding that used to
   clear the fixed bar, which would double the gap above the content on the
   session pages that do not set a pt-xs-* utility.
   Pages that DO set a pt-xs-* keep it: those utilities are !important and
   win here, exactly as they did before. The dashboard is excluded because
   assets/css/pages/dashboard.css sets its own #event padding.
   ========================================================================== */

.session-page:not(.session-page--dashboard) .section-padding {
    padding-top: 40px;
}

/* ==========================================================================
   PAGE HERO (inner pages: about, packages, story, contact, legal)
   ========================================================================== */
.page-hero {
    position: relative;
    background: linear-gradient(135deg, var(--brand-purple) 0%, #7a2a6e 46%, var(--primary-color) 100%);
    color: #fff;
    padding: 40px 0 32px;
    overflow: hidden;
    text-align: center;
}

.page-hero::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--brand-gold-rgb), 0.3) 0%, rgba(var(--brand-gold-rgb), 0) 70%);
}

.page-hero::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 90, 110, 0.22) 0%, rgba(251, 90, 110, 0) 72%);
}

.page-hero .page-hero-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
}

.page-hero .page-hero-badge .fa {
    color: var(--brand-gold);
}

.page-hero h1 {
    position: relative;
    z-index: 2;
    margin: 10px 0 0;
    font-family: 'Playfair Display', var(--font-family-heading);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    color: #fff;
}

.page-hero .page-hero-sub {
    position: relative;
    z-index: 2;
    margin: 6px auto 0;
    max-width: 68ch;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    line-height: 1.45;
}

.page-hero .breadcrumb-line {
    position: relative;
    z-index: 2;
    margin: 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-hero .breadcrumb-line .fa {
    color: var(--brand-gold);
    font-size: 8px;
}

.page-hero .breadcrumb-line a {
    color: #fff;
    text-decoration: none;
}

.page-hero .breadcrumb-line a:hover {
    color: var(--brand-gold);
    text-decoration: none;
}

.page-hero .page-hero-chevron {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    transform: translateX(-50%);
    display: inline-flex;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    animation: heroBounce 2s ease-in-out infinite;
}

.page-hero .page-hero-chevron:hover {
    color: var(--brand-gold);
}

/* ==========================================================================
   SHARED HEADINGS
   ========================================================================== */
.section-head {
    margin-bottom: var(--spacing-5);
}

.section-head--center {
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 2px;
    background: var(--brand-gold);
}

.section-head--center .eyebrow::after {
    content: "";
    display: inline-block;
    width: 34px;
    height: 2px;
    background: var(--brand-gold);
}

.section-title {
    margin: var(--spacing-2) 0 0;
    font-family: 'Playfair Display', var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: var(--line-height-heading);
    color: var(--heading-color);
}

.section-sub {
    margin: var(--spacing-2) 0 0;
    color: var(--text-light);
    font-size: var(--font-size-lg);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    cursor: pointer;
}

.btn-modern:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-gold {
    background: var(--brand-gold);
    color: var(--gold-ink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.btn-gold:hover {
    background: var(--gold-light);
    color: var(--gold-ink);
}

.btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: #fff;
}

.btn-magenta {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.35);
}

.btn-magenta:hover {
    background: var(--primary-dark);
    color: #fff;
}

.btn-outline-purple {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-purple:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ==========================================================================
   MODERN FORM (shared controls)
   ========================================================================== */
.modern-form {
    row-gap: var(--spacing-4);
}

.modern-form .form-label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--heading-color);
    margin-bottom: 6px;
    display: block;
}

.modern-form .form-control,
.modern-form .form-select {
    border: 2px solid var(--border-color-strong);
    border-radius: var(--border-radius-lg);
    padding: 12px 14px;
    font-size: var(--font-size-md);
    color: var(--text-color);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.modern-form .form-control:focus,
.modern-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* ==========================================================================
   STATISTICS (stat cards, dark band)
   ========================================================================== */
.stats-band {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--primary-color) 100%);
    padding: calc(var(--spacing-6) + 24px) 0;
}

.stats-band .row {
    row-gap: var(--spacing-4);
}

.stats-band .section-title,
.stats-band .section-head p {
    color: #fff;
}

.stats-band .section-sub {
    color: rgba(255, 255, 255, 0.85);
}

.stat-card {
    background: #fff;
    border-radius: 20px;
    padding: var(--spacing-4);
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    height: 100%;
    transition: transform var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-6px);
}

.stat-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto var(--spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-gold), var(--gold-light));
    color: var(--gold-ink);
    font-size: 24px;
}

.stat-card h3 {
    font-family: 'Playfair Display', var(--font-family-heading);
    font-weight: 800;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    color: var(--heading-color);
    margin: 0;
}

.stat-card p {
    color: var(--text-light);
    font-weight: 500;
    margin: var(--spacing-1) 0 0;
}

/* ==========================================================================
   WHY US (why cards, light band)
   ========================================================================== */
.why-band {
    padding: calc(var(--spacing-6) + 24px) 0;
}

.why-card {
    background: #fff;
    border-radius: 20px;
    padding: calc(var(--spacing-4) + 6px);
    height: 100%;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.why-card .why-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--bg-gold-tint);
    border: 1px solid rgba(var(--brand-gold-rgb), 0.45);
    color: var(--gold-ink);
    font-size: 22px;
    margin-bottom: var(--spacing-3);
}

.why-card h3 {
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    margin-bottom: var(--spacing-2);
}

.why-card p {
    color: var(--text-light);
    line-height: 1.65;
    margin: 0;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
    background: linear-gradient(120deg, var(--primary-color), var(--brand-purple));
    padding: calc(var(--spacing-5) + 20px) 0;
    color: #fff;
}

.cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.cta-title {
    font-family: 'Playfair Display', var(--font-family-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin: 0;
    max-width: 26ch;
}

/* ==========================================================================
   SCROLL ANIMATIONS (kept from legacy .animate / data-animation)
   ========================================================================== */
.animate {
    opacity: 0;
}

.animate.slide-in-left {
    animation: slideInLeft 0.85s ease forwards;
}

.animate.slide-in-right {
    animation: slideInRight 0.85s ease forwards;
}

.animate.slide-in-up {
    animation: slideInUp 0.85s ease forwards;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .page-hero {
        padding: 34px 0 28px;
    }

    .cta-inner {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .page-hero,
    .stats-band,
    .why-band {
        padding: 30px 0 26px;
    }

    .page-hero h1 {
        font-size: 1.25rem;
    }

    .page-hero .page-hero-sub {
        font-size: 0.76rem;
    }

    .page-hero .breadcrumb-line {
        margin-top: 8px;
        font-size: 0.6rem;
    }

    .cta-band {
        padding: calc(var(--spacing-5) - 8px) 0;
    }

    .stat-card {
        padding: var(--spacing-3);
    }
}

@keyframes heroBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-48px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(48px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}