/* HSP shared category media system · 5.21.1 */
:where(.hspc-page, .hspf-page) {
    --hsp-media-blue: #179bd7;
    --hsp-media-ink: #142b3a;
    --hsp-media-border: #d5e0e6;
}

:where(.hspc-page, .hspf-page) :where(img, svg) {
    max-width: 100%;
}

:where(.hspc-page, .hspf-page) .hspc-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--hspc-media-fit, contain);
    object-position: var(--hspc-media-position, center center);
}

.hspc-page .hspc-container,
.hspf-page .hspf-container {
    width: min(100% - clamp(32px, 5vw, 96px), 1440px);
    margin-inline: auto;
}

.hspc-page .hspc-hero,
.hspf-page .hspf-hero {
    padding-block: clamp(64px, 6vw, 96px);
}

.hspc-page .hspc-hero__grid,
.hspf-page .hspf-hero__grid {
    align-items: center;
}

.hspc-page .hspc-hero__copy,
.hspf-page .hspf-hero__copy {
    min-width: 0;
}

.hspc-page .hspc-hero__media,
.hspf-page .hspf-hero__media {
    width: 100%;
    max-width: 680px;
    margin: 0;
    justify-self: end;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    height: auto !important;
    max-height: none !important;
    border: 1px solid var(--hsp-media-border);
    background: #f7fafb;
}

.hspc-page .hspc-hero__media > img,
.hspf-page .hspf-hero__media > img {
    width: 100%;
    height: 100%;
    object-fit: var(--hspc-media-fit, contain);
    object-position: var(--hspc-media-position, center center);
}

:where(.hspc-page, .hspf-page) figure > figcaption {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 8px 12px;
    color: #5e7180;
    background: rgba(255, 255, 255, .94);
    font-size: 12px;
    line-height: 1.35;
}

:where(.hspc-page, .hspf-page) figure:has(> figcaption) {
    position: relative;
}

.hspc-page :where(
    .hspc-mechanism-grid,
    .hspc-handle-mechanism__grid,
    .hspc-cam-mechanism__grid,
    .hspc-handle-lock-mechanism__grid,
    .hspc-panel-lock-mechanism__grid,
    .hspc-paddle-latch-mechanism__grid,
    .hspc-multipoint-mechanism__grid,
    .hspc-concealed-visual-grid,
    .hspc-removable-visual-grid,
    .hspc-heavy-duty-visual-grid,
    .hspc-weld-visual-grid,
    .hspc-spring-visual-grid
) {
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(36px, 5vw, 68px);
}

.hspc-page :where(
    .hspc-handle-mechanism__media,
    .hspc-cam-mechanism__media,
    .hspc-handle-lock-mechanism__media,
    .hspc-panel-lock-mechanism__media,
    .hspc-paddle-latch-mechanism__media,
    .hspc-multipoint-mechanism__media,
    .hspc-mechanism-grid figure,
    .hspc-concealed-visual-grid figure,
    .hspc-removable-visual-grid figure,
    .hspc-heavy-duty-visual-grid figure,
    .hspc-weld-visual-grid figure,
    .hspc-spring-visual-grid figure
) {
    width: 100%;
    margin: 0;
    aspect-ratio: 30 / 19;
    overflow: hidden;
    position: relative;
    height: auto !important;
    max-height: none !important;
    border: 1px solid var(--hsp-media-border);
    background: #f7fafb;
}

.hspc-page :where(
    .hspc-handle-mechanism__media,
    .hspc-cam-mechanism__media,
    .hspc-handle-lock-mechanism__media,
    .hspc-panel-lock-mechanism__media,
    .hspc-paddle-latch-mechanism__media,
    .hspc-multipoint-mechanism__media,
    .hspc-mechanism-grid figure,
    .hspc-concealed-visual-grid figure,
    .hspc-removable-visual-grid figure,
    .hspc-heavy-duty-visual-grid figure,
    .hspc-weld-visual-grid figure,
    .hspc-spring-visual-grid figure
) > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hspc-page :where(.hspc-positioning-applications__grid, .hspc-category-applications__grid) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
}

.hspc-page .hspc-application-slide {
    min-width: min(480px, 82vw);
}

.hspc-page .hspc-application-slide__media,
.hspc-page :where(.hspc-positioning-applications__grid, .hspc-category-applications__grid) article > figure {
    width: 100%;
    margin: 0;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    position: relative;
    height: auto !important;
    max-height: none !important;
    border: 1px solid var(--hsp-media-border);
    background: #f7fafb;
}

.hspc-page .hspc-application-slide__media > img,
.hspc-page :where(.hspc-positioning-applications__grid, .hspc-category-applications__grid) article > figure > img {
    width: 100%;
    height: 100%;
    object-fit: var(--hspc-media-fit, contain);
    object-position: var(--hspc-media-position, center center);
}

.hspc-page :where(.hspc-industrial-locks-support__grid, .hspc-factory__grid),
.hspf-page .hspf-factory__grid {
    display: grid;
    grid-template-columns: minmax(420px, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(36px, 5vw, 68px);
}

.hspc-page :where(.hspc-industrial-locks-support__media, .hspc-factory__media),
.hspf-page .hspf-factory__media {
    width: 100%;
    max-width: 600px;
    margin: 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    position: relative;
    height: auto !important;
    max-height: none !important;
    border: 1px solid var(--hsp-media-border);
    background: #f7fafb;
}

.hspc-page :where(.hspc-industrial-locks-support__media, .hspc-factory__media) > img,
.hspf-page .hspf-factory__media > img {
    width: 100%;
    height: 100%;
    object-fit: var(--hspc-media-fit, contain);
    object-position: var(--hspc-media-position, center center);
}

.hspc-page :where(.hspc-family__media, .hspc-lock-family__media) {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.hspc-page :where(.hspc-family__media, .hspc-lock-family__media) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hspc-page .hspc-product__media {
    aspect-ratio: 1;
    overflow: hidden;
    background: #fff;
}

.hspc-page .hspc-product__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 1200px) {
    .hspc-page .hspc-hero__grid,
    .hspf-page .hspf-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
        gap: clamp(44px, 5vw, 84px);
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .hspc-page .hspc-hero__grid,
    .hspf-page .hspf-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
        gap: clamp(32px, 4vw, 48px);
    }

    .hspc-page .hspc-hero__media,
    .hspf-page .hspf-hero__media {
        max-width: 520px;
    }
}

@media (max-width: 959px) {
    .hspc-page .hspc-hero__grid,
    .hspf-page .hspf-hero__grid,
    .hspc-page :where(
        .hspc-mechanism-grid,
        .hspc-handle-mechanism__grid,
        .hspc-cam-mechanism__grid,
        .hspc-handle-lock-mechanism__grid,
        .hspc-panel-lock-mechanism__grid,
        .hspc-paddle-latch-mechanism__grid,
        .hspc-multipoint-mechanism__grid,
        .hspc-concealed-visual-grid,
        .hspc-removable-visual-grid,
        .hspc-heavy-duty-visual-grid,
        .hspc-weld-visual-grid,
        .hspc-spring-visual-grid,
        .hspc-industrial-locks-support__grid,
        .hspc-factory__grid
    ),
    .hspf-page .hspf-factory__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hspc-page .hspc-hero__media,
    .hspf-page .hspf-hero__media {
        max-width: 760px;
        justify-self: start;
    }

    .hspc-page :where(.hspc-positioning-applications__grid, .hspc-category-applications__grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    .hspc-page .hspc-application-slide {
        min-width: calc(100vw - 40px);
    }
}

@media (max-width: 430px) {
    .hspc-page .hspc-container,
    .hspf-page .hspf-container {
        width: min(100% - 28px, 1440px);
    }

    .hspc-page .hspc-hero,
    .hspf-page .hspf-hero {
        padding-block: 48px;
    }
}