/*
 * Shared primitives for content-only public pages (contact, service detail,
 * blog index/show). Feature-specific card/grid blocks live here; the shared
 * primary-navigation hero lives in components.css.
 */

/* ============================================================
   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-layout {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-3xl);
}

.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;
    min-height: var(--ub-size-deferred-embed-min);
    margin: 0;
    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: 0;
    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 — left-aligned reading body + CTA band. The page
   hero and breadcrumb are shared components in components.css.
   ============================================================ */
.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 > :last-child {
    margin-bottom: 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);
}

/* --- 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: 0 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-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: 0 auto;
    max-width: 540px;
    text-align: center;
    color: var(--ub-color-body-muted);
    font-size: var(--ub-text-md);
}

.ub-blog-post {
    margin: 0;
}

.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 > :last-child {
    margin-bottom: 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);
}

/* Admin-managed content pages reuse the rich-text body with a calm lead. */
.ub-content-page .ub-blog-post__body > p:first-child {
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-normal);
    color: var(--ub-color-heading);
}

.ub-content-page .ub-blog-post__body {
    overflow-wrap: anywhere;
}