/*
 * Shared primitives for content-only public pages (contact, service detail,
 * blog index/show). The hero band rendered by `page_cover()` and the simple
 * card/grid blocks live here so no page reinvents them.
 */

/* ============================================================
   PAGE COVER — full-width hero used at the top of every
   admin-managed public page (service / complex / shop / blog /
   feedback / contact). Falls back to a flat brand-tinted band
   when no image has been uploaded yet.
   ============================================================ */
.ub-page-cover {
    position: relative;
    padding: var(--ub-space-7xl) 0;
    background-color: var(--ub-color-section-soft);
    color: var(--ub-color-heading);
    text-align: center;
    border-bottom: 1px solid var(--ub-color-divider);
}

.ub-page-cover--has-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--ub-color-on-brand);
    border-bottom-color: transparent;
}

.ub-page-cover--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 29, 31, 0.42), rgba(29, 29, 31, 0.55));
    pointer-events: none;
}

.ub-page-cover > .ub-container--narrow {
    position: relative;
}

.ub-page-cover__title {
    margin: 0;
    font-size: var(--ub-text-4xl);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
    font-weight: 700;
}

.ub-page-cover__subtitle {
    margin: var(--ub-space-xl) auto 0;
    max-width: 560px;
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-snug);
    opacity: 0.92;
}

/* ============================================================
   SERVICE INDEX — responsive card grid of services (cover + name
   + short description + CTA). Mirrors the complex-list card.
   ============================================================ */
.ub-service-grid {
    display: grid;
    gap: var(--ub-space-3xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ub-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ub-service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ub-service-grid__card {
    display: flex;
    flex-direction: column;
    background: var(--ub-color-white);
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--ub-transition-fast), box-shadow var(--ub-transition-fast);
}

.ub-service-grid__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ub-shadow-card-hover);
}

.ub-service-grid__cover {
    aspect-ratio: 16 / 9;
    background: var(--ub-color-section-soft) center / cover no-repeat;
}

.ub-service-grid__cover--empty {
    position: relative;
}

.ub-service-grid__cover--empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../images/public/icons/lotus-2Rt0ZoN.png") center / 24% no-repeat;
    opacity: 0.18;
}

.ub-service-grid__body {
    flex: 1;
    padding: var(--ub-space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-s);
}

.ub-service-grid__name {
    margin: 0;
    font-size: var(--ub-text-xl);
    font-weight: 600;
    color: var(--ub-color-heading);
}

.ub-service-grid__sub {
    margin: 0;
    font-size: var(--ub-text-sm);
    color: var(--ub-color-body-muted);
    line-height: var(--ub-leading-snug);
}

.ub-service-grid__cta {
    margin-top: auto;
    padding-top: var(--ub-space-s);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    color: var(--ub-color-brand);
}

.ub-service-grid__external {
    font-size: var(--ub-text-xs);
    color: var(--ub-color-body-muted);
}

/* ============================================================
   CONTACT — three-card grid + feedback CTA block
   ============================================================ */
.ub-contact-grid {
    display: grid;
    gap: var(--ub-space-2xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ub-contact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ub-space-3xl);
    }
}

.ub-contact-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: var(--ub-space-3xl);
    border-radius: var(--ub-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ub-color-divider);
}

.ub-contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ub-contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-l);
    align-items: flex-start;
    padding: var(--ub-space-4xl) var(--ub-space-3xl);
    background: var(--ub-color-white);
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-lg);
    box-shadow: var(--ub-shadow-card);
    transition: transform var(--ub-transition-base),
                box-shadow var(--ub-transition-base);
    min-width: 0;
}

.ub-contact-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ub-shadow-card-hover);
}

.ub-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-color-hover-tint);
    color: var(--ub-color-brand);
    margin-bottom: var(--ub-space-s);
}

.ub-contact-card__title {
    margin: 0;
    font-size: var(--ub-text-xl);
    font-weight: 600;
    color: var(--ub-color-heading);
}

.ub-contact-card__text {
    margin: 0;
    font-size: var(--ub-text-base);
    line-height: var(--ub-leading-body);
    color: var(--ub-color-body-muted);
}

.ub-contact-card__text--strong {
    color: var(--ub-color-body);
    font-weight: 500;
}

.ub-contact-card__value {
    margin-top: auto;
    padding-top: var(--ub-space-s);
    font-size: var(--ub-text-lg);
    font-weight: 600;
    color: var(--ub-color-brand);
    text-decoration: none;
    /* Long emails wrap inside the card instead of forcing horizontal scroll. */
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: var(--ub-leading-snug);
    transition: color var(--ub-transition-fast);
}

body.ub-public a.ub-contact-card__value:hover {
    color: var(--ub-color-brand-hover);
}

.ub-contact-feedback {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-2xl);
    margin-top: var(--ub-space-7xl);
    padding: var(--ub-space-4xl);
    background: var(--ub-color-section-soft);
    border-radius: var(--ub-radius-lg);
    text-align: center;
    align-items: center;
}

@media (min-width: 768px) {
    .ub-contact-feedback {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
        gap: var(--ub-space-3xl);
        padding: var(--ub-space-4xl) var(--ub-space-5xl);
    }
}

.ub-contact-feedback__body {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-s);
    min-width: 0;
}

.ub-contact-feedback__title {
    margin: 0;
    font-size: var(--ub-text-2xl);
    font-weight: 600;
    color: var(--ub-color-heading);
}

.ub-contact-feedback__text {
    margin: 0;
    font-size: var(--ub-text-base);
    color: var(--ub-color-body-muted);
    line-height: var(--ub-leading-body);
    max-width: 540px;
}

/* ============================================================
   SERVICE DETAIL — enhanced hero + two-column body + CTA band.
   Mirrors the live site's burial-service page (hero → content →
   related → contact CTA) with the design-system tokens.
   ============================================================ */

/* --- Hero --- */
.ub-service-hero {
    position: relative;
    padding: var(--ub-space-8xl) 0 var(--ub-space-7xl);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--ub-color-hover-tint), transparent 58%),
        linear-gradient(180deg, var(--ub-color-section-soft), var(--ub-color-white));
    border-bottom: 1px solid var(--ub-color-divider);
    overflow: hidden;
}

.ub-service-hero--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom-color: transparent;
}

.ub-service-hero--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29, 29, 31, 0.42), rgba(29, 29, 31, 0.74));
    pointer-events: none;
}

.ub-service-hero__inner {
    position: relative;
    max-width: 760px;
}

.ub-service-hero__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ub-space-s);
    margin-bottom: var(--ub-space-2xl);
    font-size: var(--ub-text-sm);
    color: var(--ub-color-body-muted);
}

.ub-service-hero__crumb-sep {
    opacity: 0.5;
}

body.ub-public a.ub-service-hero__crumb {
    color: var(--ub-color-body-muted);
    text-decoration: none;
    transition: color var(--ub-transition-fast);
}

body.ub-public a.ub-service-hero__crumb:hover {
    color: var(--ub-color-brand);
}

.ub-service-hero__crumb--current {
    color: var(--ub-color-heading);
    font-weight: 500;
}

.ub-service-hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--ub-space-l);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-color-brand);
}

.ub-service-hero__title {
    margin: 0;
    font-size: var(--ub-text-5xl);
    line-height: var(--ub-leading-display);
    letter-spacing: var(--ub-tracking-display);
    font-weight: 700;
    color: var(--ub-color-heading);
}

.ub-service-hero__lead {
    margin: var(--ub-space-2xl) 0 0;
    max-width: 620px;
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-normal);
    color: var(--ub-color-body);
}

.ub-service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-l);
    margin-top: var(--ub-space-3xl);
}

/* On-image variant → light text over the dark scrim. */
.ub-service-hero--image .ub-service-hero__eyebrow {
    color: var(--ub-color-brand-soft);
}

.ub-service-hero--image .ub-service-hero__title,
.ub-service-hero--image .ub-service-hero__lead,
.ub-service-hero--image .ub-service-hero__crumb--current {
    color: var(--ub-color-on-brand);
}

.ub-service-hero--image .ub-service-hero__lead {
    opacity: 0.92;
}

.ub-service-hero--image .ub-service-hero__crumbs {
    color: rgba(255, 255, 255, 0.75);
}

body.ub-public .ub-service-hero--image a.ub-service-hero__crumb {
    color: rgba(255, 255, 255, 0.75);
}

body.ub-public .ub-service-hero--image a.ub-service-hero__crumb:hover {
    color: var(--ub-color-white);
}

/* --- Body: reuses .ub-split (narrow aside left, wide main right) --- */
.ub-service__main {
    min-width: 0;
}

.ub-service__body,
.ub-service__lead {
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-color-body);
}

.ub-service__lead {
    font-size: var(--ub-text-lg);
}

.ub-service__body > :first-child {
    margin-top: 0;
}

.ub-service__body p {
    margin: 0 0 var(--ub-space-xl);
}

.ub-service__body h2,
.ub-service__body h3 {
    margin: var(--ub-space-4xl) 0 var(--ub-space-l);
    color: var(--ub-color-heading);
    font-weight: 600;
    line-height: var(--ub-leading-snug);
}

.ub-service__body h2 {
    font-size: var(--ub-text-2xl);
}

.ub-service__body h3 {
    font-size: var(--ub-text-xl);
}

.ub-service__body ul,
.ub-service__body ol {
    margin: 0 0 var(--ub-space-xl);
    padding-left: 1.25em;
}

.ub-service__body li {
    margin-bottom: var(--ub-space-s);
}

.ub-service__body img {
    max-width: 100%;
    height: auto;
    margin: var(--ub-space-2xl) 0;
    border-radius: var(--ub-radius-md);
}

.ub-service__body figure {
    margin: var(--ub-space-3xl) 0;
}

.ub-service__body figure img {
    display: block;
    width: 100%;
    margin: 0;
    background: var(--ub-color-section-soft);
}

.ub-service__body figcaption {
    margin-top: var(--ub-space-s);
    font-size: var(--ub-text-sm);
    line-height: var(--ub-leading-snug);
    color: var(--ub-color-body-muted);
}

body.ub-public .ub-service__body a {
    color: var(--ub-color-brand);
}

.ub-service__main-cta {
    margin-top: var(--ub-space-4xl);
}

/* --- Aside cards --- */
.ub-service__aside {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-2xl);
    min-width: 0;
}

@media (min-width: 1024px) {
    .ub-service__aside {
        position: sticky;
        top: calc(var(--ub-header-height) + var(--ub-space-2xl));
        align-self: start;
    }
}

.ub-service-card {
    padding: var(--ub-space-3xl);
    background: var(--ub-color-white);
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-lg);
    box-shadow: var(--ub-shadow-card);
}

.ub-service-card__title {
    margin: 0 0 var(--ub-space-s);
    font-size: var(--ub-text-lg);
    font-weight: 600;
    color: var(--ub-color-heading);
}

.ub-service-card__text {
    margin: 0 0 var(--ub-space-xl);
    font-size: var(--ub-text-base);
    line-height: var(--ub-leading-snug);
    color: var(--ub-color-body-muted);
}

.ub-service-card .ub-btn {
    width: 100%;
}

.ub-service__related-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.ub-service__related-list li + li {
    border-top: 1px solid var(--ub-color-divider);
}

.ub-service__related-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ub-space-s);
    padding: var(--ub-space-l) 0;
    font-size: var(--ub-text-base);
    color: var(--ub-color-body);
    text-decoration: none;
}

body.ub-public a.ub-service__related-link {
    color: var(--ub-color-body);
    transition: color var(--ub-transition-fast);
}

body.ub-public a.ub-service__related-link:hover {
    color: var(--ub-color-brand);
}

.ub-service__related-link.is-current {
    color: var(--ub-color-brand);
    font-weight: 600;
    cursor: default;
}

.ub-service__related-link::after {
    content: '\203A';
    color: var(--ub-color-body-muted);
    transition: transform var(--ub-transition-fast), color var(--ub-transition-fast);
}

.ub-service__related-link:hover::after {
    transform: translateX(3px);
    color: var(--ub-color-brand);
}

.ub-service__related-link.is-current::after {
    content: none;
}

/* --- CTA band --- */
.ub-service-cta {
    padding: var(--ub-space-7xl) 0;
    background: var(--ub-color-section-soft);
    border-top: 1px solid var(--ub-color-divider);
    text-align: center;
}

.ub-service-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ub-space-l);
}

.ub-service-cta__lotus {
    width: 48px;
    height: 48px;
    margin-bottom: var(--ub-space-s);
    opacity: 0.9;
}

.ub-service-cta__title {
    margin: 0;
    font-size: var(--ub-text-3xl);
    font-weight: 700;
    letter-spacing: var(--ub-tracking-display);
    color: var(--ub-color-heading);
}

.ub-service-cta__text {
    margin: 0 auto;
    max-width: 560px;
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-color-body-muted);
}

.ub-service-cta__actions {
    margin-top: var(--ub-space-xl);
}

/* Icon + label alignment for CTA buttons (works full-width in the aside). */
.ub-service-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ub-space-s);
}

/* ============================================================
   BLOG — grid of post cards + show page
   ============================================================ */
.ub-blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-s);
    margin: var(--ub-space-4xl) 0 var(--ub-space-3xl);
}

/* Scoped to `body.ub-public a.ub-blog-chip` on purpose: the generic
   `a:not(.ub-btn):hover` rule in base.css outranks a bare `.ub-blog-chip`, so on
   hover it would repaint the text brand-peach over the chip's brand-peach
   background — invisible text. Matching the base prefix and relying on pages.css
   loading last (see app_public.js) lets the chip own its colours in every state,
   the same way `.ub-btn` opts out of the generic link colouring. */
body.ub-public a.ub-blog-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--ub-radius-pill);
    border: 1px solid var(--ub-color-divider);
    font-size: var(--ub-text-sm);
    font-weight: 500;
    color: var(--ub-color-body);
    background: var(--ub-color-white);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.ub-public a.ub-blog-chip.is-current {
    background: var(--ub-color-accent);
    color: var(--ub-color-on-dark);
    border-color: var(--ub-color-accent);
}

body.ub-public a.ub-blog-chip:hover {
    background: var(--ub-color-accent);
    color: var(--ub-color-on-dark);
    border-color: var(--ub-color-accent);
}

.ub-blog-post__title {
    margin-top: var(--ub-space-2xl);
}

.ub-blog-grid {
    display: grid;
    gap: var(--ub-space-3xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ub-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ub-blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ub-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--ub-color-white);
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-md);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    color: inherit;
    text-decoration: none;
}

.ub-blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(29, 29, 31, 0.08);
}

.ub-blog-card__cover {
    aspect-ratio: 16 / 10;
    background: var(--ub-color-section-soft) center / cover no-repeat;
}

.ub-blog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--ub-space-s);
    padding: var(--ub-space-2xl);
}

.ub-blog-card__category {
    font-size: var(--ub-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-color-brand);
}

.ub-blog-card__title {
    margin: 0;
    font-size: var(--ub-text-lg);
    font-weight: 600;
    line-height: var(--ub-leading-snug);
    color: var(--ub-color-heading);
}

.ub-blog-card__meta {
    margin-top: auto;
    font-size: var(--ub-text-sm);
    color: var(--ub-color-body-muted);
}

.ub-blog-empty {
    margin: var(--ub-space-5xl) auto;
    max-width: 540px;
    text-align: center;
    color: var(--ub-color-body-muted);
    font-size: var(--ub-text-md);
}

.ub-blog-post {
    max-width: 760px;
    margin: 0 auto;
}

.ub-blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-l);
    font-size: var(--ub-text-sm);
    color: var(--ub-color-body-muted);
    margin: var(--ub-space-2xl) 0;
}

.ub-blog-post__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ub-color-section-soft) center / cover no-repeat;
    border-radius: var(--ub-radius-md);
    margin-bottom: var(--ub-space-3xl);
}

.ub-blog-post__body {
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-color-body);
}

.ub-blog-post__body > :first-child {
    margin-top: 0;
}

.ub-blog-post__body p {
    margin: 0 0 var(--ub-space-xl);
}

.ub-blog-post__body h2 {
    margin: var(--ub-space-5xl) 0 var(--ub-space-l);
    padding-bottom: var(--ub-space-s);
    border-bottom: 1px solid var(--ub-color-divider);
    font-size: var(--ub-text-2xl);
    line-height: var(--ub-leading-snug);
    letter-spacing: var(--ub-tracking-display);
    color: var(--ub-color-heading);
}

.ub-blog-post__body h3 {
    margin: var(--ub-space-3xl) 0 var(--ub-space-s);
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-snug);
    color: var(--ub-color-heading);
}

.ub-blog-post__body ul,
.ub-blog-post__body ol {
    margin: 0 0 var(--ub-space-xl);
    padding-left: var(--ub-space-2xl);
}

.ub-blog-post__body li {
    margin-bottom: var(--ub-space-s);
    padding-left: var(--ub-space-xs);
}

.ub-blog-post__body li::marker {
    color: var(--ub-color-brand);
}

.ub-blog-post__body strong {
    font-weight: 600;
    color: var(--ub-color-heading);
}

/* Холбоос — base.css-ийн глобал `body.ub-public a` дүрмийг scope-оор дийлнэ
   (pages.css сүүлд ачаалагддаг). Утас/имэйл линк брэнд өнгөтэй, тодорхой. */
body.ub-public .ub-blog-post__body a {
    color: var(--ub-color-brand);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

body.ub-public .ub-blog-post__body a:hover {
    color: var(--ub-color-brand-hover);
}

.ub-blog-detail__main {
    min-width: 0;
}

.ub-blog-related {
    min-width: 0;
}

.ub-blog-related__title {
    padding-bottom: var(--ub-space-xl);
    border-bottom: 1px solid var(--ub-color-divider);
    font-size: var(--ub-text-2xl);
    color: var(--ub-color-accent);
}

.ub-blog-grid--sidebar {
    grid-template-columns: 1fr;
    gap: 0;
}

.ub-blog-card--sidebar {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    align-items: center;
    gap: var(--ub-space-xl);
    padding-block: var(--ub-space-xl);
    border: 0;
    border-bottom: 1px solid var(--ub-color-divider);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.ub-blog-card--sidebar:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ub-blog-card--sidebar:hover {
    transform: none;
    box-shadow: none;
}

.ub-blog-card--sidebar .ub-blog-card__cover {
    aspect-ratio: 4 / 3;
    border-radius: var(--ub-radius-sm);
}

.ub-blog-card--sidebar .ub-blog-card__body {
    min-width: 0;
    padding: 0;
    gap: var(--ub-space-xs);
}

.ub-blog-card--sidebar .ub-blog-card__category {
    overflow-wrap: anywhere;
}

.ub-blog-card--sidebar .ub-blog-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--ub-text-base);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ub-blog-card--sidebar:hover .ub-blog-card__title {
    color: var(--ub-color-brand);
}

.ub-blog-card--sidebar .ub-blog-card__meta {
    margin-top: 0;
    font-size: var(--ub-text-xs);
}

@media (min-width: 1024px) {
    .ub-blog-related {
        position: sticky;
        top: calc(var(--ub-header-height) + var(--ub-space-l));
        align-self: start;
    }
}

/* ============================================================
   HOME HERO — banner carousel fallback for admin-managed banners
   (Phase 2 §1). Reuses existing .ub-hero classes; this only adds
   per-slide overrides when there is more than one banner.
   ============================================================ */
.ub-hero--banner .ub-hero__media {
    background-color: var(--ub-color-section-cool);
}

/* ============================================================
   LEGAL / INFO PAGE — admin-managed ContentPage (privacy, terms).
   The page_cover hero band, then a clean document card that
   reuses the .ub-blog-post__body typography for the editor HTML.
   ============================================================ */

/* Eyebrow above the cover title — rendered on legal pages only. */
.ub-page-cover__eyebrow {
    margin: 0 0 var(--ub-space-l);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-color-brand);
}

/* Document section pulls the card up so it overlaps the hero band. */
.ub-legal {
    padding: 0 0 var(--ub-section-padding-y);
}

.ub-legal-doc {
    /* Pin above the page-cover band: the hero is `position: relative` (paints as a
       positioned element), and this card overlaps it with a negative margin. While
       the scroll-reveal animation runs the card carries a `transform`, which gives
       it a stacking context and keeps it on top — but once the reveal finishes the
       transform is cleared and a plain static card would drop *under* the positioned
       hero, letting the band cover the card's top edge. A standing z-index keeps the
       card above the hero (z-index 0) yet below the sticky header (--ub-z-header). */
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: calc(-1 * var(--ub-space-6xl)) auto 0;
    padding: clamp(var(--ub-space-4xl), 5vw, var(--ub-space-7xl));
    background: var(--ub-color-white);
    border: 1px solid var(--ub-color-divider);
    border-radius: var(--ub-radius-lg);
    box-shadow: var(--ub-shadow-card);
}

/* Intro paragraph reads as a lead inside the legal card. */
.ub-legal-doc .ub-blog-post__body > p:first-child {
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-normal);
    color: var(--ub-color-heading);
}

/* Long unbroken tokens (emails, URLs) must wrap so they never widen the
   card past its container on narrow screens. */
.ub-legal-doc .ub-blog-post__body {
    overflow-wrap: anywhere;
}

/* Narrow phones: tighten the card padding and soften the hero overlap. */
@media (max-width: 640px) {
    .ub-legal-doc {
        margin-top: calc(-1 * var(--ub-space-4xl));
        padding: var(--ub-space-3xl) var(--ub-space-xl);
        border-radius: var(--ub-radius-md);
    }
}