/* Committees */
/* Main grid container */
.psrc-header-grid-container {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 32/9;
  background-color: #E3E3E3;
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
  margin: -13px 0 0 0;
  overflow: hidden;
  z-index: 1; /* Lowest layer */
}

/* Placeholder image */
img.psrc-header-grid-placeholder {
  overflow-x: hidden;
}

/* Left-aligned image container (middle layer) */
.psrc-header-grid-image-container {
  position: absolute;
  left: -30.5%;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 2; /* Middle layer */
}

.psrc-header-grid-image-container svg {
  width: 100%; /* Adjusts width automatically */
  height: auto; /* Maintains aspect ratio */
}

/* Text wrapper */
.psrc-header-grid-text-wrapper {
  display: flex;
  align-items: stretch; /* Ensures both elements stay the same height */
  position: absolute;
  left: 0;
  top: 48%;
  transform: translateY(-48%);
  width: 100%;
  z-index: 3;
}

/* Text container */
.psrc-header-grid-text-container {
  position: relative; /* For the pseudo-element positioning */
  background-color: #E20C10;
  color: white;
  padding: 20px;
  width: auto;
  min-width: 45%;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  filter: drop-shadow(6px 6px 8px rgba(0,0,0,0.5));
  line-height: 1;
}

/* Red Triangle (only CSS, no JS) */
.psrc-header-grid-text-container::after {
  content: "";
  position: absolute;
  left: 99.90%;  /* Puts the triangle on the right */
  top: 0;
  height: 100%; /* Matches the text container’s height */
  aspect-ratio: 78.13 / 110; /* Maintains the triangle's original proportions */
  width: auto; /* Width scales automatically based on the container's height */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78.13 110'%3E%3Cpolygon fill='%23E20D11' points='78.13 110 0 110 0 0 .1 0 78.13 110'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
}

/* Mobile Text Container */
.psrc-header-grid-text-wrapper-mobile {
  display: none;
}

.psrc-header-grid-container h1.page-title, .psrc-header-grid-text-wrapper-mobile h1.page-title {
  font-family: futura-pt-bold, sans-serif;
  font-size: clamp(1.8rem, 1.9vw + 1rem, 4.375rem);
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.psrc-header-grid-title-desc {
  font-family: futura-pt, sans-serif;
  font-size: clamp(.75rem, 1vw + 1rem, 1.875rem);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: none;
  padding: 0 0 10px;
}

@media screen and (min-width: 1921px) {
  .sub-menu-wrapper {
    top: -25px;
  }
}

/* Responsive styles for screens smaller than 1024px */
@media screen and (max-width: 1024px) {
  .psrc-header-grid-text-wrapper,
  .psrc-header-grid-text-container {
    display: none;
  }
  .psrc-header-grid-text-wrapper-mobile h1.page-title {
    line-height: 1; /* Adjust this value as needed */
    margin: 0;
    text-transform: uppercase;
  }
  .psrc-header-grid-image-container {
    display: none;
  }
    .psrc-header-grid-container {
    background-size: cover;
    height: 30vh;
  }
  .psrc-header-grid-text-wrapper-mobile {
    display: block;
    background-color: #E20C10;
    color: white;
    padding: 20px;
  }
  
}

@media screen and (min-width: 1700px) {
  .psrc-header-grid-container {
    max-height: 500px; /* took up too much space on a bigger monitor */
    background-size: 72.5% auto;
   /* background-size: cover; - I tried this but it was way too big and canceled out the other styles for scaling*/
  }
}

@media screen and (max-width: 390px) {
  .psrc-header-grid-title-desc {
    font-size: 1rem;
  }
  
  .psrc-header-grid-text-wrapper-mobile h1.page-title {
  font-family: futura-pt-bold, sans-serif;
  font-size: 1.5rem;
  }

}