/* V25 — approved photography, complete video frames and quieter ornaments.
   Load after the existing shared and component stylesheets. */

:root {
  --media-shadow: 0 0.45rem 1.25rem rgb(0 14 62 / 7%);
  --media-shadow-dark: 0 0.65rem 1.8rem rgb(0 0 0 / 15%);
}

/* The official course covers already contain their APM blue treatment. */
.course-card[data-category] .course-card-media img {
  filter: saturate(0.88) contrast(1.02) brightness(1.04);
}

.course-card[data-category] .course-card-media img[src*="/courses-official/"] {
  filter: saturate(0.92) contrast(1.02) brightness(1.14);
}

.course-card[data-category] .course-card-media::after {
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgb(0 7 33 / 34%));
}

.course-card[data-category="workshops"] .course-card-media::after {
  inset: 0;
  background:
    linear-gradient(125deg, rgb(0 12 215 / 46%) 0%, rgb(0 23 166 / 42%) 55%, rgb(0 14 103 / 45%) 100%),
    linear-gradient(180deg, transparent 42%, rgb(0 7 33 / 55%));
}

.course-card[data-course="agulhamento"] .course-card-media img[src] {
  object-position: 49% 43%;
  filter: saturate(0.92) contrast(1.02) brightness(1.26);
}

.course-card[data-category] .course-card-symbol {
  border-color: rgb(255 255 255 / 25%);
  box-shadow: none;
}

.course-card[data-category="workshops"] .course-card-symbol {
  background: rgb(0 7 33 / 76%);
  color: var(--brand-yellow-500);
}

.course-card-category {
  box-shadow: none;
}

.page-hero--with-photo .page-hero-art--photo[data-art] > img {
  object-position: 50% 12%;
  filter: saturate(0.93) contrast(1.02) brightness(1);
}

.catalog-page .page-hero-art--photo[data-art] > img {
  object-position: 50% 8%;
}

.units-page .page-hero-art--photo[data-art] > img,
.unit-page .page-hero-art--photo[data-art] > img {
  object-position: 50% 5%;
}

.about-page .page-hero-art--photo[data-art] > img {
  object-position: 50% 12%;
}

.home-hero--visual-v2 .home-hero-image-frame img {
  object-position: 62% 25%;
  filter: saturate(0.94) contrast(1.02);
}

.course-page .course-summary .course-summary-art img {
  object-position: 50% 43%;
  filter: saturate(0.9) contrast(1.02) brightness(1.04);
}

.course-page .course-summary .course-summary-art img[src*="/courses-official/"] {
  filter: saturate(0.94) contrast(1.02) brightness(1.2);
}

.course-theme--agulhamento .course-summary .course-summary-art img[src] {
  object-position: 49% 43%;
  filter: saturate(0.94) contrast(1.02) brightness(1.28);
}

.home-hero .hero-proof--one,
.home-hero .hero-proof--two,
.page-hero--with-photo .page-hero-photo-label,
.course-page .course-summary-body {
  box-shadow: var(--media-shadow-dark);
}

.course-hero-symbol {
  box-shadow: none;
}

@media (min-width: 60rem) {
  /* Size the photograph from hero height so ultrawide screens keep faces
     and the shared activity visible instead of enlarging a narrow crop. */
  .home-hero--visual-v2::before {
    --home-photo-right-inset: max(0rem, calc((100vw - var(--container)) / 2 - 6rem));
    background-image:
      linear-gradient(90deg, #000721 0%, rgb(0 7 33 / 98%) 29%, rgb(0 7 33 / 86%) 46%, rgb(0 7 33 / 31%) 66%, rgb(0 7 33 / 6%) 100%),
      linear-gradient(0deg, rgb(0 7 33 / 59%) 0%, transparent 44%),
      url("/assets/images/hero/home-cover-v2.webp");
    background-size: cover, cover, auto 140%;
    background-position: center, center, right var(--home-photo-right-inset) top;
    background-repeat: no-repeat;
    /* Fade before the actual edge of the height-sized photo, including when
       its right edge sits inside the viewport on an ultrawide screen. */
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--home-photo-right-inset) - 8rem), transparent calc(100% - var(--home-photo-right-inset)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--home-photo-right-inset) - 8rem), transparent calc(100% - var(--home-photo-right-inset)), transparent 100%);
  }

  .page-hero--with-photo .page-hero-art--photo[data-art]::after {
    background:
      linear-gradient(90deg, #000721 0%, rgb(0 7 33 / 96%) 14%, rgb(0 7 33 / 74%) 35%, rgb(0 7 33 / 12%) 67%, transparent 100%),
      linear-gradient(0deg, rgb(0 7 33 / 46%) 0%, transparent 48%);
  }

  .course-page .course-summary .course-summary-art::after {
    background:
      linear-gradient(90deg, #000721 0%, rgb(0 7 33 / 97%) 16%, rgb(0 7 33 / 81%) 35%, rgb(0 7 33 / 34%) 57%, rgb(0 7 33 / 4%) 80%, transparent 100%),
      linear-gradient(0deg, rgb(0 7 33 / 36%) 0%, transparent 48%);
  }

  .course-page .course-summary-body {
    background: rgb(0 7 33 / 79%);
    backdrop-filter: blur(12px);
  }
}

@media (max-width: 59.99rem) {
  .home-hero--visual-v2 .home-hero-image-frame::after {
    background:
      linear-gradient(180deg, rgb(0 7 33 / 18%) 0%, transparent 24%),
      linear-gradient(0deg, rgb(0 7 33 / 25%) 0%, transparent 46%);
  }

  .page-hero--with-photo .page-hero-art--photo[data-art]::after,
  .course-page .course-summary .course-summary-art::after {
    background: linear-gradient(0deg, rgb(0 7 33 / 36%) 0%, transparent 54%);
  }
}

/* Preserve original faces, classroom context and supplied portrait footage. */
.media-card,
.institutional-photo-card,
.approved-card,
.unit-social-card,
.testimonial-card,
.client-feedback__card,
.course-environment-grid figure,
.course-coordinator-video__media video {
  box-shadow: var(--media-shadow);
}

.institutional-photo-card img {
  object-position: 50% 35%;
  filter: saturate(0.94) contrast(1.02);
}

.institutional-photo-card::after {
  background: linear-gradient(180deg, transparent 53%, rgb(0 7 33 / 76%));
}

.institutional-photo-card figcaption span {
  background: rgb(0 7 33 / 75%);
  backdrop-filter: none;
}

.course-environment-grid--portraits img {
  object-fit: contain;
  object-position: center;
}

.media-frame video,
.media-frame iframe,
.media-frame .media-poster,
.course-coordinator-video__media video {
  object-fit: contain;
}

.media-card--portrait .media-frame {
  height: clamp(17rem, 24vw, 21.5rem);
}

.media-caption {
  padding: clamp(1rem, 1.5vw, 1.2rem);
}

.media-play {
  background: linear-gradient(180deg, transparent 50%, rgb(0 7 33 / 34%));
}

.course-coordinator-video__layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 14.0625rem);
}

.course-coordinator-video__media {
  width: min(100%, 14.0625rem);
  max-width: 14.0625rem;
}

.course-coordinator-video__media video {
  height: auto;
  max-height: 25rem;
}

.client-feedback__card {
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  border-top-width: 2px;
}

.client-feedback__quote-mark {
  height: 1.5rem;
  font-size: 2.75rem;
}

/* These pseudo-elements are decorative; course data, status and CTAs remain. */
.section--intro::before,
.section--mist::before,
.section--editorial::before,
.section-heading .eyebrow::after,
.feature-card::after,
.feature-icon::after,
.unit-card::after,
.course-card-body::after,
.course-coordinator-card::after,
.blog-card-art::before,
.home-hero-copy::after,
.home-hero-visual::before,
.home-hero-visual::after,
.button::before {
  content: none;
}

.home-hero--visual-v2::after {
  display: none;
}

.course-hero::before,
.page-hero:not(.page-hero--with-photo)::before {
  opacity: 0.28;
}

.featured-courses-section {
  background:
    radial-gradient(circle at 92% 12%, rgb(0 12 215 / 4%), transparent 27rem),
    var(--brand-blue-050);
}

.institutional-gallery-section,
.unit-social-section {
  background: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
  .course-card[data-category]:hover .course-card-media img {
    filter: saturate(0.94) contrast(1.02) brightness(1.07);
  }

  .course-card[data-category]:hover .course-card-media img[src*="/courses-official/"] {
    filter: saturate(0.96) contrast(1.02) brightness(1.17);
  }

  .course-card[data-course="agulhamento"]:hover .course-card-media img[src] {
    filter: saturate(0.96) contrast(1.02) brightness(1.29);
  }

  .institutional-photo-card:hover img,
  .unit-social-card:hover img {
    transform: scale(1.015);
    filter: saturate(0.98) contrast(1.02);
  }
}

@media (max-width: 42rem) {
  .course-coordinator-video__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Compact course presentations: 400px desktop, 360px mobile; keep 9:16. */
@media (max-width: 42rem) {
  .course-coordinator-video__media {
    width: min(100%, 12.65625rem);
    max-width: 12.65625rem;
  }
  .course-coordinator-video__media video {
    max-height: 22.5rem;
  }
}