/* Page layouts. Each section is a boxed Container with the classes named below; its
   children take their columns here. Texts, links and images stay editable in the panel. */

/* Home: Manifesto ----------------------------------------------------
   Container "section theme-light house grid": Heading "eyebrow house__label", Heading
   "house__statement mx-lines", Container "house__body" (Text Editor, Button "link"),
   Icon List "house__sectors". */

.house__label { grid-column: 1 / span 2; align-self: start; }
.house__label .elementor-heading-title { padding-top: 1.9em; }
.house__statement { grid-column: 3 / -1; }

.e-con.house__body {
  --margin-top: clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-column: 3 / span 5;
  gap: 2rem;
  justify-items: start;
}

.house__sectors { grid-column: 9 / -1; align-self: start; padding-top: clamp(3rem, 6vw, 6rem); }
.elementor-widget-icon-list.house__sectors .elementor-icon-list-items {
  display: block;
  columns: 2;
  column-gap: var(--grid-gap);
  border-bottom: 1px solid var(--line);
}
.elementor-widget-icon-list.house__sectors .elementor-icon-list-item {
  display: block;
  padding-block: .9rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-label);
  font-weight: 500;
  /* Stated here because the kit's body line height is inherited as a fixed length. */
  line-height: 1.65;
  letter-spacing: .24em;
  text-transform: uppercase;
  break-inside: avoid;
}

@media (max-width: 1024px) {
  .house__label { grid-column: 1 / -1; padding-bottom: 1.5rem; }
  .house__label .elementor-heading-title { padding-top: 0; }
  .house__statement { grid-column: 1 / -1; }
  .e-con.house__body { grid-column: 1 / span 7; }
  .elementor-widget-icon-list.house__sectors .elementor-icon-list-items { columns: 1; }
}
@media (max-width: 767px) {
  .e-con.house__body, .house__sectors { grid-column: 1 / -1; }
  .elementor-widget-icon-list.house__sectors .elementor-icon-list-items { columns: 2; }
}

/* Home: Network ------------------------------------------------------
   Container "section theme-dark network grid": Container "network__intro" (eyebrow,
   title, Text Editor, Button "link"), Container "network__map" (the map), Container
   "network__stats" (four "stat"). The map spans both rows on desktop and sits between
   text and numbers below it. */

.e-con-boxed.network.grid > .e-con-inner { row-gap: clamp(3rem, 6vw, 5rem); }

.e-con.network__intro {
  display: grid;
  grid-column: 1 / span 5;
  grid-row: 1;
  gap: 1.75rem;
  align-content: start;
  justify-items: start;
}
.e-con.network__map { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: center; isolation: isolate; }
.e-con.network__map::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-champagne) 8%, transparent), transparent 72%);
  pointer-events: none;
}
.e-con.network__stats { grid-column: 1 / span 5; grid-row: 2; align-self: end; }

@media (max-width: 1024px) {
  .e-con.network__intro { grid-column: 1 / span 9; grid-row: auto; }
  .e-con.network__map { grid-column: 2 / span 10; grid-row: auto; }
  .e-con.network__stats { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 767px) {
  .e-con.network__intro, .e-con.network__map { grid-column: 1 / -1; }
}

/* Home: Selected Work ------------------------------------------------
   Container "section theme-light work": section header, then a Loop Grid "work__grid" of
   case cards. The cards are identical; their widths, offsets and proportions come from
   their position, in a pattern that repeats every four. Work follows Services on the
   same ground, so it has no space above. */

.e-con.work { --padding-top: 0px; }

.elementor-widget-loop-grid.work__grid .elementor-loop-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(4rem, 9vw, 9rem) var(--grid-gap);
  align-items: start;
}
.work__grid .e-loop-item:nth-of-type(4n+1) { grid-column: 1 / span 7; }
.work__grid .e-loop-item:nth-of-type(4n+2) { grid-column: 9 / span 4; margin-top: clamp(6rem, 17vw, 16rem); }
.work__grid .e-loop-item:nth-of-type(4n+3) { grid-column: 2 / span 4; }
.work__grid .e-loop-item:nth-of-type(4n) { grid-column: 7 / span 6; margin-top: clamp(4rem, 10vw, 10rem); }
.work__grid .e-loop-item:nth-of-type(4n+2) .case__media { aspect-ratio: 3 / 4; }
.work__grid .e-loop-item:nth-of-type(4n) .case__media { aspect-ratio: 4 / 3; }

@media (max-width: 1024px) {
  .work__grid .e-loop-item:nth-of-type(4n+2) { grid-column: 8 / span 5; margin-top: 8rem; }
  .work__grid .e-loop-item:nth-of-type(4n+3) { grid-column: 1 / span 5; }
  .work__grid .e-loop-item:nth-of-type(4n) { grid-column: 6 / span 7; margin-top: 5rem; }
}
@media (max-width: 767px) {
  .work__grid .e-loop-item:nth-of-type(n) { grid-column: 1 / -1; margin-top: 0; }
  .work__grid .e-loop-item:nth-of-type(4n+2) { padding-left: 18%; }
  .work__grid .e-loop-item:nth-of-type(4n+3) { padding-right: 18%; }
}

/* Home: About --------------------------------------------------------
   Container "section theme-light about grid": Container "about__media" (Image
   "about__img about__img--lg media mx-mask mx-parallax", Image "about__img about__img--sm
   media mx-mask"), Container "about__text" (eyebrow, title, two Text Editors, Button
   "link"), Container "about__principles" (three "principle"). */

.e-con-boxed.about.grid > .e-con-inner { row-gap: clamp(5rem, 10vw, 9rem); align-items: center; }

.e-con.about__media {
  --padding-right: 16%;
  --padding-bottom: 13%;
  display: block;
  grid-column: 1 / span 6;
}
.about__img--lg { aspect-ratio: 3 / 4; }
.about__media > .elementor-element.about__img--sm {
  --mx-delay: .25s;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  aspect-ratio: 4 / 5;
  border: clamp(.5rem, 1vw, .875rem) solid var(--bg);
  background: var(--bg);
}

.e-con.about__text { display: grid; grid-column: 8 / -1; gap: 1.75rem; justify-items: start; }
.e-con.about__principles { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .e-con.about__text { grid-column: 7 / -1; }
}
@media (max-width: 767px) {
  .e-con.about__media, .e-con.about__text { grid-column: 1 / -1; }
}