/* Shell/layout ownership.
   Owns page-start clearance, live-header-offset fallbacks, and the canonical frontend hero placement/overlay rules.
   Do not re-scatter frontend hero presentation selectors into unrelated consumer files after the cleanup pass. */

body {
    color: var(--ta-color-text);
    background: var(--ta-surface-page);
}

/* Layout class model:
   - ta-shell = shared structural inner wrapper used by header/footer regions
   - ta-layout-container--* = width utilities for template/layout wrappers
   - ta-layout-flow = Gutenberg content flow inside entry content */

.site {
    min-height: 100vh;
    background: var(--ta-surface-page);
}

.ta-shell,
.ta-layout-container {
    box-sizing: border-box;
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-content));
    margin-inline: auto;
}

.ta-shell,
.ta-layout-container--content {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-content));
}

.ta-layout-container--reading {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-reading));
}

.ta-layout-container--wide {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-wide));
}

.ta-layout-full,
.ta-layout-container--full {
    width: 100%;
    max-width: none;
}

/* Main content baseline: posts and non-page templates clear the live header offset.
   Pages override this later because standard pages and Landing Page use fixed, explicit clearance rules. */
.ta-site-main {
    padding-top: var(--ta-live-header-offset, var(--ta-nav-desktop-context-height));
    padding-bottom: var(--ta-site-main-padding-bottom);
}

body.admin-bar .ta-site-main {
    padding-top: var(--ta-live-header-offset, var(--ta-nav-desktop-context-height));
}

.ta-site-main > :first-child {
    margin-top: 0;
    padding-top: 0;
}

.ta-layout-flow > :first-child {
    margin-top: 0;
}

.ta-site-main > .ta-entry,
.ta-site-main > article,
.ta-site-main > .type-page,
.ta-site-main > .type-post {
    width: 100%;
}


/* Designed page terminal rhythm.
   Service and How It Works pages end with their own related/next section.
   Do not add generic main-bottom spacing after that terminal component. */
body.ta-template-service .ta-site-main,
body.ta-template-how-it-works .ta-site-main,
body.ta-template-landing .ta-site-main {
    padding-bottom: 0;
}

.ta-layout-flow > * {
    box-sizing: border-box;
    min-width: 0;
}

.ta-layout-flow > :where(:not(.alignwide):not([class*="alignwide"]):not(.alignfull):not([class*="alignfull"])) {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-content));
    margin-inline: auto;
}

.ta-layout-flow > :where(.alignwide, [class*="alignwide"]) {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-wide));
    margin-inline: auto;
}

.ta-layout-flow > :where(.alignfull, [class*="alignfull"]) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.ta-layout-flow > .alignfull + .alignfull,
.ta-layout-flow > [class*="alignfull"] + [class*="alignfull"] {
    margin-top: 0;
}

.ta-layout-flow > :where(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-media-text, .wp-block-gallery) {
    margin-block: var(--ta-content-section-gap);
}

.ta-layout-flow > :where(.wp-block-group, .wp-block-cover) {
    position: relative;
}

.ta-layout-flow > :where(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-media-text, .wp-block-gallery) + :where(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-media-text, .wp-block-gallery) {
    margin-top: calc(var(--ta-content-section-gap) * 0.54);
}

.ta-layout-section,
.ta-layout-band {
    position: relative;
    isolation: isolate;
}

.ta-layout-section {
    padding-block: var(--ta-layout-section-space-block);
}

.ta-layout-section--tight {
    padding-block: var(--ta-layout-section-space-block-tight);
}

.ta-layout-section--loose {
    padding-block: var(--ta-layout-section-space-block-loose);
}

.ta-layout-section--stack-gap-compact {
    margin-bottom: var(--ta-layout-section-stack-gap-compact);
}

.ta-heading--flush-top {
    margin-top: 0 !important;
}


.ta-layout-section__intro {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-reading));
    margin-inline: auto;
    margin-bottom: var(--ta-layout-section-intro-content-gap);
}

.ta-layout-section__intro.alignwide,
.ta-layout-section__intro--wide {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-wide));
}

.ta-layout-section__intro--center {
    text-align: center;
}

.ta-layout-section__intro > :where(h2, h3, .wp-block-heading) {
    margin-block: 0;
}

.ta-layout-section__intro > :where(h2, h3, .wp-block-heading) + :where(p, .wp-block-paragraph) {
    margin-block: var(--ta-layout-section-heading-body-gap) 0;
}

.ta-layout-section__intro > :where(p, .wp-block-paragraph) + :where(p, .wp-block-paragraph) {
    margin-block-start: var(--ta-layout-section-heading-body-gap);
}

.ta-layout-band {
    padding-block: var(--ta-layout-band-padding-block);
    padding-inline: var(--ta-layout-band-padding-inline);
}

.ta-layout-section__bg,
.ta-layout-band__bg {
    position: absolute;
    inset: 0;
    z-index: var(--ta-layout-layer-z-base);
    pointer-events: none;
}

.ta-layout-section__inner,
.ta-layout-band__inner {
    position: relative;
    z-index: var(--ta-layout-layer-z-content);
}

.ta-layout-grid {
    display: grid;
    gap: var(--ta-layout-grid-gap);
}

.ta-layout-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ta-layout-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ta-layout-empty-state {
    padding-top: var(--ta-layout-section-space-block);
}

@media (max-width: 900px) {
    .ta-layout-grid--2,
    .ta-layout-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Burger-path fallback: JS normally syncs --ta-live-header-offset from the live context bar bottom.
   These values prevent a first-paint jump before JS has run across the full burger range (<= 900px).
   Admin offsets still split by band: narrow/mobile uses the mobile admin offset, mid burger-tablet uses the burger-mid offset. */
@media (max-width: 900px) {
    .ta-site-main {
        padding-top: var(--ta-live-header-offset, var(--ta-nav-mobile-header-height));
    }
}

@media (max-width: 782px) {
    body.admin-bar .ta-site-main {
        padding-top: calc(var(--ta-live-header-offset, calc(var(--ta-nav-mobile-header-height) + var(--ta-header-admin-offset-mobile))) - var(--ta-header-admin-offset-mobile));
    }
}

@media (min-width: 783px) and (max-width: 900px) {
    body.admin-bar .ta-site-main {
        padding-top: calc(var(--ta-live-header-offset, calc(var(--ta-nav-mobile-header-height) + var(--ta-header-admin-offset-burger-mid))) - var(--ta-header-admin-offset-burger-mid));
    }
}

@media (max-width: 900px) {
    .ta-entry-content > :first-child,
    .ta-layout-flow > :is(:first-child, :first-child.wp-block-cover, :first-child.wp-block-cover-image) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Content-start ownership map
   - <= 900px burger path: shell falls back to the live/mobile header offset before JS,
     then hero-template ranges can zero that page-start padding and let hero content clearance take over.
   - >= 901px desktop path: standard pages reserve full two-bar clearance here;
     hero-template pages reserve only the desktop context-bar height so the hero can begin beneath the local/site layer.
   This split is intentional. Large tablet follows the desktop path, not the burger path. */

@media (min-width: 901px) {
    body.page:not(.ta-template-cover-first) .ta-site-main {
        padding-top: var(--ta-header-desktop-stack-height);
    }

    body.page.ta-template-cover-first .ta-site-main {
        padding-top: 0;
    }

    body.admin-bar.page:not(.ta-template-cover-first) .ta-site-main {
        padding-top: var(--ta-header-desktop-stack-height);
    }

    body.admin-bar.page.ta-template-cover-first .ta-site-main {
        padding-top: 0;
    }
}

/* Hero system base tokens now consume derived clearance variables from tokens.css.
   That keeps page-start ownership in shell.css while moving repeated formulas into the token layer. */

/* Built-in hero system
   Scope rules intentionally target:
   - Landing Page template: first full-width Cover block
   - Explicit opt-in: .ta-cover-hero
   This keeps generic Cover blocks outside hero usage unaffected. */
body.page.ta-template-landing,
.ta-cover-hero {
    --ta-hero-mode-height: var(--ta-hero-desktop-height);
    --ta-hero-mode-min-height: var(--ta-hero-desktop-min-height);
    --ta-hero-mode-content-max-width: var(--ta-cover-hero-content-max-width);
    --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
    --ta-hero-mode-content-padding-bottom: var(--ta-hero-desktop-content-padding-bottom);
    --ta-hero-mode-title-max-width: var(--ta-hero-desktop-title-max-width);
    --ta-hero-mode-title-font-size: var(--ta-hero-desktop-title-font-size);
    --ta-hero-mode-title-line-height: var(--ta-hero-desktop-title-line-height);
    --ta-hero-mode-body-max-width: var(--ta-hero-desktop-body-max-width);
    --ta-hero-mode-body-margin-top: var(--ta-hero-desktop-body-margin-top);
    --ta-hero-mode-body-font-size: var(--ta-hero-desktop-body-font-size);
    --ta-hero-mode-body-line-height: var(--ta-hero-desktop-body-line-height);
    --ta-hero-mode-buttons-margin-top: var(--ta-hero-desktop-buttons-margin-top);
    --ta-hero-mode-buttons-width: auto;
    --ta-hero-mode-buttons-gap: var(--ta-content-buttons-gap);
}

/* Hero-template readability refinement
   Scope is intentionally limited to the Landing Page and Service Page templates.
   It gives headings a small optical lift and softens body text without changing
   the wider theme typography or non-hero content. */
body.page.ta-template-cover-first {
    --ta-hero-template-title-scale: 1.07;
    --ta-hero-title-color: #ffffff;
    --ta-hero-body-color: #ffffff;
}

/* Hero mode map
   - mobile: <= 767px
   - narrow burger-tablet: 768-782px
   - mid burger-tablet: 783-900px
   - large tablet with desktop header: 901-1100px

   Keep these ranges explicit. The 782/783 edge intentionally mirrors the WordPress
   admin-bar responsive boundary and the governed breakpoint registry. It exists to
   prevent header/admin-bar clearance gaps and should not be simplified as a cosmetic
   cleanup. The narrow and mid tablet bands are not interchangeable, and large tablet
   intentionally shares header ownership with desktop while still using its own hero
   composition tokens. */
@media (max-width: 767px) {
    body.page.ta-template-landing,
    .ta-cover-hero {
        --ta-hero-mode-height: var(--ta-hero-mobile-height);
        --ta-hero-mode-min-height: var(--ta-hero-mobile-min-height);
        --ta-hero-mode-content-max-width: 100%;
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
        --ta-hero-mode-content-padding-bottom: var(--ta-hero-mobile-content-padding-bottom);
        --ta-hero-mode-title-max-width: var(--ta-hero-mobile-title-max-width);
        --ta-hero-mode-title-font-size: var(--ta-hero-mobile-title-font-size);
        --ta-hero-mode-title-line-height: var(--ta-hero-mobile-title-line-height);
        --ta-hero-mode-body-max-width: var(--ta-hero-mobile-body-max-width);
        --ta-hero-mode-body-margin-top: var(--ta-hero-mobile-body-margin-top);
        --ta-hero-mode-body-font-size: var(--ta-hero-mobile-body-font-size);
        --ta-hero-mode-body-line-height: var(--ta-hero-mobile-body-line-height);
        --ta-hero-mode-buttons-margin-top: var(--ta-hero-mobile-buttons-margin-top);
        --ta-hero-mode-buttons-width: var(--ta-hero-mobile-buttons-width);
        --ta-hero-mode-buttons-gap: var(--ta-hero-mobile-buttons-gap);
    }

    .ta-cover-hero .wp-block-cover__inner-container,
    body.page.ta-template-cover-first :is(.ta-entry-content, .ta-layout-flow) > .wp-block-cover.alignfull:first-child .wp-block-cover__inner-container {
        width: min(calc(100% - (var(--ta-layout-gutter) * 0.5)), var(--ta-layout-width-wide));
    }

    body.page.ta-template-cover-first .ta-site-main {
        padding-top: 0;
    }
}

/* Narrow boundary tablet (for example iPad Mini portrait width) stays on the burger path.
   Page-start padding is zeroed so the cover can sit directly under the burger/header layer;
   inner hero content then owns the extra top clearance. */
@media (min-width: 768px) and (max-width: 782px) {
    body.page.ta-template-cover-first .ta-site-main {
        padding-top: 0;
    }

    body.page.ta-template-landing,
    .ta-cover-hero {
        --ta-hero-mode-height: var(--ta-hero-narrow-tablet-height);
        --ta-hero-mode-min-height: var(--ta-hero-narrow-tablet-min-height);
        --ta-hero-mode-content-max-width: 100%;
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
        --ta-hero-mode-content-padding-bottom: var(--ta-hero-narrow-tablet-content-padding-bottom);
        --ta-hero-mode-title-max-width: var(--ta-hero-narrow-tablet-title-max-width);
        --ta-hero-mode-title-font-size: var(--ta-hero-narrow-tablet-title-font-size);
        --ta-hero-mode-title-line-height: var(--ta-hero-narrow-tablet-title-line-height);
        --ta-hero-mode-body-max-width: var(--ta-hero-narrow-tablet-body-max-width);
        --ta-hero-mode-body-margin-top: var(--ta-hero-narrow-tablet-body-margin-top);
        --ta-hero-mode-body-font-size: var(--ta-hero-narrow-tablet-body-font-size);
        --ta-hero-mode-body-line-height: var(--ta-hero-narrow-tablet-body-line-height);
        --ta-hero-mode-buttons-margin-top: var(--ta-hero-narrow-tablet-buttons-margin-top);
    }
}

/* Burger-header hero path: mid tablet keeps the collapsed/mobile-style header clearance model.
   Large tablet intentionally exits this path and rejoins the desktop header/page-start model below. */
@media (min-width: 783px) and (max-width: 900px) {
    body.page.ta-template-cover-first .ta-site-main {
        padding-top: 0;
    }

    body.page.ta-template-landing,
    .ta-cover-hero {
        --ta-hero-mode-height: var(--ta-hero-mid-tablet-height);
        --ta-hero-mode-min-height: var(--ta-hero-mid-tablet-min-height);
        --ta-hero-mode-content-max-width: 100%;
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
        --ta-hero-mode-content-padding-bottom: var(--ta-hero-mid-tablet-content-padding-bottom);
        --ta-hero-mode-title-max-width: var(--ta-hero-mid-tablet-title-max-width);
        --ta-hero-mode-title-font-size: var(--ta-hero-mid-tablet-title-font-size);
        --ta-hero-mode-title-line-height: var(--ta-hero-mid-tablet-title-line-height);
        --ta-hero-mode-body-max-width: var(--ta-hero-mid-tablet-body-max-width);
        --ta-hero-mode-body-margin-top: var(--ta-hero-mid-tablet-body-margin-top);
        --ta-hero-mode-body-font-size: var(--ta-hero-mid-tablet-body-font-size);
        --ta-hero-mode-body-line-height: var(--ta-hero-mid-tablet-body-line-height);
        --ta-hero-mode-buttons-margin-top: var(--ta-hero-desktop-buttons-margin-top);
    }
}

/* Large tablet deliberately uses the desktop header path, not the burger-header path.
   Keep this range explicit so hero spacing and header behaviour stay aligned. */
@media (min-width: 901px) and (max-width: 1100px) {
    body.page.ta-template-cover-first .ta-site-main {
        padding-top: 0;
    }

    body.page.ta-template-landing,
    .ta-cover-hero {
        --ta-cover-hero-content-optical-shift-x: var(--ta-hero-large-tablet-content-shift-x);
        --ta-hero-mode-height: var(--ta-hero-large-tablet-height);
        --ta-hero-mode-min-height: var(--ta-hero-large-tablet-min-height);
        --ta-hero-mode-content-max-width: var(--ta-hero-large-tablet-content-max-width);
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
        --ta-hero-mode-content-padding-bottom: var(--ta-hero-large-tablet-content-padding-bottom);
        --ta-hero-mode-title-max-width: var(--ta-hero-large-tablet-title-max-width);
        --ta-hero-mode-title-font-size: var(--ta-hero-large-tablet-title-font-size);
        --ta-hero-mode-title-line-height: var(--ta-hero-large-tablet-title-line-height);
        --ta-hero-mode-body-max-width: var(--ta-hero-large-tablet-body-max-width);
        --ta-hero-mode-body-margin-top: var(--ta-hero-large-tablet-body-margin-top);
        --ta-hero-mode-body-font-size: var(--ta-hero-large-tablet-body-font-size);
        --ta-hero-mode-body-line-height: var(--ta-hero-large-tablet-body-line-height);
        --ta-hero-mode-buttons-margin-top: var(--ta-hero-large-tablet-buttons-margin-top);
    }
}

/* Admin-bar overrides mirror the same ownership model as the non-admin rules above.
   The 782/783 split is deliberate: WordPress changes admin-bar behaviour at this
   boundary, and earlier versions exposed small header/cover gaps when this was
   treated as a generic tablet breakpoint. Keep these admin-bar ranges aligned with
   inc/breakpoints.php and core/BREAKPOINT-RULES.md; do not collapse them unless the
   full logged-in/admin-bar hero and service-page offset matrix is retested. */
@media (max-width: 767px) {
    body.admin-bar {
        --ta-header-burger-clearance: var(--ta-live-header-offset, calc(var(--ta-nav-mobile-header-height) + var(--ta-header-admin-offset-mobile)));
    }

    body.admin-bar.page.ta-template-landing {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
    }

    body.admin-bar.page.ta-template-cover-right {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
    }
}

@media (min-width: 768px) and (max-width: 782px) {
    body.admin-bar {
        --ta-header-burger-clearance: var(--ta-live-header-offset, calc(var(--ta-nav-mobile-header-height) + var(--ta-header-admin-offset-mobile)));
    }

    body.admin-bar.page.ta-template-landing {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
    }

    body.admin-bar.page.ta-template-cover-right {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
    }
}

@media (min-width: 783px) and (max-width: 900px) {
    body.admin-bar {
        --ta-header-burger-clearance: var(--ta-live-header-offset, calc(var(--ta-nav-mobile-header-height) + var(--ta-header-admin-offset-burger-mid)));
    }

    body.admin-bar.page.ta-template-landing {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
    }

    body.admin-bar.page.ta-template-cover-right {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top);
    }
}

@media (min-width: 901px) {
    body.admin-bar.page.ta-template-landing {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top-admin);
    }

    body.admin-bar.page.ta-template-cover-right {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top-admin);
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    body.admin-bar.page.ta-template-landing {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top-admin);
    }

    body.admin-bar.page.ta-template-cover-right {
        --ta-hero-mode-content-padding-top: var(--ta-hero-desktop-clearance-top-admin);
    }

    body.admin-bar.page.ta-template-cover-right .ta-site-main {
        padding-top: 0;
    }
}

/* Pattern/content rhythm helpers */
.ta-layout-flow > .wp-block-columns p,
.ta-layout-section .wp-block-columns p {
    text-align: left;
}

.ta-layout-section--focus > :where(h2, .wp-block-heading),
.ta-layout-section--cta > :where(h2, .wp-block-heading),
.ta-layout-section--cta > :where(p, .wp-block-paragraph),
.ta-layout-section--cta > .wp-block-buttons {
    text-align: center;
}

.ta-layout-section--focus > :where(h2, .wp-block-heading),
.ta-layout-section--focus > :where(ul, ol, p, .wp-block-list, .wp-block-paragraph),
.ta-layout-section--cta > :where(h2, .wp-block-heading, p, .wp-block-paragraph, .wp-block-buttons) {
    width: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-reading));
    margin-inline: auto;
}

.ta-layout-section--focus > :where(ul, ol, .wp-block-list) {
    text-align: left;
}

.ta-layout-section--cta > .wp-block-buttons {
    justify-content: center;
}

.ta-layout-section--focus > :where(h2, .wp-block-heading),
.ta-layout-section--cta > :where(h2, .wp-block-heading) {
    margin-block: 0 var(--ta-layout-section-heading-margin-block-end);
}

.ta-layout-section--focus > :where(ul, ol, .wp-block-list) {
    margin-block: var(--ta-layout-section-list-margin-block-start) var(--ta-layout-section-list-margin-block-end);
}

.ta-layout-section--focus > :where(p, .wp-block-paragraph),
.ta-layout-section--cta > :where(p, .wp-block-paragraph) {
    margin-block: var(--ta-layout-section-paragraph-margin-block-start) 0;
}

.ta-layout-section--cta > .wp-block-buttons {
    margin-top: var(--ta-layout-section-buttons-margin-top);
}

.ta-layout-flow > :where(.ta-layout-section, .wp-block-group.ta-layout-section):last-child {
    padding-bottom: calc(var(--ta-layout-section-space-block-tight) * 0.65);
}

/* Native Tar-Aiym cover hero.
   Designed pages use semantic ta-cover-hero markup instead of Gutenberg Cover.
   This block owns full-bleed breakout, media/overlay, placement, fluid text
   width, and responsive clearance for both left and right hero modes. */
.ta-entry-content > .ta-cover-hero:first-child,
.ta-designed-content > .ta-cover-hero:first-child {
    position: relative;
    left: 50%;
    right: 50%;
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-inline-start: -50vw;
    margin-inline-end: -50vw;
    margin-block: 0;
}

.ta-cover-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    block-size: var(--ta-hero-mode-height);
    min-block-size: var(--ta-hero-mode-height);
    max-block-size: var(--ta-hero-mode-height);
    padding: 0;
    background-color: var(--ta-hero-surface-bg);
}

.ta-cover-hero__image,
.ta-cover-hero__overlay {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    margin: 0;
}

.ta-cover-hero__image {
    z-index: 0;
    object-fit: cover;
    object-position: var(--ta-cover-hero-image-position, center center);
}

.ta-cover-hero__overlay {
    z-index: 1;
    pointer-events: none;
    background-color: #000000;
    opacity: var(--ta-hero-overlay-opacity);
}

.ta-cover-hero.ta-hero-placement-right .ta-cover-hero__overlay {
    background-image: linear-gradient(to left, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%);
    background-blend-mode: multiply;
}

.ta-cover-hero.ta-hero-placement-left .ta-cover-hero__overlay {
    background-image: linear-gradient(to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%);
    background-blend-mode: multiply;
}

.ta-cover-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: start;
    block-size: 100%;
    min-block-size: 100%;
    inline-size: min(100% - (var(--ta-layout-gutter) * 2), var(--ta-layout-width-content));
    margin-inline: auto;
    container-type: inline-size;
}

.ta-cover-hero.ta-hero-placement-left .ta-cover-hero__inner { justify-items: start; }
.ta-cover-hero.ta-hero-placement-right .ta-cover-hero__inner { justify-items: end; }
.ta-cover-hero.ta-hero-placement-center .ta-cover-hero__inner { justify-items: center; }

.ta-cover-hero__content {
    min-inline-size: 0;
    margin: 0;
    align-self: start;
    padding-block-start: var(--ta-cover-hero-top-offset-fluid);
    padding-block-end: 0;
    transform: translate(var(--ta-cover-hero-content-optical-shift-x), var(--ta-cover-hero-content-optical-shift-y));
}

.ta-cover-hero.ta-hero-placement-right .ta-cover-hero__content {
    inline-size: var(--ta-cover-hero-right-width-fluid);
    justify-self: end;
    margin-inline: auto 0;
}

.ta-cover-hero.ta-hero-placement-left .ta-cover-hero__content {
    inline-size: var(--ta-hero-left-width-fluid);
    justify-self: start;
    margin-inline: 0 auto;
}

.ta-cover-hero.ta-hero-placement-center .ta-cover-hero__content {
    inline-size: min(100%, var(--ta-hero-mode-content-max-width));
    justify-self: center;
    margin-inline: auto;
}

.ta-cover-hero__content > :is(h1, p) {
    inline-size: 100%;
    max-inline-size: none;
    min-inline-size: 0;
    margin-inline: 0;
    text-align: left;
    text-wrap: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

.ta-cover-hero__content > h1 {
    margin-block: 0;
    color: var(--ta-hero-title-color);
    text-shadow: var(--ta-hero-title-shadow);
    font-size: calc(var(--ta-hero-mode-title-font-size) * var(--ta-hero-template-title-scale, 1));
    font-weight: 700;
    line-height: var(--ta-hero-mode-title-line-height);
    letter-spacing: var(--ta-hero-title-letter-spacing);
}

.ta-cover-hero__content > p {
    margin-block-start: var(--ta-hero-mode-body-margin-top);
    margin-block-end: 0;
    color: var(--ta-hero-body-color);
    text-shadow: var(--ta-hero-body-shadow);
    font-size: var(--ta-hero-mode-body-font-size);
    line-height: var(--ta-hero-mode-body-line-height);
    font-weight: var(--ta-hero-body-font-weight);
}

.ta-cover-hero.ta-hero-placement-right .ta-cover-hero__content > p {
    inline-size: min(100%, var(--ta-cover-hero-right-body-stable-max-width));
    max-inline-size: var(--ta-cover-hero-right-body-stable-max-width);
    margin-inline: 0 auto;
}

.ta-cover-hero.ta-hero-placement-left .ta-cover-hero__content > h1 {
    inline-size: min(100%, var(--ta-cover-hero-left-title-stable-max-width));
    max-inline-size: var(--ta-cover-hero-left-title-stable-max-width);
}

.ta-cover-hero.ta-hero-placement-left .ta-cover-hero__content > p {
    inline-size: min(100%, var(--ta-cover-hero-left-body-stable-max-width));
    max-inline-size: var(--ta-cover-hero-left-body-stable-max-width);
    margin-inline: 0 auto;
}

@media (max-width: 767px) {
    .ta-cover-hero__inner {
        inline-size: min(calc(100% - (var(--ta-layout-gutter) * 0.5)), var(--ta-layout-width-wide));
    }

    .ta-cover-hero.ta-hero-placement-right .ta-cover-hero__content {
        transform: translate(var(--ta-cover-hero-mobile-content-optical-shift-x), var(--ta-cover-hero-mobile-content-optical-shift-y));
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .ta-cover-hero.ta-hero-placement-right .ta-cover-hero__content {
        transform: translate(var(--ta-cover-hero-large-tablet-content-optical-shift-x), var(--ta-cover-hero-large-tablet-content-optical-shift-y));
    }
}

@media (min-width: 783px) and (max-width: 900px) {
    .ta-cover-hero.ta-hero-placement-right .ta-cover-hero__content {
        transform: translate(var(--ta-cover-hero-mid-tablet-content-optical-shift-x), var(--ta-cover-hero-mid-tablet-content-optical-shift-y));
    }
}

@media (min-width: 768px) and (max-width: 782px) {
    .ta-cover-hero.ta-hero-placement-right .ta-cover-hero__content {
        transform: translate(var(--ta-cover-hero-narrow-tablet-content-optical-shift-x), var(--ta-cover-hero-narrow-tablet-content-optical-shift-y));
    }
}