/* ==========================================================================
   _photocards.css - PhotoCards component styles (extracted from styles.css
   and NewHomepage.css). Phase 3 (see scripts/move-photocards-css.mjs).
   Loaded in _document.tsx immediately after styles.css.
   Page-specific pc- overrides live in page CSS files and load later.
   ========================================================================== */

.pc-Content {
  grid-row: 1/3;
  grid-column: 1/2;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 25px;
  z-index: 1;
  align-items: center;
  text-align: center;
}

.pc-Grid .pc-Heading {
  font-size: clamp(2rem, 1.9048rem + 0.4762vw, 2.1875rem);
}

 .pc-Grid .pc-Image .pablo-image {
    width: 100%;
  }

.pc-Grid .pc-Image img {
  width: 125%;
  height: auto;
  object-fit: unset;
  max-width: unset;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.pc-Grid .pc-Image:after {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(247, 247, 247, 0.95), transparent);
}

.pc-Grid .pc-PhotoCard {
  max-height: 500px;
  aspect-ratio: unset;
  min-height: 400px;
}

.pc-Grid .pc-PhotoCard:nth-child(n) .pc-Content {
  align-items: center;
  text-align: center;
}

.pc-Grid .pc-PhotoCard:nth-child(n+5) {
  display: none;
}

.pc-Grid .pc-SubHeading {
  font-size: clamp(0.9375rem, 0.8105rem + 0.6349vw, 1.1875rem);
}

.pc-Grid .pc-Text {
  display: none;
}

.pc-Grid .ui-PlayButtonGreen {
  margin-top: auto;
}

.pc-Heading {
  font-family: AvenirNext-Bold;
  font-size: clamp(2rem, 1.2698rem + 3.6508vw, 3.4375rem);
  color: #282828;
}

.pc-Image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  visibility: visible;
}

.pc-Image {
  position: relative;
  grid-row: 1/3;
  grid-column: 1/2;
}

.pc-PhotoCard .ui-PlayButtonGreen {
  position: relative;
  z-index: 1;
  font-size: clamp(1rem, 0.873rem + 0.6349vw, 1.25rem);
}

.pc-PhotoCard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-decoration: none;
  grid-template-rows: auto 1fr;
  aspect-ratio: 350/525;
  width: 100%;
  height: 100%;
  min-height: 525px;
  max-height: 700px;
}

.pc-PhotoCard:hover .ui-PlayButtonGreen {
  background-color: #00bb89;
}

.pc-PhotoCardVariant .pc-Heading {
  font-size: clamp(1.75rem, 1.5278rem + 1.1111vw, 2.1875rem);
  margin-bottom: 15px;
}

.pc-PhotoCardVariant .pc-Text {
  font-size: clamp(1.0625rem, 0.9038rem + 0.7937vw, 1.375rem);
  line-height: 1.4375;
}

.pc-PhotoCards {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-rows: auto;
  place-items: center;
  gap: 30px;
  width: 100%;
  width: calc(100% - 30px);
  max-width: 1100px;
  margin-top: 45px;
  margin-bottom: 45px;
}

.pc-SubHeading {
  font-family: AvenirNext-Medium;
  font-size: clamp(0.9375rem, 0.7153rem + 1.1111vw, 1.375rem);
  color: #282828;
  margin-bottom: 1.25rem;
}

.pc-Text {
  font-family: AvenirNext-Regular;
  font-size: clamp(1.1875rem, 0.997rem + 0.9524vw, 1.5625rem);
  color: #282828;
  margin-bottom: 0;
}

[data-page="Who We Are"] .pc-PhotoCard .ui-PlayButtonGreen, [data-page=Graduates] .pc-PhotoCard .ui-PlayButtonGreen, [data-page=Academy] .pc-PhotoCard .ui-PlayButtonGreen, [data-page=Academies] .pc-PhotoCard .ui-PlayButtonGreen {
  position: absolute;
  bottom: 30px;
  margin-top: 0;
}

@media (max-width: 767px) {
    .pc-Image {
      width: 125%;
      height: 100%;
      object-fit: unset;
      max-width: unset;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
    }
}

@media (max-width: 767px) {
    .pc-Image:after {
      display: block;
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      width: 100%;
      height: 63%;
      background: linear-gradient(to bottom, rgba(247, 247, 247, 0.95), transparent);
    }
}

@media (max-width: 767px) {
  .pc-PhotoCard .ui-PlayButtonGreen {
    margin-top: auto;
  }
}

@media (min-width: 1300px) {
  .pc-PhotoCards:not(.pc-Grid) .pc-Content {
    padding: 40px;
  }
}

@media (min-width: 600px) {
  .pc-PhotoCards.pc-Grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    max-width: 830px;
  }
}

@media (min-width: 768px) {
  .left .pc-Content {
    align-items: start;
    text-align: left;
  }
}

@media (min-width: 768px) {
  .pc-Content {
    grid-row: 1/3;
  }
}

@media (min-width: 768px) {
    .pc-Grid .pc-Image:after {
      display: none;
    }
}

@media (min-width: 768px) {
  .pc-Heading {
    max-width: 400px;
  }
}

@media (min-width: 768px) {
  .pc-Image:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 100deg, rgba(247, 247, 247, 0.95) 30%, rgba(247, 247, 247, 0.75) 35%, transparent 45% );
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .pc-PhotoCard {
    aspect-ratio: 1100/675;
    max-height: 675px;
    border-radius: 20px;
  }
}

@media (min-width: 768px) {
  .pc-PhotoCardVariant .pc-Heading {
    margin-bottom: 30px;
  }
}

@media (min-width: 768px) {
  .pc-SubHeading {
    margin-bottom: 75px;
    max-width: 350px;
  }
}

@media (min-width: 768px) {
  .pc-Text {
    margin-bottom: 45px;
    max-width: 350px;
  }
}

@media (min-width: 768px) {
  .right .pc-Content {
    align-items: end;
    text-align: right;
  }
}

@media (min-width: 768px) {
  .right .pc-Image:after {
    transform: scaleX(-1);
  }
}

@media (min-width: 768px) {
    [data-page="Who We Are"] .pc-PhotoCard .ui-PlayButtonGreen, [data-page=Graduates] .pc-PhotoCard .ui-PlayButtonGreen, [data-page=Academy] .pc-PhotoCard .ui-PlayButtonGreen, [data-page=Academies] .pc-PhotoCard .ui-PlayButtonGreen {
      position: relative;
      bottom: unset;
    }
}

@media (min-width: 768px) {
    [data-page=Benefits] .pc-PhotoCard {
      aspect-ratio: 1100/735;
      max-height: 735px;
    }
}

.pc-Grid .pc-PhotoCard:nth-child(n + 5) {
  display: none;
}

.pc-PhotoCardVariant .pc-PhotoCard {
  max-width: inherit;
  max-height: 600px;
}

.pc-PhotoCards.pc-Grid .pc-Content {
  grid-row: 1/3;
}

.pc-PhotoCards.pc-PhotoCardVariant {
  max-width: 950px;
}

[data-page='Benefits'] .pc-PhotoCard,
[data-page='Teams'] .pc-PhotoCard,
[data-page='Who We Are'] .pc-PhotoCard,
[data-page='Graduates'] .pc-PhotoCard {
  aspect-ratio: unset;
  max-height: unset;
}

[data-page='Who We Are'] .pc-PhotoCard .ui-PlayButtonGreen,
[data-page='Graduates'] .pc-PhotoCard .ui-PlayButtonGreen,
[data-page='Academy'] .pc-PhotoCard .ui-PlayButtonGreen,
[data-page='Academies'] .pc-PhotoCard .ui-PlayButtonGreen {
  position: absolute;
  bottom: 30px;
  margin-top: 0;
}

@media (max-width: 767px) {
    [data-page='Who We Are'] .pc-Image,
    [data-page='Benefits'] .pc-Image,
    [data-page='Teams'] .pc-Image,
    [data-page='Graduates'] .pc-Image {
      grid-row: 2/3;
    }
}

@media (max-width: 767px) {
    [data-page='Who We Are'] .pc-Image:after,
    [data-page='Benefits'] .pc-Image:after,
    [data-page='Teams'] .pc-Image:after,
    [data-page='Graduates'] .pc-Image:after {
      display: block;
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      width: 100%;
      height: 25px;
      background: linear-gradient(
        to bottom,
        rgba(247, 247, 247, 0.95),
        transparent
      );
      border-radius: 10px 10px 0 0;
    }
}

@media (min-width: 1024px) {
    .pc-Text {
      font-size: 1.5625rem; /* 25px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .pc-Text {
      font-size: 1.4541rem; /* 23.2664px */
    }
}

@media (min-width: 768px) {
    .pc-Image {
      grid-row: 1/3;
    }
}

@media (min-width: 768px) {
    .pc-PhotoCardVariant .pc-PhotoCard {
      aspect-ratio: 950/600;
      max-height: 600px;
    }
}

@media (min-width: 768px) {
    [data-page='Who We Are'] .pc-PhotoCard .ui-PlayButtonGreen,
    [data-page='Graduates'] .pc-PhotoCard .ui-PlayButtonGreen,
    [data-page='Academy'] .pc-PhotoCard .ui-PlayButtonGreen,
    [data-page='Academies'] .pc-PhotoCard .ui-PlayButtonGreen {
      position: relative;
      bottom: unset;
    }
}