/* Global repair: bounded panels must never inherit viewport-sized padding. */
html:root { --gutter: clamp(24px, 5vw, 88px); }

/* Centre full-width page sections within the original 1580px content frame.
   This outer spacing is deliberately separate from bounded panel padding. */
@media (min-width: 641px) {
  html:root {
    --page-gutter: max(clamp(24px, 6vw, 110px), calc((100% - 1580px) / 2));
  }

  body > .site-header,
  body > .site-header .site-navigation.open,
  body > footer,
  body > #main > .section,
  body > #main > .proof-strip,
  body > #main > .instagram-section {
    padding-inline: var(--page-gutter);
  }

  body > #main > .hero,
  body > #main > .network,
  body > #main > .technical-teaser {
    margin-inline: var(--page-gutter);
  }
}

/* Homepage repair: keep text in normal flow inside the photograph.
   Page-centering gutters must never determine the width of these rows.
   Loaded last by the shared template, with a content version for caching. */
#senica-home-hero {
  --hero-content-inset: clamp(24px, 6vw, 88px);
}

#senica-home-hero > .hero-top,
#senica-home-hero > .hero-heading,
#senica-home-hero > .hero-intro {
  min-width: 0;
  max-width: none;
}

#senica-home-hero > .hero-intro > p {
  min-width: 0;
  max-width: 54ch;
  word-break: normal;
}

#senica-home-hero > .hero-intro > .button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 1101px) {
  #senica-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  #senica-home-hero > .hero-top {
    grid-row: 1;
    position: relative;
    inset: auto;
    width: auto;
    margin: 25px var(--hero-content-inset) 0;
    padding: 0 42px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 25px;
  }

  #senica-home-hero > .hero-heading {
    grid-row: 2;
    align-self: start;
    padding: 35px 24px 24px;
  }

  #senica-home-hero > .hero-intro {
    grid-row: 3;
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 var(--hero-content-inset) 40px;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px 30px;
  }

  #senica-home-hero > .hero-intro > p {
    flex: 1 1 24rem;
  }

  #senica-home-hero > .hero-intro > .button {
    flex: 0 1 auto;
    width: auto;
  }
}

@media (max-width: 1100px) {
  #senica-home-hero > .hero-intro {
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    flex-direction: column;
    align-items: center;
  }

  #senica-home-hero > .hero-intro > .button {
    flex: none;
  }
}