/*
 * Airplex reusable component layer.
 * Future shared buttons, cards, forms, service sections, and location modules should live here.
 */

.ap-template-main {
    min-height: 50vh;
}

.ap-template-hero {
    padding: 5.5rem 0;
}

.ap-template-hero h1 {
    max-width: 14ch;
}

.ap-template-hero p:not(.ap-eyebrow) {
    max-width: 720px;
}

.ap-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.ap-template-section {
    padding: 4rem 0;
}

.ap-related-grid__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.ap-related-grid__items a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(9, 22, 35, 0.12);
    border-radius: 14px;
    color: #071423;
    text-decoration: none;
    background: #ffffff;
}

.ap-related-grid__items a:hover,
.ap-related-grid__items a:focus-visible {
    border-color: rgba(24, 145, 204, 0.42);
    color: var(--ap-blue, #157eb8);
}

.ap-breadcrumbs {
    font-family: var(--ap-font-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ap-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0;
    margin: 0 0 1.25rem;
    list-style: none;
}

.ap-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(9, 22, 35, 0.66);
}

.ap-breadcrumbs li:not(:last-child)::after {
    content: "/";
    color: rgba(9, 22, 35, 0.36);
}

.ap-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.ap-breadcrumbs a:hover,
.ap-breadcrumbs a:focus-visible {
    color: var(--ap-blue, #157eb8);
}

.ap5-logo__image {
    display: block;
    width: auto;
    height: 52px;
    max-width: min(230px, 48vw);
    object-fit: contain;
}

.ap5-logo--footer .ap5-logo__image {
    height: 56px;
    max-width: min(250px, 58vw);
}

@media (max-width: 760px) {
    .ap5-logo__image {
        height: 44px;
        max-width: min(190px, 54vw);
    }

    .ap5-logo--footer .ap5-logo__image {
        height: 48px;
    }
}