/*
 * AMC Secure — site-wide typography, layout alignment, rich icon tiles
 * Loaded after hero-banner.css to unify inner pages and catalog visuals.
 */

/* ── Design token alignment (inner pages) ── */
body:not(.admin-body):not(.auth-body):not(.portal-body) {
    --site-content-max: 1180px;
    --page-shell-width: min(100% - 28px, 1180px);
    --page-flow-gap: 10px;
    --page-card-radius: 12px;
    --page-card-padding: 12px 14px;
    --page-h1: clamp(20px, 2.4vw, 28px);
    --page-h2: clamp(18px, 2vw, 24px);
    --page-h3: clamp(16px, 1.6vw, 20px);
    --page-lead: clamp(13px, 1vw, 15px);
}

/* ── Unified page shell (all marketing + commerce pages) ── */
body:not(.admin-body) .page-shell,
body:not(.admin-body) .page-flow,
body:not(.admin-body) .contact-page-shell,
body:not(.admin-body) .about-flow.about-shell,
body:not(.admin-body) .catalog-page .catalog-shell,
body:not(.admin-body) .catalog-page .page-shell,
body:not(.admin-body) .checkout-page > .page-shell,
body:not(.admin-body) .legal-page .page-shell {
    display: grid;
    gap: var(--page-flow-gap);
    width: var(--page-shell-width);
    max-width: var(--site-content-max);
    margin-inline: auto;
    padding-bottom: 28px;
}

body:not(.admin-body) .market-main > .hero-galaxy-banner,
body:not(.admin-body) .checkout-page > .hero-galaxy-banner,
body:not(.admin-body) .appointment-page > .hero-galaxy-banner,
body:not(.admin-body) .career-page > .hero-galaxy-banner,
body:not(.admin-body) .blog-page > .hero-galaxy-banner,
body:not(.admin-body) .tender-page > .hero-galaxy-banner,
body:not(.admin-body) .about-hero-pills-strip {
    width: var(--page-shell-width);
    max-width: var(--site-content-max);
    margin-inline: auto;
}

/* ── Cap oversized headings outside galaxy hero ── */
body:not(.admin-body):not(.global-homepage) main h1 {
    font-size: var(--page-h1) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
}

body:not(.admin-body) .hero-galaxy-banner .hero-title-multicolor,
body:not(.admin-body) .hero-galaxy-banner h1 {
    font-size: clamp(18px, 2.2vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
}

body:not(.admin-body) main h2 {
    font-size: var(--page-h2);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

body:not(.admin-body) main h3 {
    font-size: var(--page-h3);
    line-height: 1.25;
}

body:not(.admin-body) .checkout-kicker,
body:not(.admin-body) .section-title-row p,
body:not(.admin-body) .contact-section-head > span {
    font-size: 11px !important;
    letter-spacing: 0.08em;
}

body:not(.admin-body) .cart-panel > p:not(.checkout-kicker),
body:not(.admin-body) .checkout-form-card > p,
body:not(.admin-body) .success-card > p {
    font-size: var(--page-lead);
    line-height: 1.55;
    color: var(--amc-muted, #64748b);
}

/* ── Neutralize legacy oversized contact / about hero remnants ── */
body:not(.admin-body) .contact-intro-card h1,
body:not(.admin-body) .contact-hero-v2 h1,
body:not(.admin-body) .about-hero-copy-v2 h1,
body:not(.admin-body) .blog-hero h1,
body:not(.admin-body) .tender-command-hero h1 {
    font-size: var(--page-h1) !important;
    line-height: 1.12 !important;
}

body:not(.admin-body) .tender-hero-console strong {
    font-size: clamp(18px, 2vw, 24px) !important;
}

/* ── Rich multi-color service icon tiles (catalog, rail, cards) ── */
body:not(.admin-body) .product-visual {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.18), transparent 38%),
        radial-gradient(circle at 82% 88%, rgba(18, 168, 107, 0.16), transparent 36%),
        linear-gradient(145deg, #f8fbff, #eef8f3) !important;
}

body:not(.admin-body) .product-visual img,
body:not(.admin-body) .hero-master-rail__card img,
body:not(.admin-body) .hero-orbit-node__sphere img,
body:not(.admin-body) .featured-card img,
body:not(.admin-body) .client-logo-card img {
    object-fit: contain !important;
    image-rendering: auto;
}

body:not(.admin-body) .product-visual img[src*="service-icons"],
body:not(.admin-body) .product-visual img[src$=".svg"]:not(.service-logo--official) {
    padding: 12%;
}

body:not(.admin-body) .hero-master-rail__card img {
    width: 44px !important;
    height: 44px !important;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

body:not(.admin-body) .hero-orbit-node__sphere img {
    padding: 10%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

/* ── Section title row — consistent enterprise scale ── */
body:not(.admin-body) .section-title-row h2 {
    font-size: clamp(22px, 2.6vw, 30px) !important;
}

body:not(.admin-body) .section-title-row span,
body:not(.admin-body) .section-title-row > div > span {
    font-size: 13px !important;
    line-height: 1.5;
}

/* ── Cart / checkout panels aligned with shell ── */
body:not(.admin-body) .checkout-page {
    width: 100%;
    max-width: none;
    padding-top: 0;
}

body:not(.admin-body) .checkout-page .breadcrumb {
    width: var(--page-shell-width);
    margin: 0 auto 4px;
}

body:not(.admin-body) .checkout-page .page-shell .cart-panel,
body:not(.admin-body) .checkout-page .page-shell .checkout-grid,
body:not(.admin-body) .checkout-page .page-shell .tracking-grid,
body:not(.admin-body) .checkout-page .page-shell .success-card {
    margin: 0;
}

/* ── Portal / client logo slider — rich icon treatment ── */
body:not(.admin-body) .client-logo-card img,
body:not(.admin-body) .about-institution-pill img {
    object-fit: contain !important;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (max-width: 720px) {
    body:not(.admin-body) .product-visual img[src*="service-icons"],
    body:not(.admin-body) .product-visual img[src$=".svg"] {
        padding: 12%;
    }
}

/* ── B2B quote checkout stepper ── */
body:not(.admin-body) .checkout-steps {
    width: 100%;
    margin: 0 0 6px;
}

body:not(.admin-body) .checkout-steps ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.admin-body) .checkout-steps li {
    position: relative;
    min-width: 0;
}

body:not(.admin-body) .checkout-steps li a,
body:not(.admin-body) .checkout-steps li > strong {
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 10px 8px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

body:not(.admin-body) .checkout-steps li.is-current > strong {
    border-color: rgba(11, 94, 200, 0.42);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(236, 253, 245, 0.92));
    color: #0b5ec8;
}

body:not(.admin-body) .checkout-steps li.is-complete a {
    border-color: rgba(18, 168, 107, 0.34);
    background: rgba(236, 253, 245, 0.88);
    color: #047857;
}

body:not(.admin-body) .checkout-steps__marker {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 11px;
    font-weight: 800;
}

body:not(.admin-body) .checkout-steps li.is-current .checkout-steps__marker {
    background: #0b5ec8;
    color: #fff;
}

body:not(.admin-body) .checkout-steps li.is-complete .checkout-steps__marker {
    background: #12a86b;
    color: #fff;
}

/* ── Commerce grids inside page shell ── */
body:not(.admin-body) .page-shell .cart-page-grid,
body:not(.admin-body) .page-shell .checkout-grid,
body:not(.admin-body) .page-shell .tracking-grid {
    width: 100%;
}

body:not(.admin-body) .cart-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: var(--page-flow-gap);
    align-items: start;
}

body:not(.admin-body) .cart-page-grid .cart-side-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--page-flow-gap);
}

body:not(.admin-body) .checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: var(--page-flow-gap);
    align-items: start;
}

body:not(.admin-body) .success-card,
body:not(.admin-body) .error-card {
    padding: var(--page-card-padding);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--page-card-radius);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

body:not(.admin-body) .success-card h2,
body:not(.admin-body) .error-card h2 {
    margin: 0 0 8px;
    font-size: var(--page-h2);
}

body:not(.admin-body) .success-card__meta,
body:not(.admin-body) .success-card__actions,
body:not(.admin-body) .error-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

body:not(.admin-body) .success-card__actions a,
body:not(.admin-body) .error-card__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(11, 94, 200, 0.22);
    background: #fff;
    color: #0b5ec8;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

body:not(.admin-body) .success-card__actions a:first-child,
body:not(.admin-body) .error-card__actions a:first-child {
    border-color: transparent;
    background: linear-gradient(135deg, #0891b2 0%, #059669 52%, #4f46e5 100%);
    color: #fff;
}

body:not(.admin-body) .error-card__code {
    display: inline-flex;
    margin: 0 0 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

body:not(.admin-body) .product-detail-page .hero-galaxy-banner--compact {
    min-height: clamp(120px, 14vw, 168px) !important;
}

body:not(.admin-body) .product-detail-page .hero-compact-logo {
    display: none !important;
}

@media (max-width: 900px) {
    body:not(.admin-body) .checkout-steps ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.admin-body) .cart-page-grid,
    body:not(.admin-body) .checkout-grid {
        grid-template-columns: 1fr;
    }

    body:not(.admin-body) .cart-page-grid .cart-side-panel {
        grid-template-columns: 1fr;
    }
}