/*
 * Canonical responsive system.
 *
 * The route styles keep the approved desktop/mobile Figma geometry.  This
 * layer owns the responsive contract between those endpoints: intrinsic
 * sizing, container-aware rails, safe-area gutters, and overflow boundaries.
 * It is loaded after route styles so one rule has one final owner.
 */

:root {
  --iel-responsive-min-width: 320px;
  --iel-responsive-content-max: 1267px;
  --iel-responsive-gutter: clamp(1.25rem, 4vw, 3rem);
  --iel-responsive-gutter-tablet: clamp(1.5rem, 4vw, 3rem);
  --iel-responsive-gutter-mobile: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --iel-responsive-card-min: 320px;
  --iel-responsive-rail-gap: clamp(1rem, 2.15vw, 2.625rem);
  --iel-responsive-radius: clamp(1.25rem, 1.56vw, 1.875rem);
  --iel-responsive-tap-target: 44px;
  --iel-responsive-control-size: clamp(2.75rem, 3vw, 3.25rem);
  --iel-responsive-rail-extension: 25px;
}

html {
  min-width: var(--iel-responsive-min-width);
}

body {
  min-width: var(--iel-responsive-min-width);
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body {
    overflow-x: hidden;
  }
}

:where(
  body > main,
  main.iel-home,
  main.center-page,
  main.team-directory,
  main.team-profile,
  main.case-study-directory,
  main.case-study-detail,
  main.iel-publication,
  main.consultation-request-main,
  main.error-404,
  main.site-search-page,
  .site-footer
) {
  min-inline-size: 0;
  overflow-x: clip;
}

/* The compact navigation is an absolutely positioned child of the fixed
 * header.  Keep the panel outside the pill's vertical bounds hit-testable;
 * horizontal overflow is already constrained by its own width and viewport.
 */
.site-header {
  min-inline-size: 0;
  overflow: visible;
}

:where(
  main.iel-home,
  main.center-page,
  main.team-directory,
  main.team-profile,
  main.case-study-directory,
  main.case-study-detail,
  main.iel-publication,
  main.consultation-request-main,
  main.error-404,
  main.site-search-page
) {
  container-type: inline-size;
  container-name: route-shell;
}

/* Keep the homepage's existing intermediate component names available while
 * exposing the shared route-shell contract to all public pages. */
.iel-home {
  container-name: route-shell home-shell;
}

:where(
  main > section,
  main article,
  main .upper-wrap,
  main .lower-wrap,
  main .lower-narrow,
  main .center-wrap,
  main .publication-content,
  main .publication-article,
  main .case-study-detail-article,
  main .case-study-detail-section,
  main .team-member-profile-container,
  main .site-search-results,
  main .consultation-request-card
) {
  min-inline-size: 0;
}

:where(
  main h1,
  main h2,
  main h3,
  main h4,
  main p,
  main li,
  main a,
  main button,
  main summary,
  main .iel-design-copy,
  main .publication-article-body,
  main .case-study-body,
  main .consultation-request-description,
  .site-footer h2,
  .site-footer p,
  .site-footer li,
  .site-footer a
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: break-word;
}

:where(
  main .publication-article-body,
  main .case-study-body,
  main .consultation-request-description,
  main .directory-team-member-copy,
  main .team-member-profile-list,
  main .lower-case-study-body,
  main .site-search-excerpt
) {
  overflow-wrap: anywhere;
}

/* Shared frame widths.  Endpoint styles may still refine the authored crop. */
:where(
  .upper-wrap,
  .lower-wrap,
  .lower-narrow,
  .center-wrap,
  .case-study-wrap,
  .team-hero-copy,
  .team-group,
  .case-study-detail-article,
  .case-study-detail-section,
  .publication-content,
  .lower-address
) {
  min-inline-size: 0;
}

/* Every horizontal scrollport gets a clipped vertical axis. */
:where(
  .upper-profile-track,
  .lower-review-track,
  .lower-card-track,
  .lower-location-track,
  .center-intro-track,
  .team-group-psychologists .team-list,
  .publication-article-body table,
  .publication-article-body pre
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-y: clip;
  overscroll-behavior-inline: contain;
}

:where(
  .upper-profile-track,
  .lower-review-track,
  .lower-card-track,
  .lower-location-track,
  .center-intro-track,
  .team-group-psychologists .team-list
) {
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

:where([data-role='rail'], [data-role='collection'], [data-role='form-shell']) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where([data-role='controls'], [data-role='menu-toggle']) {
  min-inline-size: 0;
}

:where(
  .upper-profile-track::-webkit-scrollbar,
  .lower-review-track::-webkit-scrollbar,
  .lower-card-track::-webkit-scrollbar,
  .lower-location-track::-webkit-scrollbar,
  .center-intro-track::-webkit-scrollbar,
  .center-video-track::-webkit-scrollbar,
  .team-list::-webkit-scrollbar
) {
  display: none;
}

:where(
  .upper-profile,
  .lower-review,
  .lower-editorial,
  .center-intro-card,
  .center-video-card,
  .directory-member,
  .directory-case,
  .publication-card,
  .site-search-result,
  .case-study-document-card
) {
  min-inline-size: 0;
}

:where(
  .upper-profile img,
  .lower-editorial-image,
  .center-intro-media img,
  .center-video-image,
  .directory-team-member-image img,
  .publication-card-image img,
  .case-study-document-image img,
  .lower-location-track > img,
  .lower-map
) {
  max-inline-size: 100%;
}

/* The header switches by measured content width.  JS keeps data-nav-compact
 * as the authoritative fallback when a long CMS label needs more room. */
.site-header {
  container-type: inline-size;
  container-name: site-header;
  min-inline-size: 0;
}

.site-header .primary-navigation,
.site-header .primary-menu,
.site-header .header-official,
.site-header .header-search,
.site-header .site-brand {
  min-inline-size: 0;
}

.site-header .primary-menu {
  max-inline-size: 100%;
}

.site-header .primary-navigation a,
.site-header .primary-menu a,
.site-header .header-official {
  max-inline-size: 100%;
  overflow-wrap: normal;
}

@container site-header (max-width: 719px) {
  .site-header .primary-navigation:not(.is-open):not(.is-closing) {
    display: none;
  }

  .site-header .menu-toggle {
    display: block;
    min-inline-size: var(--iel-responsive-tap-target);
    min-block-size: var(--iel-responsive-tap-target);
  }
}

@media (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .site-header .menu-toggle {
    display: block;
    min-inline-size: var(--iel-responsive-tap-target);
    min-block-size: var(--iel-responsive-tap-target);
  }

  .site-header .primary-navigation:not(.is-open):not(.is-closing) {
    display: none;
  }
}

@container site-header (min-width: 720px) {
  .site-header:not([data-nav-compact='true']) .menu-toggle {
    display: none;
  }
}

/* A coarse WebView is mobile even when its layout viewport is wide.  Keep
 * this fallback after the measured desktop rule so the menu remains usable
 * before the resize observer has classified the header. */
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .site-header .menu-toggle {
    display: block !important;
  }

  .site-header .primary-navigation:not(.is-open):not(.is-closing) {
    display: none !important;
  }
}

/*
 * Mobile header contract.
 *
 * Keep the pill fluid on the inline axis while preserving the authored
 * 51.635px mobile height. The brand link follows its two-line text height,
 * with the mark and text centered against the header's cross-axis.
 * The menu keeps its 44px accessible hit area inside the pill.
 */
@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .site-header {
    width: calc(100% - 32px);
    height: 51.635px;
    min-height: 51.635px;
    padding-block: 15px;
    padding-inline: 19.227px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
  }

  .site-header .site-brand {
    flex: 0 1 auto;
    gap: 5.61px;
    margin-inline-end: auto;
    transform: none;
  }

  .site-header .site-brand-mark {
    flex: 0 1 auto;
    inline-size: auto;
    block-size: 21.61px;
    max-block-size: 100%;
    max-inline-size: 100%;
    align-self: center;
    margin: 0;
    aspect-ratio: 38.5342 / 21.6106;
    object-fit: contain;
    transform: none;
  }

  .site-header .site-brand span {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
    align-self: center;
    font-size: 9px;
    font-weight: 800;
    line-height: 11px;
    transform: none;
  }

  .site-header .menu-toggle {
    align-self: center;
    flex: 0 0 44px;
    min-inline-size: 44px;
    min-block-size: 44px;
  }
}

/* Tablet is an interpolation range, not a compressed desktop endpoint. */
@media (min-width: 768px) and (max-width: 1199px) {
  :where(
    .upper-wrap,
    .lower-wrap,
    .lower-narrow,
    .center-wrap,
    .case-study-wrap,
    .team-hero-copy,
    .team-group,
    .case-study-detail-article,
    .case-study-detail-section,
    .publication-content,
    .lower-address
  ) {
    width: min(var(--iel-responsive-content-max), calc(100% - 2 * var(--iel-responsive-gutter-tablet)));
  }

  .iel-home .upper-result-grid,
  .iel-home .lower-case-study-grid,
  .case-study-directory .case-study-grid,
  .publication-information .publication-list {
    grid-template-columns: repeat(auto-fit, minmax(var(--iel-responsive-card-min), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .iel-home .upper-result,
  .iel-home .lower-case,
  .case-study-directory .directory-case,
  .publication-information .publication-card {
    min-inline-size: 0;
  }

  .iel-home .upper-result-image,
  .iel-home .lower-editorial-image,
  .case-study-directory .directory-case,
  .publication-information .publication-card-image {
    max-inline-size: 100%;
  }

  .iel-home .lower-card-track,
  .iel-home .lower-review-track {
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  .center-video-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .center-video-card,
  .center-video-slot-0.center-video-group-4,
  .center-video-slot-0.center-video-group-3 {
    min-block-size: clamp(18rem, 42vw, 34rem);
  }

  .team-list {
    gap: clamp(1.5rem, 3vw, 2.625rem);
  }

  .consultation-request-card {
    width: min(820px, 100%);
  }

  .team-member-profile-container {
    width: min(var(--iel-responsive-content-max), calc(100% - 2 * var(--iel-responsive-gutter-tablet)));
  }

  .team-member-profile-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    padding-inline: 0;
  }

  .team-member-profile-section {
    grid-template-columns: minmax(8rem, 20%) minmax(0, 1fr);
  }

  .case-study-detail-article,
  .case-study-detail-section {
    width: min(var(--iel-responsive-content-max), calc(100% - 2 * var(--iel-responsive-gutter-tablet)));
  }

  .case-study-body {
    font-size: clamp(1rem, 1.2vw + 0.25rem, 1.3125rem);
    line-height: clamp(1.9, 2.5vw, 3);
  }

  body:not(.home) main.site-search-page {
    width: min(60rem, calc(100% - 2 * var(--iel-responsive-gutter-tablet)));
    padding-inline: 0;
  }
}

/* Mobile owns a single content frame and lets rails reveal the next card. */
@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  :where(
    .upper-wrap,
    .lower-wrap,
    .lower-narrow,
    .center-wrap,
    .case-study-wrap,
    .team-hero-copy,
    .team-group,
    .case-study-detail-article,
    .case-study-detail-section,
    .publication-content,
    .lower-address
  ) {
    width: min(100%, calc(100% - 2 * var(--iel-responsive-gutter-mobile)));
  }

  :where(main h1, main h2, main h3, main p, main li, main a, main button, main summary) {
    min-inline-size: 0;
    max-inline-size: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .iel-home .upper-result-grid,
  .iel-home .lower-case-study-grid,
  .case-study-directory .case-study-grid,
  .publication-information .publication-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .iel-home .lower-card-track,
  .iel-home .lower-insights .lower-card-track,
  .iel-home .lower-news .lower-card-track {
    width: calc(100% + var(--iel-responsive-rail-extension));
    padding-inline-end: var(--iel-responsive-rail-extension);
    scroll-padding-inline-end: var(--iel-responsive-rail-extension);
  }

  /* The intro rail intentionally reaches the viewport edge so the next card
   * remains visible as a cue that the row is horizontally scrollable. */
  .iel-home .upper-intro-grid {
    max-inline-size: none;
  }

  .iel-home .lower-editorial,
  .iel-home .lower-insights .lower-editorial,
  .iel-home .lower-news .lower-editorial {
    flex: 0 0 min(328px, calc(100vw - 3.25rem));
    width: min(328px, calc(100vw - 3.25rem));
    max-inline-size: calc(100vw - 3.25rem);
  }

  .iel-home .upper-profile-track,
  .iel-home .lower-review-track,
  .center-intro-track,
  .team-group-psychologists .team-list {
    padding-inline-end: var(--iel-responsive-rail-extension);
    scroll-padding-inline-end: var(--iel-responsive-rail-extension);
  }

  .center-video-track {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: clip;
    padding-inline-end: var(--iel-responsive-rail-extension);
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .center-video-track::-webkit-scrollbar {
    display: none;
  }

  .center-video-card {
    flex: 0 0 min(326px, calc(100vw - 3.25rem));
    min-block-size: 13.125rem;
  }

  .center-video-slot-0.center-video-group-4,
  .center-video-slot-0.center-video-group-3,
  .center-video-slot-3,
  .center-video-group-1,
  .center-video-group-2,
  .center-video-group-2.center-video-slot-0 {
    grid-column: auto;
    grid-row: auto;
  }

  .publication-news .publication-card {
    min-inline-size: 0;
  }

  .publication-news .publication-card h2,
  .publication-news .publication-excerpt,
  .publication-news .publication-meta {
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .consultation-request-card,
  .consultation-request-form,
  .consultation-request-copy {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .team-member-profile-container,
  .case-study-detail-article,
  .case-study-detail-section {
    width: min(100%, calc(100% - 2 * var(--iel-responsive-gutter-mobile)));
  }

  body:not(.home) main.site-search-page {
    width: min(100%, calc(100% - 2 * var(--iel-responsive-gutter-mobile)));
    padding-inline: 0;
  }

  .site-search-page h1 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .site-search-field {
    min-inline-size: 0;
  }

  .site-search-field input,
  .site-search-field button {
    min-block-size: var(--iel-responsive-tap-target);
  }

  .consultation-request-field input,
  .consultation-request-submit,
  .consultation-request-consent {
    min-block-size: var(--iel-responsive-tap-target);
  }

  .iel-home .location-map,
  .iel-home .location-map-frame,
  .iel-home .lower-map {
    height: 524px;
  }

  .site-footer .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-company {
    grid-column: 1 / -1;
  }
}

@media (max-width: 359px) {
  :root {
    --iel-responsive-gutter-mobile: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --iel-responsive-rail-extension: 1rem;
  }

  .iel-home .lower-editorial,
  .iel-home .lower-insights .lower-editorial,
  .iel-home .lower-news .lower-editorial,
  .center-video-card {
    flex-basis: calc(100vw - 2.75rem);
    width: calc(100vw - 2.75rem);
    max-inline-size: calc(100vw - 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .upper-profile-track,
    .lower-review-track,
    .lower-card-track,
    .lower-location-track,
    .center-intro-track,
    .center-video-track,
    .team-list
  ) {
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  :where(.site-header, .site-footer, .upper-profile, .directory-member, .directory-case, .publication-card) {
    forced-color-adjust: auto;
  }
}