/* --------------------------------------------------
   HERO SECTION STYLES — FIXED FOR UNIFIED MAGENTA
   Extracted from main.css for modular organization
-------------------------------------------------- */

/* --------------------------------------------------
   COLOR VARIABLES
-------------------------------------------------- */
:root {
    --tppl-bg-deep: radial-gradient(circle at 20% 30%, #2e2250 0%, #0d0a1a 100%);
    --tppl-accent: #d169ff;
    --tppl-accent-pink: #F02E65;
    --tppl-border-light: rgba(163, 96, 242, 0.3);
    --tppl-text-light: #eae6ff;
    --tppl-text-sub: #cfc9f2;
  }
  
  /* Base Hero Container */
  .hero {
    background: var(--tppl-bg-deep);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--tppl-text-light);
    padding: 4rem 1.5rem 3rem;
  }
  
  /* Hero Scroll Container */
  .hero-scroll {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--tppl-bg-deep);
    border-bottom: 2px solid var(--tppl-border-light);
  }
  
  .hero-scroll::-webkit-scrollbar { display: none; }
  
  /* Hero Track */
  .hero-track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hero-track::-webkit-scrollbar { display: none; }
  
  .hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.05rem 1.5rem 1.54rem;
    color: var(--tppl-text-light);
  }
  
  /* Hero Inner Container */
  .hero-inner,
  .hero-inner.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    gap: 2.5rem;
    padding: 0;
  }
  
  /* Hero Content Area */
  .hero-content {
    flex: 1 1 48%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    position: relative;
  }
  
  .hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    color: var(--tppl-accent);
    line-height: 1.3;
  }
  
  .purple-premise {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    line-height: 1.25;
    color: var(--tppl-accent) !important;
    margin-bottom: 0.9rem;
  }
  
  .purple-premise span {
    color: var(--tppl-accent) !important;
    display: inline-block;
  }
  
  .hero-subtext {
    color: var(--tppl-text-sub);
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    line-height: 1.3;
    margin-bottom: 1rem;
    max-width: 440px;
  }
  
  /* Hero CTA Button */
  .cta-btn {
    display: inline-block;
    background: var(--tppl-accent-pink);
    color: #fff;
    padding: 0.8rem 1.6rem;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.25s ease;
  }
  .cta-btn:hover {
    background: #fa5582;
    transform: translateY(-2px);
  }
  
  /* Hero Art/Image Area */
  .hero-art {
    flex: 1 1 48%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .hero-img {
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  }
  
  /* Hero Side-by-Side Layout (Panel 2) */
  .hero-side-by-side .hero-inner-dual {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    padding: 4rem 1.5rem 3rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .hero-side-by-side .mini-hero {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  .hero-side-by-side .mini-hero-content {
    flex: 1 1 50%;
    max-width: 420px;
  }
  .hero-side-by-side .mini-hero-art {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
  }
  .hero-side-by-side .mini-hero img.hero-img {
    width: 100%;
    height: auto;
    max-width: 420px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  }
  .hero-side-by-side .purple-premise.small { font-size: 1.4rem; line-height: 1.25; }
  .hero-side-by-side .hero-subtext.small { font-size: 0.85rem; max-width: 360px; }
  
  /* Hero Mirror Layout (Panel 3) */
  .hero-mirror .hero-inner { flex-direction: row-reverse; }
  
  /* Hero Title & Image Links */
  .hero-title-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: color 0.3s ease;
  }
  .hero-title-link:hover h1 { color: var(--tppl-accent-pink); }
  
  .hero-image-link { display: block; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .hero-image-link:hover { transform: translateY(-4px); }
  .hero-image-link:hover .hero-img { box-shadow: 0 12px 28px rgba(240, 46, 101, 0.4); }
  
  /* --------------------------------------------------
     HERO PANEL 3: SPLIT COLUMNS
  -------------------------------------------------- */
  .hero-split-cards .hero-inner-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
    padding: 4rem 1.5rem 3rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .split-column {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .split-column-header {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: color: #d169ff !important;
    margin: 0 0 1rem 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--tppl-border-light);
    padding-bottom: 0.75rem;
    text-shadow: 0 0 10px rgba(209,105,255,0.25);
  }
  
  /* Horizontal cards */
  .horizontal-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: rgba(36, 28, 62, 0.6);
    border-radius: 10px;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    min-height: 120px;
    max-height: 120px;
  }
  .horizontal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(156, 91, 210, 0.4);
    background: rgba(36, 28, 62, 0.8);
  }
  .card-thumb {
    flex: 0 0 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
  }
  .card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .horizontal-card:hover .card-thumb img { transform: scale(1.05); }
  .card-content { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
  .card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #e7e3ff;
    margin: 0;
    line-height: 1.3;
    transition: color 0.3s ease;
    min-height: 2.6rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .horizontal-card:hover .card-title { color: var(--tppl-accent-pink); }
  
  /* --------------------------------------------------
     RESPONSIVE: HERO SECTION
  -------------------------------------------------- */
  @media (max-width: 992px) {
    .hero-inner,
    .hero-side-by-side .hero-inner-dual {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .hero-content { 
      order: 2; 
      text-align: center; 
    }
    .hero-art { 
      order: 1; 
      justify-content: center; 
      max-width: 90%; 
    }
    .hero-img { 
      max-width: 100%; 
      border-radius: 10px; 
    }
    .hero-side-by-side .mini-hero {
      flex-direction: column;
      text-align: center;
    }
    .hero-side-by-side .mini-hero-content {
      max-width: 100%;
    }
    
    /* Panel 3 Responsive */
    .hero-split-cards .hero-inner-split {
      flex-direction: column;
      gap: 3rem;
    }
    
    .split-column {
      width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .hero-nav-arrow {
      width: 40px;
      height: 40px;
    }
    
    .hero-nav-prev {
      left: 1rem;
    }
    
    .hero-nav-next {
      right: 1rem;
    }
    
    .hero-nav-overlay .hero-dots {
      bottom: 1.5rem;
    }
  }
  
  @media (max-width: 576px) {
    .hero { 
      padding: 3rem 1rem 2.5rem; 
    }
    .hero-subtext { 
      font-size: 0.95rem; 
    }
    .cta-btn { 
      width: 100%; 
      max-width: 320px; 
    }
    
    .hero-nav-arrow {
      display: none;
    }
    
    /* Panel 3 Mobile */
    .horizontal-card {
      flex-direction: column;
      text-align: center;
    }
    
    .card-thumb {
      flex: 0 0 auto;
      width: 100%;
      height: 160px;
    }
  }

  /* --- HARD FIX: Re‑apply magenta to Panel 3 headers --- */
.hero-split-cards .split-column-header,
.hero-split-cards .section-title,
.panel-3 h2,
.panel-3 .section-title {
  color: #d169ff !important;
  text-shadow: 0 0 10px rgba(209,105,255,0.35);
}