/*********************************************
  EXPERIENCES PAGE STYLES
**********************************************/

/* HERO SECTION */
.experiences-hero {
    position: relative;
    height: 80vh;
    overflow: hidden;
  }
  .experiences-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .experiences-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 1rem;
  }
  .experiences-hero-overlay h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  .experiences-hero-overlay p {
    font-size: 1.2rem;
  }
  
  /* OVERVIEW SECTION */
  .experiences-overview {
    padding: 2rem 5%;
    background: #fff;
    text-align: left;
  }
  .experiences-overview h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--brown);
  }
  .experiences-overview p {
    max-width: 900px;
    margin: 0 auto 1rem auto;
    line-height: 1.8;
  }
  
  /* SELECTED EXPERIENCES (2-column layout) */
  .selected-experiences {
    padding: 2rem 5%;
    background: var(--beige);
  }
  .selected-experiences h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--brown);
  }
  
  /* Each experience item: 2 columns -> photo left, text right */
  .exp-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .exp-photo-col {
    flex: 1 1 400px;
    order: 1; /* photo first on wide screens */
  }
  .exp-photo {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
  }
  
  .exp-info-col {
    flex: 1 1 600px;
    order: 2;
    text-align: left;
  }
  .exp-info-col h3 a {
    color: var(--brown);
    text-decoration: underline;
    font-weight: 600;
  }
  .exp-info-col p {
    line-height: 1.8;
    margin-bottom: 1rem;
  }
  
  /* "Discover More" / CTA button for experiences */
  .exp-discover-btn {
    display: inline-block;
    background: var(--brown);
    color: #fff;
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s, transform 0.3s;
  }
  .exp-discover-btn:hover {
    background: var(--burnt-orange);
    transform: translateY(-2px);
  }
  
  /* FINAL CTA BANNER */
  .final-cta-banner {
    background: var(--sunset-gradient);
    color: #fff;
    padding: 2rem 5%;
    text-align: center;
  }
  .final-cta-content {
    max-width: 800px;
    margin: 0 auto;
  }
  .final-cta-content h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff;
  }
  .final-cta-content p {
    margin-bottom: 2rem;
    font-size: 1.2rem;
    line-height: 1.8;
  }
  .cta-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
    white-space: nowrap;
  }
  
  /* RESPONSIVE */
  @media (max-width: 768px) {
    .experiences-overview p,
    .selected-experiences p {
      margin: 0 1rem 1rem 1rem;
    }
  
    .exp-item {
      flex-direction: column; /* stack photo + text */
    }
    .exp-photo-col,
    .exp-info-col {
      order: unset; /* default order on small screens */
      flex: 1 1 auto;
    }
  }