/* Interior page system, shared by every batch (loaded after theme.css).
   A page uses the "page-canvas" template: breadcrumbs, then a page hero, then bands.
   Per-batch additions go in assets/css/pages-<batch>.css (auto-enqueued after this file).
   Every class here is set from the block editor: Advanced > Additional CSS class, or a block style. */

/* ---------------------------------------------------------------- page hero
   Group .his-page-hero > Columns: copy (eyebrow, H1 with a highlighted second line, lead, buttons) and an Image.
   Sage band by default; add .his-page-hero--dark for the charcoal version. */
.his-page-hero { background: var(--his-sage); padding: clamp(48px, 6vw, 90px) var(--his-gutter) !important; border-bottom: 1px solid var(--his-line); }
.his-page-hero > .wp-block-columns { max-width: var(--his-wrap); margin: 0 auto !important; gap: clamp(30px, 5vw, 80px) !important; align-items: center !important; }
.his-page-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .92; margin: 0 0 18px; }
.his-page-hero h1 mark { display: block; }
.his-page-hero .is-style-lead { margin: 0 0 26px !important; }
.his-page-hero .wp-block-image { margin: 0; background: #fff; border: 1px solid var(--his-line); padding: clamp(16px, 2.4vw, 32px); }
.his-page-hero .wp-block-image img { width: 100%; max-height: 360px; object-fit: contain; }
.his-page-hero .wp-block-image.is-style-fill { padding: 0; }
.his-page-hero .wp-block-image.is-style-fill img { object-fit: cover; max-height: 440px; aspect-ratio: 4 / 3; }
.his-page-hero--dark { background: var(--his-charcoal); border-bottom: 0; }
.his-page-hero--dark h1 { color: #fff; }
.his-page-hero--dark .is-style-lead, .his-page-hero--dark p { color: rgba(255,255,255,.85); }
.his-page-hero--dark mark { color: var(--his-mint) !important; }
.his-page-hero--dark .is-style-eyebrow { color: var(--his-mint-soft); }
.his-page-hero--dark .is-style-ghost .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 781px) { .his-page-hero .wp-block-column:has(> .wp-block-image) { order: -1; } }

/* ---------------------------------------------------------------- sections
   Group .his-section + a band style (Band: white / sage / mist / charcoal / black / green). */
.his-section { padding: var(--his-section) var(--his-gutter) !important; }
.his-section > * { max-width: var(--his-wrap); margin-left: auto !important; margin-right: auto !important; }
.his-section > .is-style-eyebrow, .his-section > .is-style-lead, .his-section > .is-style-big { margin-left: auto !important; }
.his-section.is-style-band-dark h2, .his-section.is-style-band-dark h3, .his-section.is-style-band-black h2, .his-section.is-style-band-black h3 { color: #fff; }
.his-section.is-style-band-dark p, .his-section.is-style-band-black p { color: rgba(255,255,255,.82); }
.his-section.is-style-band-green p { color: rgba(255,255,255,.9); }
.his-section.is-style-band-green .is-style-eyebrow { color: #fff; }
.his-section.is-style-band-green mark { color: #fff !important; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; }
.his-section.is-style-band-green .wp-block-button__link { background: #fff; color: var(--his-green-dark); }
.his-section.is-style-band-green .is-style-ghost .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.his-section-center { text-align: center; }
.his-section-center .is-style-lead { margin-left: auto !important; margin-right: auto !important; }
.his-section-center .wp-block-buttons { justify-content: center; }

/* ---------------------------------------------------------------- cards
   Group style "Card": white, hairline, green top rule. Put cards in a Group with a grid layout
   (minimum column width, e.g. 260px) and the class his-grid. */
.wp-block-group.is-style-card { background: #fff; border: 1px solid var(--his-line); border-top: 4px solid var(--his-green); padding: 26px 24px 24px; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.wp-block-group.is-style-card > * { margin: 0 !important; }
.is-style-card h3 { font-size: 1.6rem; line-height: 1; }
.is-style-card p { color: var(--his-gray); font-size: .95rem; }
.is-style-card .wp-block-buttons { margin-top: auto !important; padding-top: 6px; }
.is-style-card > .wp-block-image:first-child { margin: -26px -24px 8px !important; border-bottom: 1px solid var(--his-line); background: #f0f3f1; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.is-style-card > .wp-block-image:first-child img { width: 100%; height: 100%; object-fit: cover; }
.is-style-card > .wp-block-image.is-style-contain img { object-fit: contain; padding: 16px; mix-blend-mode: multiply; }
.is-style-band-white .is-style-card, .is-style-band-mist .is-style-card { background: var(--his-paper); }
.is-style-band-dark .is-style-card, .is-style-band-black .is-style-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); border-top-color: var(--his-green); }
.is-style-band-dark .is-style-card h3, .is-style-band-black .is-style-card h3 { color: #fff; }
.is-style-band-dark .is-style-card p, .is-style-band-black .is-style-card p { color: rgba(255,255,255,.78); }
.his-grid { gap: 16px !important; margin-top: clamp(24px, 3vw, 40px) !important; }
.his-grid > * { margin: 0 !important; }
.is-style-card .is-style-text .wp-block-button__link, .his-card-photo .is-style-text .wp-block-button__link { color: var(--his-green-text); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-variation-settings: "wdth" 80, "wght" 700; }
.is-style-band-dark .is-style-card .is-style-text .wp-block-button__link { color: var(--his-mint); }

/* ---------------------------------------------------------------- link tiles (List style "Link tiles") */
.wp-block-list.is-style-link-tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.is-style-link-tiles li { margin: 0; }
.is-style-link-tiles a { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--his-line); padding: 18px 16px; font-family: var(--his-cond); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; line-height: 1.05; color: var(--his-charcoal); text-decoration: none; transition: border-color .2s, color .2s; }
.is-style-link-tiles a::after { content: "\2192"; color: var(--his-green); font-family: var(--his-body); }
.is-style-link-tiles a:hover { border-color: var(--his-green); color: var(--his-green-dark); }

/* ---------------------------------------------------------------- split: photo half + copy half
   Columns .his-split: first column .his-split__photo (an Image with the "Fill the column" style),
   second column .his-split__copy. Swap the columns to put the photo on the right. */
.wp-block-columns.his-split { gap: 0 !important; margin-left: auto !important; margin-right: auto !important; max-width: var(--his-wrap); }
.his-split > .wp-block-column { position: relative; }
.his-split__photo { min-height: 420px; }
.his-split__photo > .wp-block-image { position: absolute; inset: 0; margin: 0; }
.his-split__photo > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.his-split__copy { background: var(--his-sage); padding: clamp(32px, 5vw, 64px) !important; }
.his-split__copy > * + * { margin-top: 16px; }
.is-style-band-sage .his-split__copy, .is-style-band-mist .his-split__copy { background: #fff; }
@media (max-width: 781px) { .his-split__photo { min-height: 260px; } }

/* ---------------------------------------------------------------- contact band (copy + his/form)
   Same look as the site-wide quote band (approved Option B layout): green, copy left, white form card right.
   Pages that carry their own form use this at the bottom; the quote band is then skipped (functions.php). */
.wp-block-group.his-contact { background: var(--his-green) !important; color: #fff; position: relative; overflow: hidden; }
.his-contact::after { content: ""; position: absolute; right: -8%; top: -30%; width: 60%; height: 160%; background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent); pointer-events: none; }
.his-contact > .wp-block-columns { position: relative; z-index: 1; gap: clamp(30px, 5vw, 90px) !important; align-items: flex-start !important; }
.his-contact h2, .his-contact h3 { color: #fff; }
.his-contact mark { color: #fff !important; }
.his-contact .is-style-eyebrow { color: #fff; }
.his-contact p, .his-contact li { color: rgba(255,255,255,.9); }
.his-contact a:not(.wp-block-button__link) { color: #fff; }
.his-contact .wp-block-button__link { background: #fff; color: var(--his-green-dark); }
.his-contact .his-form { box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.his-contact .his-form p, .his-contact .his-form li { color: inherit; }
.his-contact-list { list-style: none; padding: 0; }
.his-contact-list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
@media (max-width: 860px) { .his-contact > .wp-block-columns { flex-direction: column; } .his-contact > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } }

/* ---------------------------------------------------------------- prose (legal pages, posts, long copy) */
.his-prose > * + * { margin-top: 1.1em; }
.his-prose h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 1.8em; }
.his-prose h3 { font-size: 1.45rem; margin-top: 1.5em; }
.his-prose ul, .his-prose ol { padding-left: 1.3em; }
.his-prose li + li { margin-top: .35em; }
.his-prose a { text-decoration: underline; text-underline-offset: 3px; }
.his-prose .wp-block-image { margin: 1.6em 0; }

/* ---------------------------------------------------------------- logo grid (Gallery style "Logo grid") */
.wp-block-gallery.is-style-logo-grid .wp-block-image { background: #fff; border: 1px solid var(--his-line); padding: 18px; display: flex !important; align-items: center; justify-content: center; }
.wp-block-gallery.is-style-logo-grid .wp-block-image img { max-height: 70px; width: auto !important; object-fit: contain !important; }

/* ---------------------------------------------------------------- video: core Embed at full content width */
.his-section .wp-block-embed.is-type-video { margin-top: 24px; }
