/* ============================================
   Landing Page Styles (index.ejs)
   Extracted from inline <style> for SOLID/DRY
   ============================================ */

/* ===============================
   Landing Header
   =============================== */
.booking-header {
   background: white;
   box-shadow: var(--shadow-sm);
   padding: 0.75rem 0;
}

.booking-header .header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.booking-header .nav {
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.booking-header .nav a {
   color: var(--color-text);
   text-decoration: none;
   font-weight: 500;
   font-size: 0.9rem;
   transition: color var(--transition-fast);
}

.booking-header .nav a:hover {
   color: var(--color-primary);
}

.back-to-main {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--color-text-light) !important;
   font-size: 0.85rem !important;
}

.back-to-main:hover {
   color: var(--color-primary) !important;
}

/* Landing header hamburger - uses dark text on white bg */
.booking-header .hamburger {
   color: var(--color-text);
}

/* ===============================
   Hero Section
   =============================== */
.landing-hero {
   background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
   color: white;
   padding: 4rem 0 3rem;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.landing-hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   opacity: 0.5;
}

.landing-hero .container {
   position: relative;
   z-index: 1;
}

.landing-hero h1 {
   font-size: 2.75rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
   color: white;
}

.landing-hero .subtitle {
   font-size: 1.25rem;
   opacity: 0.9;
   margin-bottom: 2rem;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}

.hero-cta-group {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
}

.hero-cta-group .btn-hero {
   padding: 1rem 2.5rem;
   font-size: 1.1rem;
   font-weight: 600;
   border-radius: var(--radius-md);
   text-decoration: none;
   transition: all var(--transition-base);
}

.btn-hero-primary {
   background: var(--color-primary);
   color: white;
   border: 2px solid var(--color-primary);
}

.btn-hero-primary:hover {
   background: var(--color-primary-dark);
   border-color: var(--color-primary-dark);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4);
}

.btn-hero-outline {
   background: transparent;
   color: white;
   border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-hero-outline:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: white;
}

/* ===============================
   Coaching / Pricing Cards
   =============================== */
.coaching-section {
   padding: 4rem 0;
   background: var(--color-bg);
}

.coaching-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
   max-width: 1100px;
   margin: 0 auto;
}

.coaching-card {
   background: white;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: all var(--transition-base);
   position: relative;
}

.coaching-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

.coaching-card.featured {
   border: 2px solid var(--color-primary);
   overflow: visible;
}

.coaching-card.featured .coaching-card-header {
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.coaching-card.featured::before {
   content: "MOST POPULAR";
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--color-primary);
   color: white;
   padding: 0.35rem 1.25rem;
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.5px;
   border-radius: 20px;
   z-index: 10;
   box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
}

.coaching-card-header {
   background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
   color: white;
   padding: 1.5rem;
   text-align: center;
}

.coaching-card.featured .coaching-card-header {
   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.coaching-card-header h3 {
   font-size: 1.5rem;
   margin-bottom: 0.25rem;
   color: white;
}

.coaching-card-header .duration {
   opacity: 0.85;
   font-size: 0.9rem;
}

.coaching-card-price {
   text-align: center;
   padding: 1.5rem;
   border-bottom: 1px solid var(--color-border);
}

.coaching-card-price .amount {
   font-size: 3rem;
   font-weight: 700;
   color: var(--color-secondary);
   line-height: 1;
}

.coaching-card.featured .coaching-card-price .amount {
   color: var(--color-primary);
}

.coaching-card-price .per {
   color: var(--color-text-light);
   font-size: 0.9rem;
}

.coaching-card-body {
   padding: 1.5rem;
}

.coaching-card-body ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.coaching-card-body li {
   padding: 0.6rem 0;
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   color: var(--color-text);
   border-bottom: 1px solid var(--color-border);
}

.coaching-card-body li:last-child {
   border-bottom: none;
}

.coaching-card-body li::before {
   content: "✓";
   color: var(--color-success);
   font-weight: bold;
   flex-shrink: 0;
}

.availability-note {
   margin-top: 1rem;
   padding: 0.75rem;
   background: var(--color-bg);
   border-radius: var(--radius-sm);
   font-size: 0.85rem;
   color: var(--color-text-light);
   line-height: 1.5;
}

.availability-note strong {
   color: var(--color-secondary);
}

.availability-note.recommended {
   background: rgba(196, 30, 58, 0.08);
}

.availability-note.recommended strong {
   color: var(--color-primary);
}

.coaching-card-footer {
   padding: 0 1.5rem 1.5rem;
}

.coaching-card-footer .btn {
   width: 100%;
   padding: 0.875rem;
   font-size: 1rem;
}

/* ===============================
   How It Works (Steps)
   =============================== */
.steps-section {
   padding: 4rem 0;
   background: white;
}

.steps-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   max-width: 900px;
   margin: 0 auto;
   position: relative;
}

.steps-grid::before {
   content: "";
   position: absolute;
   top: 2.5rem;
   left: 15%;
   right: 15%;
   height: 2px;
   background: var(--color-border);
   z-index: 0;
}

.step-item {
   text-align: center;
   position: relative;
   z-index: 1;
}

.step-number {
   width: 5rem;
   height: 5rem;
   border-radius: 50%;
   background: var(--color-secondary);
   color: white;
   font-size: 1.75rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem;
   box-shadow: var(--shadow-md);
}

.step-item h4 {
   font-size: 1.1rem;
   margin-bottom: 0.5rem;
   color: var(--color-secondary);
}

.step-item p {
   color: var(--color-text-light);
   font-size: 0.9rem;
   line-height: 1.5;
}

/* ===============================
   FAQ Section
   =============================== */
.faq-section {
   padding: 4rem 0;
   background: var(--color-bg);
}

.faq-container {
   max-width: 800px;
   margin: 0 auto;
}

.faq-item {
   background: white;
   border-radius: var(--radius-md);
   margin-bottom: 1rem;
   box-shadow: var(--shadow-sm);
   overflow: hidden;
}

.faq-question {
   width: 100%;
   padding: 1.25rem 1.5rem;
   background: none;
   border: none;
   text-align: left;
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-secondary);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: background var(--transition-fast);
}

.faq-question:hover {
   background: var(--color-bg);
}

.faq-question::after {
   content: "+";
   font-size: 1.5rem;
   font-weight: 400;
   color: var(--color-primary);
   transition: transform var(--transition-fast);
   flex-shrink: 0;
   margin-left: 1rem;
}

.faq-item.active .faq-question::after {
   transform: rotate(45deg);
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
}

.faq-answer-inner {
   padding: 0 1.5rem 1.25rem;
   color: var(--color-text);
   line-height: 1.7;
}

.faq-item.active .faq-answer {
   max-height: 500px;
}

/* ===============================
   Final CTA Section
   =============================== */
.final-cta {
   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
   color: white;
   padding: 4rem 0;
   text-align: center;
}

.final-cta h2 {
   color: white;
   font-size: 2rem;
   margin-bottom: 0.75rem;
}

.final-cta p {
   opacity: 0.9;
   margin-bottom: 1.5rem;
   font-size: 1.1rem;
}

.final-cta .btn {
   background: white;
   color: var(--color-primary);
   padding: 1rem 2.5rem;
   font-size: 1.1rem;
   font-weight: 600;
}

.final-cta .btn:hover {
   background: var(--color-bg);
   transform: translateY(-2px);
}

/* ===============================
   Travel Note Banner
   =============================== */
.travel-note {
   background: var(--color-accent-light);
   border-left: 4px solid var(--color-accent);
   padding: 1rem 1.5rem;
   margin-top: 2rem;
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
}

.travel-note-icon {
   font-size: 1.25rem;
}

.travel-note p {
   margin: 0;
   color: var(--color-text);
   font-size: 0.95rem;
}

.travel-note strong {
   color: var(--color-secondary);
}