/* ==========================================================================
   Falk Personaltraining — Custom styles supplementing theme.json
   Backgrounds come from block `backgroundColor` attribute (theme.json palette).
   This file handles padding, typography, layout, and decorative details only.
   ========================================================================== */

html { scroll-behavior: smooth }

/* Block defaults =========================================================== */
.wp-block-cover.hero,
.wp-block-group.statement,
.wp-block-group.kontexte,
.wp-block-group.spd-strip,
.wp-block-group.portrait-wrap {
    margin-block: 0;
}

/* Site header (logo overlaid on top of page) =============================== */
/* The page's first section (hero or subpage) provides the olive background; */
/* the logo is positioned absolutely over it so layout flow is uninterrupted. */
/* Olive on body as safety net for any sub-pixel gap above the hero/subpage  */
body { background-color: var(--wp--preset--color--olive); }
/* Kill the 24px block-spacing margin between top-level blocks (it shows white */
/* between the absolute header and the alignfull olive section)                */
.wp-site-blocks > *,
.wp-site-blocks > .wp-block-post-content {
    margin-block-start: 0;
}
header.wp-block-template-part {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    pointer-events: none;          /* let clicks pass through to underlying content */
}
.site-header__inner {
    /* Mirror the constrained-layout calculation of the hero/sections without */
    /* an extra wrapper: max(section-padding, content-centering-distance).    */
    box-sizing: border-box;
    padding-top: clamp(2rem, 5vw, 5rem);
    padding-inline: max(clamp(1.25rem, 6vw, 8rem), calc((100% - 1170px) / 2));
    padding-bottom: 0;
    margin: 0;
}
.site-header__logo-link {
    display: inline-block;
    pointer-events: auto;          /* re-enable clicks just on the logo link */
}
.site-header__logo {
    width: clamp(180px, 22vw, 299px);
    height: auto;
    display: block;
}
/* Make body the positioning context for the absolute header */
body { position: relative; }

/* Hero section ============================================================= */
.wp-block-cover.hero {
    min-height: auto;
    padding: 0;
}
.wp-block-cover.hero > .wp-block-cover__inner-container {
    /* Top padding accommodates the absolute-positioned site header (logo) */
    padding-block: clamp(8rem, 18vw, 16rem) clamp(8rem, 14vw, 11rem);
    padding-inline: max(clamp(1.25rem, 6vw, 8rem), calc((100% - 1170px) / 2));
}

.hero .hero__title {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1.15;
    margin: 0 0 clamp(1.5rem, 3vw, 3rem);
    color: #fff;
}
.hero .hero__subline {
    font-size: clamp(1.25rem, 2.2vw, 2.125rem);
    color: #fff;
    margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}

/* CTA Button =============================================================== */
.wp-block-button.btn-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.25rem);
    background-color: var(--wp--preset--color--rose);
    color: var(--wp--preset--color--olive);
    padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.25rem, 3vw, 2rem);
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.375rem);
    line-height: 1.1;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    transition: filter .2s ease;
}
.wp-block-button.btn-cta .wp-block-button__link::before {
    content: '';
    display: inline-block;
    width: clamp(2.25rem, 6vw, 4.25rem);   /* 36px → 68px (mobile → desktop) */
    height: clamp(2.25rem, 6vw, 4.25rem);
    background: url(../images/icon-calendar.svg) no-repeat center / contain;
    flex: 0 0 auto;
}
.wp-block-button.btn-cta .wp-block-button__link:hover { filter: brightness(0.95); }

/* SPD logo strip =========================================================== */
.wp-block-group.spd-strip {
    padding-block: clamp(2.5rem, 4vw, 3.5rem);
    padding-inline: max(clamp(1.25rem, 6vw, 8rem), calc((100% - 1170px) / 2));
}
.wp-block-group.spd-strip .wp-block-image {
    margin: 0;
}
.wp-block-group.spd-strip .wp-block-image img {
    max-width: 302px;
    height: auto;
    display: block;
}

/* Portrait section ========================================================= */
.wp-block-group.portrait-wrap {
    position: relative;
    padding: 0;
}
.wp-block-group.portrait-wrap .wp-block-image.portrait {
    margin: 0;
    position: relative;   /* anchor for the overlay pseudo-element */
}
.wp-block-group.portrait-wrap .wp-block-image.portrait img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1440/1000;
    object-fit: cover;
}
.wp-block-group.portrait-wrap .wp-block-image.portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(89, 82, 64, 0.27);   /* Figma Rectangle 3 — olive at 27% */
    pointer-events: none;
}

.wp-block-group.portrait-badge {
    position: absolute;
    top: clamp(1rem, 4vw, 3.75rem);
    right: clamp(1rem, 6vw, 10rem);
    width: clamp(120px, 22vw, 334px);             /* mobile 120px → desktop 334px */
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff !important;
    color: var(--wp--preset--color--olive);
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.05;
    padding: clamp(.5rem, 1.5vw, 1rem);
    font-size: clamp(.875rem, 1.6vw, 2.125rem);   /* mobile 14px → desktop 34px */
    z-index: 2;
}
.wp-block-group.portrait-badge p { margin: 0; }
.wp-block-group.portrait-badge .label { font-weight: 400; margin-bottom: .35em; }
.wp-block-group.portrait-badge .city  { font-weight: 700; }

/* Statement section ======================================================== */
.wp-block-group.statement {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    padding-inline: max(clamp(1.25rem, 6vw, 8rem), calc((100% - 1170px) / 2));
}
.wp-block-group.statement .statement__title {
    font-weight: 400;
    font-size: clamp(1.875rem, 3.2vw, 2.75rem);
    line-height: 1.32;
    margin: 0 0 clamp(1.5rem, 3vw, 3rem);
    color: var(--wp--preset--color--olive);
}
.wp-block-group.statement .statement__body {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.9;
    margin: 0;
    color: var(--wp--preset--color--olive);
}

/* Kontexte section ========================================================= */
.wp-block-group.kontexte {
    color: #fff;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    padding-inline: max(clamp(1.25rem, 6vw, 8rem), calc((100% - 1170px) / 2));
}
.wp-block-group.kontexte .wp-block-columns.kontexte__inner {
    gap: clamp(2rem, 8vw, 7.5rem);   /* ~119px at desktop = Figma gap */
}
.wp-block-group.kontexte .wp-block-column.kontexte__main {
    flex: 1 1 0;
    min-width: 0;
}
.wp-block-group.kontexte .wp-block-column.kontexte__sidebar {
    flex: 0 0 24%;                    /* matches Figma sidebar width (281/1170) */
}

.wp-block-group.kontexte .kontexte__intro {
    font-weight: 400;
    color: var(--wp--preset--color--rose);
    font-size: clamp(2rem, 3vw, 2.75rem);
    margin: 0 0 2rem;
}

/* Service blocks =========================================================== */
.wp-block-group.service { margin-bottom: 2.5rem; }
.wp-block-group.service:last-of-type { margin-bottom: 0; }
.wp-block-group.service h3.wp-block-heading {
    font-weight: 700;
    font-size: clamp(1.625rem, 2.4vw, 2.125rem);
    line-height: 1.1;
    margin: 0 0 .5rem;
    color: #fff;
}
.wp-block-group.service h4.wp-block-heading {
    font-weight: 400;
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    margin: 0 0 1.25rem;
    color: #fff;
    line-height: 1.4;
}
.wp-block-group.service ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: .5rem;
}
.wp-block-group.service li {
    position: relative;
    padding-left: 2.4rem;
    line-height: 1.4;
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
}
.wp-block-group.service li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .15em;
    width: 1.4rem;
    height: 1.4rem;
    background: url(../images/icon-check.svg) no-repeat center / contain;
}
.wp-block-group.service hr.service__divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
    background: transparent;          /* WP-Default-Separator hat bg, das reset man hier */
    height: 0;
    margin: 4rem 0;
    width: 100%;                      /* override WP-Default `.wp-block-separator { width: 100px }` */
    max-width: 770px;                 /* Figma Vector 1 width = 770px */
}

/* Sidebar (right column) =================================================== */
.wp-block-group.kontexte .kontexte__sidebar .wp-block-image.portrait-small {
    position: relative;   /* anchor for the overlay pseudo-element */
    width: max-content;   /* shrink to image so overlay aligns */
    max-width: 100%;
}
.wp-block-group.kontexte .kontexte__sidebar .wp-block-image.portrait-small img {
    width: 100%;
    max-width: 270px;
    aspect-ratio: 270/384;
    object-fit: cover;
    display: block;
}
.wp-block-group.kontexte .kontexte__sidebar .wp-block-image.portrait-small::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(89, 82, 64, 0.27);   /* Figma Rectangle 8 — olive at 27% */
    pointer-events: none;
}
.wp-block-group.kontexte .kontexte__sidebar .wp-block-image { margin: 0 0 5rem; }

.wp-block-group.kontexte .wp-block-group.contact-card {
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    line-height: 1.65;
    margin-bottom: 2rem;
}
.wp-block-group.kontexte .wp-block-group.contact-card h4 {
    font-weight: 700;
    margin: 0 0 .35rem;
    font-size: inherit;
}
.wp-block-group.kontexte .wp-block-group.contact-card p { margin: 0; }
.wp-block-group.kontexte .wp-block-group.contact-card a {
    color: inherit;
    text-decoration: none;
}
.wp-block-group.kontexte .wp-block-group.contact-card a:hover { text-decoration: underline; }

.wp-block-group.kontexte .linkedin-link a {
    display: inline-flex;
    flex-direction: column;
    gap: .75rem;
    color: #fff;
    text-decoration: none;
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    line-height: 1.4;
}
.wp-block-group.kontexte .linkedin-link a::before {
    content: '';
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    background: url(../images/icon-linkedin.svg) no-repeat left center / contain;
}
.wp-block-group.kontexte .linkedin-link a:hover { color: var(--wp--preset--color--rose); }

/* Final CTA ================================================================ */
.wp-block-group.final-cta { margin-top: clamp(3rem, 6vw, 8rem); }
.wp-block-group.final-cta h2.wp-block-heading {
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);   /* 24px → 34px (Figma) */
    line-height: 1.2;
    margin: 0 0 1.75rem;
    color: #fff;
}

/* Site footer (template part) ============================================== */
/* Override default block-spacing margin between post-content and template-part */
footer.wp-block-template-part {
    margin-block-start: 0;
}
.site-footer {
    background: var(--wp--preset--color--olive);
    color: #fff;
    padding-block: clamp(2rem, 4vw, 3rem);
}
.site-footer__inner {
    max-width: 1170px;
    margin-inline: auto;
    padding-inline: var(--wp--style--root--padding-left, 1rem);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(1rem, 1.3vw, 1.125rem);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .scroll-up {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.site-footer .scroll-up::before {
    content: '';
    width: 100%;
    height: 100%;
    background: url(../images/icon-arrow-up.svg) no-repeat center / contain;
}

/* Subpages (Impressum / Datenschutz) ======================================= */
.wp-block-group.subpage {
    /* Top padding accommodates the absolute site header (logo) */
    padding-block: clamp(8rem, 18vw, 16rem) clamp(3rem, 6vw, 5rem);
    padding-inline: max(clamp(1.25rem, 6vw, 8rem), calc((100% - 1170px) / 2));
}
.subpage h1.subpage__title,
.subpage h1.wp-block-heading {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 4rem);          /* 32px → 64px (Figma Hero-H1) */
    line-height: 1.15;
    margin: 0 0 clamp(2rem, 4vw, 4rem);
    color: #fff;
    max-width: 1170px;
}
.subpage p {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);   /* 18px → 22px (Figma) */
    line-height: 1.9;
    margin: 0 0 1.5rem;
    max-width: 1170px;
}
.subpage strong {
    font-weight: 700;
}
.subpage a {
    color: inherit;
    text-decoration: underline;
}
.subpage a:hover {
    text-decoration: none;
}
/* Datenschutz: section sub-headers inside body (44px Inter Regular per Figma) */
.subpage h2.wp-block-heading {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2.75rem);     /* 24px → 44px */
    line-height: 1.32;
    margin: clamp(2.5rem, 5vw, 4rem) 0 1rem;
    color: #fff;
    max-width: 1170px;
}
.subpage h3.wp-block-heading {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.3;
    margin: clamp(1.5rem, 3vw, 2rem) 0 .75rem;
    color: #fff;
}
.subpage ul, .subpage ol {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.9;
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
    max-width: 1170px;
}
/* The final-cta within subpage: heading and button colors stay olive on rose */
.subpage .wp-block-group.final-cta { margin-top: clamp(4rem, 8vw, 7rem); }

/* Editor-only adjustments (Block Editor canvas) ============================ */
/* The editor wraps content; ensure full-width sections behave the same.    */
.editor-styles-wrapper .wp-block-cover.hero,
.editor-styles-wrapper .wp-block-group.statement,
.editor-styles-wrapper .wp-block-group.kontexte,
.editor-styles-wrapper .wp-block-group.portrait-wrap {
    /* Hint: in the iframe-based editor this rule is rarely needed since
       block dimensions match frontend. Kept as a safety net for older WP. */
}

/* Visually-hidden helper =================================================== */
.sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}