/* --------- 404 --------- */

.not-found-section {
  padding-top: var(--wp--preset--spacing--70);
  padding-bottom: var(--wp--preset--spacing--70);
  text-align: center;
}

.not-found-code {
  margin: 0;
  font-size: clamp(100px, 7.143vw + 77.14px, 180px);
  line-height: 1;
  color: var(--wp--preset--color--primary);
}

/* --------- Archive / Blog --------- */

.archive-section {
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--70);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 12px;
}

/* Two rounded blocks: the image starts 20px up, under the title block, so its
   rounded top corners stay hidden and the title's bottom corners show the
   image behind them. isolation keeps the image's z-index: -1 inside the card. */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  --post-card-radius: 15px;
  --post-card-overlap: 20px;
}

.post-card__title {
  flex-grow: 1;
  margin: 0;
  padding: 36px 31px;
  border-radius: var(--post-card-radius);
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--secondary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  line-height: 1.4;
}

/* The whole card is the title's link. */
.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.post-card__link:focus-visible {
  outline: none;
}

.post-card:has(.post-card__link:focus-visible) {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: var(--post-card-radius);
}

.post-card__img {
  position: relative;
  z-index: -1;
  margin-top: calc(var(--post-card-overlap) * -1);
  aspect-ratio: 397 / 266;
  overflow: hidden;
  border-radius: var(--post-card-radius);
  background-color: var(--wp--preset--color--primary);
}

.post-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card__img img {
  transform: scale(1.04);
}

.post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--post-card-overlap) 31px 0;
  color: var(--wp--preset--color--secondary);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.2;
  text-align: center;
}

.post-card__placeholder svg {
  width: 40%;
  height: auto;
}

.archive-no-posts {
  text-align: center;
  padding: var(--wp--preset--spacing--60) 0;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}

.load-more-wrap {
  margin-top: var(--wp--preset--spacing--60);
  text-align: center;
}

.load-more-status:not(:empty) {
  margin-top: var(--wp--preset--spacing--20);
  color: var(--color-error);
  font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }

  .post-card__title {
    padding: 28px 24px;
  }
}

/* --------- Products archive --------- */

/* Each card spans two rows of the grid and takes them as a subgrid, so the
   text blocks of a row share one height and the photos below them line up;
   only the text block grows when one card has more to say. */
.products-grid {
  --product-card-radius: 15px;
  --product-card-overlap: 20px;
  --product-card-gap: 21px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px var(--product-card-gap);
}

.product-card {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  isolation: isolate;
}

.product-card__text {
  display: flex;
  flex-direction: column;
  padding: 36px 47px 46px;
  border-radius: var(--product-card-radius);
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--base);
}

.product-card__title {
  margin: 0;
  color: var(--wp--preset--color--secondary);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 500;
  line-height: 1.2;
}

.product-card__excerpt {
  margin: 18px 0 0;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.4;
}

/* The whole card is the title's link. */
.product-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__link:focus-visible {
  outline: none;
}

.product-card:has(.product-card__link:focus-visible) {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: var(--product-card-radius);
}

/* Starts under the text block, so its rounded top corners stay hidden and
   the text block's rounded bottom corners show the photo behind them. */
.product-card__img {
  position: relative;
  z-index: -1;
  margin-top: calc(var(--product-card-overlap) * -1);
  aspect-ratio: 594 / 323;
  overflow: hidden;
  border-radius: var(--product-card-radius);
  background-color: var(--wp--preset--color--primary);
}

.product-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .product-card__img img {
  transform: scale(1.04);
}

/* Wide: the text block in the left column, at the bottom; the photo across
   the gap and the right column, tucked under the text block's corners. */
@media (min-width: 782px) {
  .product-card--wide {
    grid-column: 1 / -1;
    grid-row: span 1;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--product-card-gap);
  }

  .product-card--wide .product-card__text {
    justify-content: flex-end;
  }

  .product-card--wide .product-card__img {
    margin-top: 0;
    margin-left: calc((var(--product-card-gap) + var(--product-card-overlap)) * -1);
    aspect-ratio: 635 / 450;
  }
}

@media (max-width: 781px) {
  .products-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .product-card__text {
    padding: 28px 24px 40px;
  }
}

/* --------- Single Insight --------- */

.single-post-section {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--70);
}

.single-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.single-post-tag {
  display: inline-block;
  padding: 10px 32px;
  border-radius: 999px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.single-post-date {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--secondary);
}

.single-post-category {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary);
}

.single-post-title {
  margin: var(--wp--preset--spacing--40) 0 0;
  color: var(--wp--preset--color--primary);
  font-size: clamp(22px, 1.25vw + 18px, 36px);
}

.single-post-image {
  margin-top: var(--wp--preset--spacing--50);
  aspect-ratio: 1043 / 372;
  overflow: hidden;
  border-radius: 15px;
  background-color: var(--wp--preset--color--surface);
}

.single-post-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Its entrance is the image sections' (the keyframes are below): uncovered
   downwards, settling from a slight zoom. */
.single-post-image {
  --image-reveal-from: inset(0 0 100% 0 round 15px);
  --image-reveal-to: inset(0 round 15px);
}

@media (prefers-reduced-motion: no-preference) {
  .single-post-image.is-revealed {
    animation: image-reveal 0.8s cubic-bezier(0.33, 1, 0.68, 1)
      calc(var(--reveal-base, 0s) + var(--reveal-index, 0) * 0.09s) both;
  }

  .single-post-image.is-revealed img {
    animation: image-settle 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

.single-post-body {
  margin-top: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--medium);
}

.single-post-body h2 {
  font-size: var(--wp--preset--font-size--xl);
}

.single-post-body h3 {
  font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 767px) {
  .single-post-image {
    aspect-ratio: 16 / 9;
  }
}

/* --------- Contacts (pattern "Contact section") --------- */

/* Cards stacked in the right column. Each card after the first starts one
   radius higher, so its rounded top covers the bottom of the card above; each
   card but the last pads its bottom by that radius to make up for it. Their
   height comes from their content — rows and offices can be added freely. */
/* --reveal-rise: the cards come up from further below than text does
   (assets/js/reveal.js). */
.contact-cards {
  --reveal-rise: 80px;
  --contact-card-radius: 16px;
  --contact-card-padding: var(--wp--preset--spacing--40);
  min-width: 340px;
}

.contact-cards > .wp-block-group {
  margin: 0;
  padding: var(--contact-card-padding);
  border-radius: var(--contact-card-radius);
}

.contact-cards > .wp-block-group + .wp-block-group {
  margin-top: calc(var(--contact-card-radius) * -1);
}

.contact-cards > .wp-block-group:not(:last-child) {
  padding-bottom: calc(
    var(--contact-card-padding) + var(--contact-card-radius)
  );
}

.contact-cards p {
  font-weight: 300;
}

.contact-cards h4,
.contact-cards td:first-child {
  font-weight: 600;
}

.contact-cards h3 {
  font-weight: 500;
}

.contact-cards h4 + p {
  margin-top: 8px;
}

.contact-cards .wp-block-table {
  margin: var(--wp--style--block-gap) 0 0;
}

.contact-cards .wp-block-table table {
  width: auto;
  border-collapse: collapse;
}

.contact-cards .wp-block-table td {
  padding: 0 var(--wp--preset--spacing--30) 4px 0;
  border: 0;
  font-size: var(--wp--preset--font-size--medium);
  vertical-align: top;
}

.contact-cards a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Core stacks columns only below 782px, with !important; the cards need the
   width sooner. Stacked, they keep a card's width rather than the page's. */
@media (max-width: 900px) {
  .contact-section.wp-block-columns {
    flex-wrap: wrap !important;
  }

  .contact-section > .wp-block-column {
    flex-basis: 100% !important;
  }

  .contact-cards {
    min-width: 0;
    max-width: 480px;
  }
}

/* --------- Image and text (patterns "Image left" / "Text left") --------- */

/* 781px, not 767: it has to match where core Columns stack. */
@media (max-width: 781px) {
  .image-columns > .wp-block-column:has(> .wp-block-image) {
    order: -1;
  }
}

/* The entrance on scroll (assets/js/reveal.js; data-reveal comes from
   inc/blocks.php): the image is uncovered from its outer edge towards the
   text, settling from a slight zoom inside its frame, and the text rises after
   it, one block at a time. Stacked, the image is uncovered downwards. The
   clip carries the images' 18px corners — without them the zoomed picture
   shows square ones. */
.image-columns > .wp-block-column {
  --image-reveal-from: inset(0 100% 0 0 round 18px);
}

.image-columns > .wp-block-column:last-child {
  --image-reveal-from: inset(0 0 0 100% round 18px);
}

@media (max-width: 781px) {
  .image-columns > .wp-block-column,
  .image-columns > .wp-block-column:last-child {
    --image-reveal-from: inset(0 0 100% 0 round 18px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .has-reveal .image-columns[data-reveal]:not(.is-revealed) > .wp-block-column > .wp-block-image {
    clip-path: var(--image-reveal-from);
  }

  /* A block of cards (the tiles) is not risen as one: its cards come up on
     their own, after the text above them. */
  .has-reveal .image-columns[data-reveal]:not(.is-revealed) > .wp-block-column:not(:has(> .wp-block-image)) > :not(:has([data-reveal])) {
    opacity: 0;
  }

  .image-columns[data-reveal] [data-reveal="card"] {
    --reveal-base: 0.6s;
  }

  .image-columns.is-revealed > .wp-block-column > .wp-block-image {
    animation: image-reveal 0.8s cubic-bezier(0.33, 1, 0.68, 1) both;
  }

  .image-columns.is-revealed > .wp-block-column > .wp-block-image img {
    animation: image-settle 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .image-columns.is-revealed > .wp-block-column:not(:has(> .wp-block-image)) > :not(:has([data-reveal])) {
    animation: text-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
  }

  .image-columns.is-revealed > .wp-block-column:not(:has(> .wp-block-image)) > :nth-child(2) {
    animation-delay: 0.47s;
  }

  .image-columns.is-revealed > .wp-block-column:not(:has(> .wp-block-image)) > :nth-child(3) {
    animation-delay: 0.59s;
  }

  .image-columns.is-revealed > .wp-block-column:not(:has(> .wp-block-image)) > :nth-child(n + 4) {
    animation-delay: 0.71s;
  }
}

@keyframes image-reveal {
  from {
    clip-path: var(--image-reveal-from);
  }

  to {
    clip-path: var(--image-reveal-to, inset(0 round 18px));
  }
}

@keyframes image-settle {
  from {
    transform: scale(1.12);
  }
}

/* --------- Careers: Current Opportunities band --------- */

@media (max-width: 781px) {
  .careers-opportunities {
    text-align: center;
  }

  .careers-opportunities .wp-block-buttons {
    justify-content: center;
  }
}