/* tt360/hero's own CSS (docs/PLAN.md §9). Absorbs the hero-visual sizing/border rule that was
   duplicated verbatim across 5 page-specific layout files in the prototype (platform.css,
   financial-management.css, reporting.css, ai-assistant.css, resources.css), and the
   left-aligned/no-ring treatment that was five separate page-specific one-offs
   (thought-leadership.css, newsletter-archive.css, newsletter-issue-detail.css,
   article-detail.css) there, now both real block attributes instead. */

.tt360-hero {
    position: relative;
    padding: 56px 0 80px;
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end — see
   the full comment on .wp-block-tt360-section in components/section.css. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-hero {
    max-width: none;
}

/* Background accent (None/Ring/Custom image, inc/blocks/hero/render.php): the default ring-arc.svg
   is the fallback for the --tt360-bg-accent-image custom property, set inline only when a Custom
   image is chosen — the position/size/opacity stay identical either way, so a custom image always
   sits in the ring's exact spot, scaled to its exact box. 433px/435px matches ring-arc.svg's own
   intrinsic size exactly (it has no explicit size here before this change either), so adding it is
   not a visual change for the default ring. */
.tt360-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tt360-bg-accent-image, url('../../images/ring-arc.svg')) no-repeat 50% 80px / 433px 435px;
    opacity: 0.3;
    pointer-events: none;
}

.tt360-hero.tt360-hero-accent-none::before {
    content: none;
}

/* Pricing's hero is 56/96, not the base 56/80 (confirmed one-off, not yet reconciled
   into one shared value). It also uses smaller type throughout: the real markup wraps its
   eyebrow+H1 in .section-heading (48px/1.08/-0.96px heading, 16px gap) rather than this block's
   own default .hero-content sizing, and its intro paragraph is 16px/620px, not 18px/758px. Since
   this block keeps eyebrow/headline/description as plain .hero-content children rather than a
   nested .section-heading, these overrides reproduce the same visual result directly. */
.tt360-hero.tt360-hero-padding-pricing {
    padding-bottom: 96px;
}

.tt360-hero.tt360-hero-padding-pricing .hero-content {
    gap: 16px;
}

.tt360-hero.tt360-hero-padding-pricing .hero-content .headline {
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.96px;
}

.tt360-hero.tt360-hero-padding-pricing .hero-content .description {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.5;
}

/* The gap from the hero's own text block down to whatever a page adds in this block's
   InnerBlocks area below it (Pricing's card grid, auto-rendered as .pricing-cards — see
   inc/blocks/card-grid/render.php). Matches .pricing-hero .pricing-cards's own margin-top in
   the prototype exactly. */
.tt360-hero.tt360-hero-padding-pricing .pricing-cards {
    margin-top: 55px;
}

.tt360-hero .container {
    position: relative;
}

.tt360-hero .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 27.4px;
    max-width: 998px;
    margin: 0 auto;
    text-align: center;
}

.tt360-hero.tt360-hero-align-left .hero-content {
    align-items: flex-start;
    margin: 0;
    text-align: left;
}

.tt360-hero .hero-content .headline {
    margin: 0;
    font-size: 54px;
    line-height: 1.2;
    letter-spacing: -1.28px;
}

.tt360-hero .hero-content .description {
    max-width: 758px;
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
}

.tt360-hero .hero-visual {
    margin-top: 55px;
}

.tt360-hero .hero-visual img,
.tt360-hero .hero-visual video {
    display: block;
    width: 100%;
    max-width: 1167px;
    height: auto;
    margin: 0 auto;
}

/* Framed is the default (4 of 5 current image/video hero pages); Project Management is the one
   confirmed exception ("no card framing, just the plain image, per Elisa"). */
.tt360-hero .hero-visual.tt360-hero-visual-framed img,
.tt360-hero .hero-visual.tt360-hero-visual-framed video {
    border: 1px dashed rgba(var(--dark-green), 0.15);
    border-radius: 4px;
}

/* lg */
@media (max-width: 991.98px) {
    .tt360-hero {
        padding-bottom: 40px;
    }

    /* Pricing's own padding-bottom has no lg step at all in the prototype
       (.pricing-hero stays at 96px here, only dropping to 48px below 575.98px) —
       this rule used to also drop it to 40px here, 56px short of the real value,
       found against the real rendered height, not assumed. */
}

/* md */
@media (max-width: 767.98px) {
    .tt360-hero .hero-content .headline {
        font-size: 36px;
    }

    .tt360-hero .hero-content .description {
        font-size: 16px;
    }

    /* Pricing's H1 follows .section-heading .heading's own md step (48px -> 30px) in the real
       markup, not the generic hero's 54px -> 36px step. */
    .tt360-hero.tt360-hero-padding-pricing .hero-content .headline {
        font-size: 30px;
    }
}

/* sm */
@media (max-width: 575.98px) {
    .tt360-hero {
        padding: 28px 0 40px;
    }

    .tt360-hero.tt360-hero-padding-pricing {
        padding: 28px 0 48px;
    }

    .tt360-hero .hero-visual {
        margin-top: 28px;
    }

    .tt360-hero .cta-button {
        width: 100%;
    }
}