/* Shared responsive layer for every public route. */
:root {
  --layout-gutter: clamp(16px, 4vw, 48px);
  --content-max: 1267px;
  --card-min: 320px;
}

/* Container queries use the actual available width, not the browser viewport. */
:where(
  .site-header,
  .site-footer,
  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,
  [class*='grid'],
  [class*='track'],
  [class*='copy']
) {
  min-inline-size: 0;
}

.site-footer,
.site-header,
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 {
  container-type: inline-size;
  container-name: route-shell;
}

main.iel-home {
  container-name: route-shell home-shell;
}

/* Public pages share the same design-copy markup. On narrow WebViews, let
 * Korean text wrap naturally instead of honoring desktop Figma line breaks. */
@media (max-width: 1199px) {
  :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
    )
    .iel-design-copy {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  :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
    )
    .iel-design-copy
    > br:is(.iel-break-both, .iel-break-mobile, .iel-break-desktop) {
    display: none;
  }
}

/* Final narrow-screen typography policy for every public route. Keep this
 * after the shared container rules so page-specific `anywhere` declarations
 * cannot split Korean words in mobile WebViews. */
@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  :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
    )
    :where(
      h1,
      h2,
      h3,
      h4,
      p,
      li,
      a,
      button,
      summary,
      .iel-design-copy,
      .directory-team-member-copy,
      .directory-team-member-intro,
      .directory-team-member-quote,
      .team-member-profile-introduction,
      .team-member-profile-list,
      .lower-faq-answer,
      .publication-answer,
      .publication-article-body,
      .directory-case-study-summary,
      .lower-case-study-body,
      .consultation-request-description
    ) {
    min-width: 0;
    max-width: 100%;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  :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
    )
    .iel-design-copy
    > br:is(.iel-break-both, .iel-break-mobile, .iel-break-desktop) {
    display: none;
  }

  .iel-home .upper-mobile-copy br {
    display: revert;
  }
}

.site-header {
  container-name: header;
}
.site-footer {
  container-name: footer;
}

@container header (max-width: 1199px) {
  .site-header {
    min-inline-size: 0;
  }
}

/* CMS content must not expand a grid or create horizontal page scroll. */
:where(
    .team-directory,
    .team-profile,
    .case-study-directory,
    .case-study-detail,
    .iel-publication,
    .consultation-request-main,
    .error-404,
    .site-search-page
  )
  :where(h1, h2, h3, p, li, td, .directory-case-study-summary, .publication-card-copy, .publication-article-body) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

@container footer (max-width: 719px) {
  .site-footer .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer .footer-company {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :where(
    .site-header,
    .site-footer,
    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
  ) {
    --route-gutter: clamp(24px, 4vw, 48px);
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  :where(
    .site-header,
    .site-footer,
    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
  ) {
    --route-gutter: clamp(20px, 6.218905vw, 48px);
  }
}

/* One final route-wide policy. It applies to real narrow containers as well
 * as touch WebViews whose layout viewport is wider than the device. Case-study
 * pills own their Figma typography, so they stay outside the prose minimum. */
@container route-shell (max-width: 767px) {
  :where(h1, h2, h3, h4, p, li, a, button, summary, .iel-design-copy) {
    min-width: 0;
    max-width: 100%;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  :where(p, li:not(.case-study-card__tag), summary, .publication-article-body, .consultation-request-description) {
    font-size: max(12px, 1em);
  }

  .iel-design-copy > br.iel-break-both,
  .iel-design-copy > br.iel-break-mobile {
    display: revert;
  }

  .iel-design-copy > br.iel-break-desktop {
    display: none;
  }
}

@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  :where(body > main, body > main *, .site-footer, .site-footer *) {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  :where(
    body > main p:not(.case-study-result, .case-study-card__body, .case-study-card__result),
    body > main li:not(.case-study-card__tag),
    body > main summary
  ) {
    font-size: max(12px, 1em) !important;
  }
}

/* Touch WebViews can expose a tablet-sized layout viewport on a phone. Keep
 * document overflow clipped while preserving explicitly scrollable rails. */
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  body {
    overflow-x: clip;
  }
}