/*
 * Clarified IT enterprise layout
 * Fluid shell shared by the public IT site, NIS2 page and online questionnaire.
 * Loaded last so it can coordinate the older page-specific styles without
 * changing their markup, behaviour or language handling.
 */

:root {
  --max: 1800px;
  --enterprise-max: 1800px;
  --enterprise-prose: 75ch;
  --enterprise-gutter: clamp(20px, 3.25vw, 64px);
  --enterprise-section: clamp(64px, 5.4vw, 104px);
  --enterprise-gap: clamp(20px, 2vw, 36px);
}

html {
  overflow-x: auto !important;
}

body {
  min-width: 0;
  overflow-x: visible !important;
}

img,
video,
svg,
iframe {
  max-width: 100%;
}

main h1,
main h2,
main h3 {
  overflow-wrap: anywhere;
}

.wrap {
  width: min(var(--enterprise-max), calc(100% - (2 * var(--enterprise-gutter))));
  max-width: none;
  margin-inline: auto;
}

body:not([data-supported-languages]) .topbar {
  min-height: 38px;
  padding-inline: var(--enterprise-gutter);
}

body:not([data-supported-languages]) .main-nav {
  width: 100%;
  min-width: 0;
  padding-inline: var(--enterprise-gutter);
}

body:not([data-supported-languages]) .main-nav > *,
body:not([data-supported-languages]) .nav-links,
body:not([data-supported-languages]) .nav-actions {
  min-width: 0;
}

.section-head,
.it-section-head,
.it-detail-copy,
.contact-copy,
.security-copy,
.intro-copy,
.brand-architecture-copy,
.human-ops-copy > p,
.nis2-head,
.nis2-request-copy,
.nis2-sources > .wrap,
.customs-post,
.blog-main-list {
  max-width: var(--enterprise-prose);
}

/* The homepage uses an intentional flex order established by brand-refactor.
   Give newer sections explicit positions so they cannot jump ahead of hero. */
body[data-funnel-page="it-homepage"] main > .hero { order: 1; }
body[data-funnel-page="it-homepage"] main > #nis2 { order: 2; }
body[data-funnel-page="it-homepage"] main > .risk-map { order: 3; }
body[data-funnel-page="it-homepage"] main > .human-ops { order: 4; }
body[data-funnel-page="it-homepage"] main > .it-start-path { order: 5; }
body[data-funnel-page="it-homepage"] main > .services { order: 6; }
body[data-funnel-page="it-homepage"] main > .custom-builds { order: 7; }
body[data-funnel-page="it-homepage"] main > .packages { order: 8; }
body[data-funnel-page="it-homepage"] main > .process { order: 9; }
body[data-funnel-page="it-homepage"] main > .it-case-studies { order: 10; }
body[data-funnel-page="it-homepage"] main > .contact { order: 11; }

.intro,
.services,
.security,
.process,
.packages,
.contact,
.brand-architecture,
.risk-map,
.human-ops,
.it-start-path,
.custom-builds,
.it-case-studies,
.it-detail-section {
  padding-block: var(--enterprise-section);
}

.brand-architecture-grid,
.intro-grid,
.human-ops-grid,
.security-grid,
.contact-grid,
.it-detail-grid {
  gap: clamp(28px, 3.4vw, 64px);
}

.service-grid,
.package-grid,
.risk-grid,
.steps,
.it-start-grid,
.custom-build-grid,
.it-case-grid,
.it-include-grid,
.it-related-grid,
.it-package-grid {
  gap: clamp(16px, 1.35vw, 26px);
}

.service-card,
.package,
.risk-card,
.step,
.it-start-card,
.custom-build-card,
.it-case-study,
.it-card,
.it-list-card,
.it-related-card,
.it-package-card,
.vertical-card {
  min-width: 0;
}

/* Keep the homepage portrait useful at large sizes without turning it into a
   full-height wall. The focal point preserves all three faces in the crop. */
.human-ops-grid {
  grid-template-columns: minmax(0, .94fr) minmax(480px, 1.06fr);
  align-items: center;
}

.human-ops-media {
  width: 100%;
  height: clamp(480px, 34vw, 640px);
  min-height: 0;
  align-self: center;
}

.human-ops-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 40%;
}

.human-ops-copy {
  width: 100%;
  max-width: 860px;
  justify-self: start;
  padding: clamp(28px, 2.5vw, 44px);
}

/* Editorial detail pages: keep copy, summary and illustration in one balanced
   hero instead of letting the third child create a very tall second row. */
body.it-detail-page main {
  overflow: visible;
}

body.it-detail-page .it-detail-hero {
  min-height: 0;
  padding-block: clamp(50px, 4.2vw, 72px) clamp(44px, 3.6vw, 62px);
}

body.it-detail-page .it-detail-grid {
  column-gap: clamp(28px, 3vw, 52px);
  row-gap: clamp(18px, 1.6vw, 26px);
  align-items: start;
}

body.it-detail-page .it-detail-grid:has(> .it-visual-card) {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  grid-template-areas:
    "copy visual"
    "summary visual";
}

body.it-detail-page .it-detail-grid:not(:has(> .it-visual-card)) {
  grid-template-columns: minmax(0, 820px) minmax(300px, 420px);
  grid-template-areas: "copy summary";
  justify-content: center;
}

body.it-detail-page .it-detail-grid > .it-detail-copy {
  grid-area: copy;
  width: 100%;
  max-width: 820px;
  align-self: end;
}

body.it-detail-page .it-detail-grid > .it-summary-card {
  grid-area: summary;
  width: 100%;
  max-width: 820px;
  align-self: start;
}

body.it-detail-page .it-detail-grid > .it-visual-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-area: visual;
  width: 100%;
  height: clamp(320px, 25vw, 480px);
  min-height: 0;
  max-height: 480px;
  align-self: center;
}

body.it-detail-page .it-detail-grid > .it-visual-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

body.it-detail-page .it-detail-grid > .it-visual-card figcaption {
  padding: 12px clamp(16px, 1.5vw, 22px) 14px;
  border-top: 2px solid #2ea49c;
  background: #071c22;
  color: #f7fbfa;
  font-size: clamp(.82rem, .78rem + .18vw, .94rem);
  font-weight: 700;
  line-height: 1.45;
}

body.it-detail-page .it-detail-copy h1,
body.it-detail-page .it-detail-copy .lede {
  max-width: var(--enterprise-prose);
}

body.it-detail-page .it-detail-section {
  padding-block: clamp(42px, 4vw, 60px);
}

body.it-detail-page .it-section-head {
  margin-bottom: clamp(20px, 2vw, 28px);
}

body.it-detail-page .it-card,
body.it-detail-page .it-list-card,
body.it-detail-page .it-related-card,
body.it-detail-page .it-package-card {
  height: 100%;
}

@media (min-width: 821px) {
  body.it-detail-page .it-include-grid,
  body.it-detail-page .it-package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.it-detail-page .it-include-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.it-detail-page .it-include-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.it-detail-page .it-include-grid:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }

  body.it-detail-page .it-include-grid:has(> :nth-child(5):last-child) > :nth-last-child(-n + 2) {
    grid-column: span 3;
  }
}

@media (min-width: 1180px) {
  body.it-detail-page .it-include-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 961px) {
  body.it-detail-page[data-funnel-page="it-resource"] .it-detail-grid:has(> .it-visual-card) {
    grid-template-areas:
      "copy visual"
      "copy summary";
  }

  body.it-detail-page[data-funnel-page="it-resource"] .it-detail-grid > .it-detail-copy {
    align-self: center;
  }

  body.it-detail-page[data-funnel-page="it-resource"] .it-detail-copy h1 {
    font-size: clamp(3rem, 3vw, 3.4rem);
    line-height: 1.04;
  }
}

/* NIS2 inherits the wide shell while its component layouts continue to use
   their existing container queries. */
.nis2-box {
  container-type: inline-size;
}

.nis2-hero,
.nis2-request {
  padding-block: clamp(64px, 5.5vw, 106px);
}

.nis2-section {
  padding-block: var(--enterprise-section);
}

.nis2-hero-grid {
  gap: clamp(32px, 4vw, 72px);
}

.nis2-hero-copy {
  max-width: 900px;
}

.nis2-lead,
.nis2-head p:not(.nis2-eyebrow),
.nis2-after,
.nis2-steps-note,
.nis2-resource-online > p,
.nis2-resources-note,
.nis2-request-copy > p,
.nis2-request-copy > ol {
  max-width: var(--enterprise-prose);
}

.nis2-document-packages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 12px 24px;
  align-items: center;
  width: 100%;
}

.nis2-document-packages a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.nis2-scope,
.nis2-stakes,
.nis2-steps,
.nis2-resources {
  gap: clamp(16px, 1.45vw, 28px);
}

.nis2-card,
.nis2-step,
.nis2-stakes article {
  padding: clamp(22px, 1.7vw, 32px);
}

@container nis2 (min-width: 1260px) {
  .nis2-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .72fr);
  }

  .nis2-request-grid {
    grid-template-columns: minmax(380px, .72fr) minmax(620px, 1.28fr);
    gap: clamp(52px, 4vw, 84px);
  }

  .nis2-resources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The standalone questionnaire has its own component vocabulary. */
body[data-supported-languages] {
  --enterprise-max: 1520px;
}

body[data-supported-languages] .wrap {
  width: min(var(--enterprise-max), calc(100% - (2 * var(--enterprise-gutter))));
}

body[data-supported-languages] .topbar {
  padding-block: clamp(14px, 1.4vw, 22px);
}

body[data-supported-languages] .hero {
  padding-block: clamp(40px, 4vw, 68px);
}

body[data-supported-languages] .hero-grid {
  grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr);
  gap: clamp(32px, 4vw, 68px);
}

body[data-supported-languages] .hero-grid > div {
  max-width: var(--enterprise-prose);
}

body[data-supported-languages] .main-grid {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 52px);
  padding-block: clamp(34px, 3.5vw, 60px) clamp(64px, 5vw, 92px);
}

body[data-supported-languages] .form-column {
  width: 100%;
  max-width: 1240px;
  justify-self: end;
}

body[data-supported-languages] .panel {
  padding: clamp(24px, 2vw, 34px);
}

body[data-supported-languages] .panel > p,
body[data-supported-languages] .panel > details > .section-intro,
body[data-supported-languages] .notice,
body[data-supported-languages] .privacy-box {
  max-width: var(--enterprise-prose);
}

body[data-supported-languages] .contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 2vw, 32px);
}

@media (min-width: 1180px) {
  body[data-supported-languages] .section-detail[open] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 2.4vw, 42px);
  }

  body[data-supported-languages] .section-detail[open] > summary,
  body[data-supported-languages] .section-detail[open] > .section-intro {
    grid-column: 1 / -1;
  }

  body[data-supported-languages] .question-card {
    align-self: start;
  }
}

@media (min-width: 1600px) {
  body:not([data-supported-languages]) .nav-links {
    gap: clamp(22px, 1.5vw, 32px);
  }

  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .package-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .it-include-grid,
  .it-package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .it-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1179px) {
  .human-ops-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  }

  body[data-supported-languages] .main-grid {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 960px) {
  .human-ops-grid,
  .it-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .human-ops-media,
  .human-ops-copy {
    max-width: 760px;
    justify-self: center;
  }

  .human-ops-media {
    height: min(720px, 82vw);
  }

  body[data-supported-languages] .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body[data-supported-languages] .hero-card {
    max-width: var(--enterprise-prose);
  }
}

@media (max-width: 820px) {
  :root {
    --enterprise-section: clamp(54px, 9vw, 72px);
  }

  body:not([data-supported-languages]) .topbar {
    padding-inline: 20px;
  }

  body:not([data-supported-languages]) .main-nav {
    padding-inline: 20px;
  }

  .brand-architecture-grid,
  .intro-grid,
  .security-grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nis2-document-packages {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .nis2-document-packages a {
    width: 100%;
  }

  body[data-supported-languages] .main-grid {
    display: block;
  }

  body[data-supported-languages] .form-column {
    max-width: none;
  }
}

@media (max-width: 700px) {
  :root {
    --enterprise-gutter: 20px;
  }

  .wrap,
  body[data-supported-languages] .wrap {
    width: calc(100% - 40px) !important;
  }

  .intro,
  .services,
  .security,
  .process,
  .packages,
  .contact,
  .brand-architecture,
  .risk-map,
  .human-ops,
  .it-start-path,
  .custom-builds,
  .it-case-studies,
  .it-detail-section,
  .nis2-section {
    padding-block: var(--enterprise-section);
  }

  .human-ops-media {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
  }

  .human-ops-media img {
    object-position: 50% 50%;
  }

  .human-ops-copy {
    padding: 22px 20px;
  }

  .nis2-hero,
  .nis2-request {
    padding-block: 56px;
  }

  body[data-supported-languages] .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body[data-supported-languages] .panel {
    padding: 20px 16px;
  }

  body[data-supported-languages] .document-row {
    flex-direction: column;
  }
}

@media (max-width: 960px) {
  body.it-detail-page .it-detail-grid:has(> .it-visual-card) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "summary"
      "visual";
  }

  body.it-detail-page .it-detail-grid:not(:has(> .it-visual-card)) {
    grid-template-columns: minmax(0, 820px);
    grid-template-areas:
      "copy"
      "summary";
  }

  body.it-detail-page .it-detail-grid > .it-detail-copy,
  body.it-detail-page .it-detail-grid > .it-summary-card,
  body.it-detail-page .it-detail-grid > .it-visual-card {
    max-width: 820px;
    justify-self: center;
  }

  body.it-detail-page .it-detail-grid > .it-visual-card {
    height: clamp(260px, 55vw, 400px);
    max-height: 400px;
  }
}

@media (max-width: 700px) {
  body.it-detail-page .it-detail-hero {
    padding-block: clamp(38px, 10vw, 46px);
  }

  body.it-detail-page .it-detail-section {
    padding-block: clamp(36px, 10vw, 46px) !important;
  }

  body.it-detail-page .it-summary-card {
    display: block;
  }

  body.it-detail-page .it-detail-actions .it-inline-link {
    display: inline-flex;
  }

  body.it-detail-page .it-detail-copy .lede {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  body.it-detail-page .it-detail-grid > .it-visual-card {
    height: clamp(280px, 80vw, 320px);
    min-height: 280px;
    max-height: 320px;
  }
}

@media (max-width: 390px) {
  body:not([data-supported-languages]) .topbar {
    gap: 10px;
    padding-inline: 20px;
    font-size: .75rem;
  }

  body:not([data-supported-languages]) .main-nav {
    padding-inline: 20px;
  }

  body[data-supported-languages] .brand img {
    width: 116px;
  }

  body[data-supported-languages] .top-actions {
    gap: 8px;
  }

  body[data-supported-languages] .language-switch button {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}