/*!
 * ============================================================
 * File Path: /assets/css/team.css
 * Purpose: Custom Styles for the Team Page (team.html)
 * Primary Goal: Reduce the height of the main banner section.
 * ============================================================
 */

/* ============================================================
   ROOT VARIABLES
   These variables control the banner's height.
   You can adjust the pixel values here as needed.
   ============================================================ */
:root {
  /* Banner Height Controls */
  --team-banner-height-desktop: 850px; /* Reduced desktop height (was 360px) */
  --team-banner-height-mobile: 200px;  /* Reduced mobile height (was 240px) */

  /* Banner Style Controls */
  --team-banner-overlay-opacity: 0.25; /* Dark overlay for text readability (0.0 to 1.0) */
  --team-banner-content-left: 12%;     /* Horizontal position of the title text */

  /* Color Palette (for consistency) */
  --color-white: #ffffff;
  --color-yellow: #facc15;
}

/* ============================================================
   TEAM PAGE BANNER OVERRIDE
   This section forcefully targets the banner on team.html
   using its specific classes (.breadcumd__banner and
   .banner__section-override) to ensure these styles are applied.
   ============================================================ */
section.breadcumd__banner.overhid {
  /* Background Image Setup */
  background-image:
    linear-gradient(rgba(0,0,0, var(--team-banner-overlay-opacity)), rgba(0,0,0,0.05)),
    url('../img/team/banner.png') !important; /* Make sure this image path is correct */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* --- HEIGHT REDUCTION --- */
  /* This is the primary rule that sets the new, shorter height */
  height: var(--team-banner-height-desktop) !important;
  min-height: 0 !important; /* Prevents other styles from forcing a minimum height */
  max-height: none !important;

  /* Structure and Layout */
  padding-top: 0 !important; /* Removes padding that could add extra height */
  padding-bottom: 0 !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important; /* Use flexbox for robust vertical alignment */
  align-items: center; /* Vertically center the content container */
  justify-content: flex-start; /* Horizontally align content to the left */
}

/* Ensure the inner container does not expand the banner's height */
section.breadcumd__banner.overhid > .container,
section.breadcumd__banner.overhid .breadcumd__wrapper {
  height: auto !important; /* Allow content to size itself naturally within the banner */
  min-height: 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  padding-left: var(--team-banner-content-left); /* Apply horizontal positioning */
  text-align: left;
}

/* Style the "Team" Title */
section.breadcumd__banner.overhid .breadcumd__wrapper h1.left__content {
  color: var(--color-white) !important;
  font-size: 58px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin: 0 0 8px 0 !important;
}

/* Style the "Home > Team" Breadcrumb Links */
section.breadcumd__banner.overhid .breadcumd__wrapper ul.right__content {
  color: var(--color-yellow) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   MOBILE RESPONSIVE STYLES
   Adjusts the banner for smaller screens (like phones).
   ============================================================ */
@media (max-width: 991px) {
  section.breadcumd__banner.overhid {
    /* Apply the shorter mobile height */
    height: var(--team-banner-height-mobile) !important;
    align-items: center; /* Keep content centered */
    justify-content: center; /* Center align on mobile */
  }

  /* Center the text content on mobile */
  section.breadcumd__banner.overhid > .container,
  section.breadcumd__banner.overhid .breadcumd__wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
    text-align: center !important; /* Center align text */
  }

  /* Reduce font size for smaller screens */
  section.breadcumd__banner.overhid .breadcumd__wrapper h1.left__content {
    font-size: 42px !important;
  }

  section.breadcumd__banner.overhid .breadcumd__wrapper ul.right__content {
    font-size: 16px !important;
    justify-content: center; /* Ensure breadcrumb items are centered */
  }
}