/* SkinCos 1.0.0 — consolidated responsive layout
   This file intentionally owns the homepage geometry so WordPress/Gutenberg
   flow margins cannot shift grid items or squeeze full-width sections. */

/* Editable homepage: section canvas is full width; .sc-shell controls inner width. */
.wp-site-blocks > .wp-block-post-content,
.wp-block-post-content,
.wp-block-post-content.is-layout-constrained,
.editor-styles-wrapper .wp-block-post-content {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.wp-block-post-content > .wp-block-group,
.wp-block-post-content > section,
.wp-block-post-content.is-layout-constrained > .wp-block-group,
.wp-block-post-content.is-layout-constrained > section,
.editor-styles-wrapper .wp-block-post-content > .wp-block-group {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* WordPress flow layout adds margins between Group children. Custom SkinCos
   grids/flex layouts use their own gaps; remove Gutenberg's inherited gaps. */
:where(.sc-hero-grid,.sc-grid-4,.sc-grid-3,.sc-price-grid,.sc-safety-grid,.sc-professional-grid,.sc-bio-grid) > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Hero: one shared left-column width. H1 scales from that exact column so the
   second line and the copy below keep the same visual right edge at any width. */
.sc-hero-copycol {
  width: 100%;
  max-width: 660px;
  container-type: inline-size;
}
.sc-hero h1,
.wp-site-blocks .sc-hero h1,
.editor-styles-wrapper .sc-hero h1 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(38px, 11.75cqw, 78px) !important;
  line-height: 1.01 !important;
  letter-spacing: -.024em !important;
  font-weight: 200 !important;
  margin: 0 0 24px !important;
}
.sc-hero-title-line {
  display: block;
  white-space: nowrap !important;
}
.sc-hero-lead,
.sc-hero-copy {
  width: 100%;
  max-width: 660px !important;
}

/* Generic German wrapping. Keep interaction labels and brand H1 intact. */
:where(.sc-hero-copycol,.sc-section,.sc-card,.sc-price-card,.sc-safety-item,.sc-professional,.sc-bio-grid,.sc-footer,.wp-block-post-content)
:where(p,li,h2,h3,h4) {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
:where(.sc-section-title,.sc-card h3,.sc-price-card h3,.sc-safety-item h3) {
  text-wrap: balance;
}
:where(.wp-block-button__link,.sc-card a,.sc-price-card a,.sc-safety-item a,.sc-header a,.sc-footer a,.sc-hero-title-line) {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
}

/* Topics — fixed proportions, 4x2 desktop, equal card geometry. */
.sc-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 18px !important;
  width: 100%;
  align-items: stretch !important;
}
.sc-grid-4 > .sc-card {
  height: 100% !important;
  min-height: 280px;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  align-self: stretch !important;
}
.sc-grid-4 > .sc-card > * { margin-block: 0 !important; }
.sc-grid-4 > .sc-card h3 { min-height: 2.7em; }
.sc-grid-4 > .sc-card > p:last-child { margin-top: auto !important; }

/* Hype Check — three equal cards on one common baseline. */
.sc-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  grid-auto-rows: 1fr;
  gap: 0 !important;
  width: 100%;
  align-items: stretch !important;
}
.sc-grid-3 > .sc-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  align-self: stretch !important;
}
.sc-grid-3 > .sc-card > * { margin-block: 0 !important; }
.sc-grid-3 > .sc-card h3 { min-height: 2.7em; }
.sc-grid-3 > .sc-card > p:last-child { margin-top: auto !important; }

/* Consultation — equal top/bottom lines regardless of text length. */
.sc-price-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 22px !important;
  width: 100%;
  align-items: stretch !important;
}
.sc-price-grid > .sc-price-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  align-self: stretch !important;
}
.sc-price-grid > .sc-price-card > * { margin-block: 0 !important; }
.sc-price-grid + p { margin-top: 22px !important; margin-bottom: 0 !important; }

/* Safety — four equal cells; CTA always below grid, never on its border. */
.sc-safety-grid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 0 !important;
  width: 100%;
  align-items: stretch !important;
}
.sc-safety-grid > .sc-safety-item {
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  align-self: stretch !important;
}
.sc-safety-grid > .sc-safety-item > * { margin-block: 0 !important; }
.sc-safety-grid + p { margin-top: 22px !important; margin-bottom: 0 !important; }

/* Tablet proportions. */
@media (max-width: 1100px) {
  .sc-grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 980px) {
  .sc-safety-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .sc-grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

/* Mobile: natural heights and one column, without forced desktop card heights. */
@media (max-width: 700px) {
  .sc-grid-4,
  .sc-grid-3,
  .sc-price-grid,
  .sc-safety-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .sc-grid-4 > .sc-card,
  .sc-grid-3 > .sc-card,
  .sc-price-grid > .sc-price-card,
  .sc-safety-grid > .sc-safety-item {
    height: auto !important;
    min-height: 0;
  }
  .sc-grid-4 > .sc-card h3,
  .sc-grid-3 > .sc-card h3 { min-height: 0; }
  .sc-hero h1,
  .wp-site-blocks .sc-hero h1,
  .editor-styles-wrapper .sc-hero h1 {
    font-size: clamp(38px,11.75cqw,52px) !important;
    line-height: 1.03 !important;
  }
}