/* Final responsive layer: preserve the identity and let translated copy determine height. */
@media (max-width: 1320px) {
  .header > #main-nav {
    max-height: calc(100vh - var(--ipama-header-height, 175px) - 12px);
    max-height: calc(100svh - var(--ipama-header-height, 175px) - 12px);
  }

  .header > #main-nav.open {
    align-content: start;
  }
}

@media (min-width: 901px) {
  .hero-film {
    height: clamp(640px, 78svh, 780px);
    min-height: 640px;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hero-film {
    height: clamp(720px, 86svh, 840px);
    min-height: 720px;
  }

  .hero-film__controls {
    gap: 20px;
    flex-wrap: wrap;
  }

  .hero-film__tabs {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  /* Hidden slides stay in this grid cell so the longest translation sets its height. */
  .hero-film {
    --hero-media-height: clamp(220px, 42vw, 340px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    background: #f7f9fa;
  }

  .hero-film .hero-film__slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-width: 0;
    align-self: stretch;
    background: #f7f9fa;
  }

  .hero-film .hero-film__slide video,
  .hero-film .hero-film__slide .hero-film__poster {
    inset: 0 0 auto;
    width: 100%;
    height: var(--hero-media-height);
    object-fit: cover;
    object-position: center;
  }

  .hero-film .hero-film__slide--lecture video,
  .hero-film .hero-film__slide--lecture .hero-film__poster {
    object-position: 75% center;
  }

  .hero-film .hero-film__slide[data-tone="light"]::after {
    background: linear-gradient(180deg, transparent calc(var(--hero-media-height) - 60px), #f7f9fa var(--hero-media-height), #f7f9fa);
  }

  .hero-film .hero-film__slide .hero-film__copy {
    width: auto;
    max-width: none;
    margin: 0 24px;
    padding: calc(var(--hero-media-height) + 18px) 0 24px;
    min-width: 0;
  }

  .hero-film .hero-film__copy .hero-film__kicker {
    margin-bottom: 15px;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
  }

  .hero-film .hero-film__copy h2 {
    max-width: none;
    font-size: clamp(32px, 5.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
  }

  .hero-film .hero-film__copy h2 span {
    display: block;
  }

  .hero-film .hero-film__copy h2 span + span::before {
    content: none;
  }

  .hero-film .hero-film__copy .hero-film__lead {
    max-width: 650px;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  .hero-film .hero-film__copy .hero-film__description {
    max-width: 650px;
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
  }

  .hero-film .hero-film__copy .hero-film__link {
    max-width: 100%;
    min-height: 44px;
    margin-top: 20px;
    padding: 11px 16px;
    gap: 20px;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .hero-film .hero-film__copy .hero-film__link > span {
    flex: 0 0 auto;
  }

  .hero-film .hero-film__controls {
    position: relative;
    inset: auto;
    grid-area: 2 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 24px;
    padding: 0 0 24px;
  }

  .hero-film .hero-film__tabs {
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 12px;
  }

  .hero-film .hero-film__tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    min-height: 54px;
    padding-top: 11px;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .hero-film .hero-film__tab b {
    margin: 0;
    font-size: 10px;
  }

  .hero-film .hero-film__buttons {
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  .hero-film .hero-film__buttons button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }

  .hero-film .hero-film__buttons button.hero-music {
    width: auto;
    min-width: 104px;
    max-width: 100%;
  }

  .director.section-wrap {
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
    gap: 32px;
    align-items: start;
  }

  main.wrap > .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  main.wrap > .hero figure {
    grid-row: 1;
    width: 100%;
    max-width: 280px;
  }

  main.wrap > .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  main.wrap .toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line, #d9e2e9);
  }

  main.wrap .toc a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 800px) {
  .director.section-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .director .director-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .director .director-copy > p:not(.eyebrow):not(.director-role) {
    max-width: none;
  }

  .bond-grid,
  .dog-grid,
  .ipama-books .ipama-books__heading,
  .ipama-books .ipama-books__grid,
  .ipama-vet-library .ipama-vet-library__header,
  .ipama-vet-library .ipama-vet-library__list,
  .ipama-guidance__header,
  .ipama-guidance__questions,
  .ipama-academy-teaser .ipama-academy-teaser__inner,
  .ipama-academy-pathway .ipama-academy-business,
  .ipama-academy-pathway .ipama-academy-support,
  .ipama-academy-pathway .ipama-academy-enquiry {
    grid-template-columns: minmax(0, 1fr);
  }

  .bond-grid,
  .ipama-books .ipama-books__heading,
  .ipama-books .ipama-books__grid,
  .ipama-vet-library .ipama-vet-library__header,
  .ipama-guidance__header,
  .ipama-academy-teaser .ipama-academy-teaser__inner {
    gap: 24px;
  }

  .ipama-vet-library .ipama-vet-library__school h3 {
    word-break: normal;
  }
}

@media (max-width: 540px) {
  .hero-film {
    --hero-media-height: 230px;
  }

  .hero-film .hero-film__copy .hero-film__kicker {
    font-size: 9px;
  }

  .hero-film .hero-film__copy .hero-film__lead {
    font-size: 15px;
  }

  .director .director-image {
    max-width: 300px;
  }

  main.wrap > .hero figure {
    max-width: 230px;
  }
}

@media (min-width: 541px) and (max-width: 760px) {
  main.wrap > .hero figure {
    max-width: 230px;
  }
}

@media (min-width: 1321px) {
  .header { padding-top: 12px; }
}