/* ============================================================================
   Layout Library: Grids, Cards, and Modal Foundations
   Theme: plutonium6_default
   Purpose: Reusable layout primitives and centralized modal presentation.
   ============================================================================ */

:root {
    --layout-gap-xs: var(--Space2, 0.5rem);
    --layout-gap-sm: var(--Space3, 0.75rem);
    --layout-gap-md: var(--Space4, 1rem);
    --layout-gap-lg: var(--Space6, 1.5rem);
    --layout-gap-xl: var(--Space8, 2rem);

    --layout-card-radius: var(--RadiusMD, 10px);
    --layout-card-border: 1px solid hsla(var(--ColorBorder, 0 0% 80%), 0.35);
    --layout-card-bg: hsla(var(--White, 0 0% 100%), 1);
    --layout-card-shadow: 0 8px 24px hsla(var(--Black, 0 0% 0%), 0.08);
    --layout-card-shadow-hover: 0 14px 38px hsla(var(--Black, 0 0% 0%), 0.16);

    --layout-modal-z: 1200;
    --layout-modal-overlay: hsla(var(--Black, 0 0% 0%), 0.62);
    --layout-modal-surface: hsla(var(--ColorBgPrimary, 0 0% 100%), 1);
    --layout-modal-radius: var(--RadiusLG, 14px);
    --layout-modal-shadow: 0 28px 64px hsla(var(--Black, 0 0% 0%), 0.32);
    --layout-modal-max-width: min(980px, 94vw);
    --layout-modal-max-height: 92vh;
}

/* ============================================================================
   Generic Grid Primitives
   ============================================================================ */

.layout-grid {
    display: grid;
    gap: var(--layout-gap-lg);
    width: 100%;
}

.layout-grid--tight {
    gap: var(--layout-gap-sm);
}

.layout-grid--loose {
    gap: var(--layout-gap-xl);
}

.layout-grid--1 {
    grid-template-columns: 1fr;
}

.layout-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.layout-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.layout-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-min-col, 16rem), 1fr));
}

.layout-grid--center {
    align-items: center;
}

.layout-grid--stretch {
    align-items: stretch;
}

@media (max-width: 1100px) {
    .layout-grid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .layout-grid--3,
    .layout-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .layout-grid--2,
    .layout-grid--3,
    .layout-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Generic Card Primitives
   ============================================================================ */

.layout-card {
    background: var(--layout-card-bg);
    border: var(--layout-card-border);
    border-radius: var(--layout-card-radius);
    box-shadow: var(--layout-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.layout-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--layout-card-shadow-hover);
}

.layout-card__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.layout-card__media {
    aspect-ratio: var(--layout-media-ratio, 16 / 9);
    overflow: hidden;
    background: hsla(var(--ColorBrand, 210 65% 40%), 0.08);
}

.layout-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.layout-card__body {
    padding: var(--Space4, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-sm);
    flex: 1;
}

.layout-card__meta {
    font-size: var(--FontSizeSM, 0.875rem);
    color: hsla(var(--ColorTextSecondary, 220 8% 30%), 0.9);
    margin: 0;
}

.layout-card__title {
    font-size: var(--FontSizeLG, 1.125rem);
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.layout-card__text {
    font-size: var(--FontSizeSM, 0.875rem);
    line-height: 1.6;
    margin: 0;
    color: hsla(var(--ColorTextPrimary, 220 10% 20%), 0.9);
}

.layout-card__footer {
    padding: 0 var(--Space4, 1rem) var(--Space4, 1rem);
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--layout-gap-sm);
}

.layout-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: var(--FontSizeXS, 0.75rem);
    font-weight: 600;
    background: hsla(var(--ColorBrand, 210 65% 40%), 0.12);
    color: hsla(var(--ColorBrand, 210 65% 40%), 1);
}

/* Compatibility mapping for existing featured cards */
.featured-cards-grid {
    gap: var(--layout-gap-lg);
    padding-bottom: 40px;
}

.featured-card {
    border: var(--layout-card-border);
    border-radius: var(--layout-card-radius);
    box-shadow: var(--layout-card-shadow);
}

.featured-card:hover {
    box-shadow: var(--layout-card-shadow-hover);
}

/* ============================================================================
   Centralized Modal Foundations
   ============================================================================ */

:root {
    --layout-modal-target-width: min(80vw, 1920px);
    --layout-modal-content-padding: 40px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--layout-modal-overlay);
    backdrop-filter: blur(2px);
    z-index: calc(var(--layout-modal-z) - 1);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal-backdrop.show {
    opacity: 1;
}

/* Shared dialog surface and elevation across theme modal variants */
:where(.news-article-modal-card, .event-modal-content, .product-modal-box, .contact-modal-dialog, .job-modal-content) {
    background: var(--layout-modal-surface);
    border-radius: var(--layout-modal-radius);
    box-shadow: var(--layout-modal-shadow);
    border: 1px solid hsla(var(--ColorBorder, 0 0% 80%), 0.4);
    width: var(--layout-modal-target-width) !important;
    max-width: 1920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Keep modal content comfortably scrollable on small viewports */
:where(.news-article-modal-card, .event-modal-content, .product-modal-box, .contact-modal-dialog, .job-modal-content) {
    max-height: var(--layout-modal-max-height);
}

/* Unified close button shape/hover for all theme modals */
:where(.modal-close, .news-article-modal-close, .event-modal-close, .product-modal-close, .contact-modal-close, .job-modal-close) {
    width: auto;
    height: auto;
    border-radius: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: hsl(var(--ColorBrand, 210 65% 40%)) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}

:where(.modal-close, .news-article-modal-close, .event-modal-close, .product-modal-close, .contact-modal-close, .job-modal-close):hover {
    background: transparent !important;
    box-shadow: none !important;
    color: hsla(var(--ColorBrandDark, 210 65% 30%), 1);
    transform: translateY(-1px);
}

:where(.modal-close, .news-article-modal-close, .event-modal-close, .product-modal-close, .contact-modal-close, .job-modal-close) .material-symbols-outlined {
    font-size: 32px;
    line-height: 1;
    color: hsl(var(--ColorBrand, 210 65% 40%)) !important;
}

/* News article modal shell baseline (uses global openModal helper states) */
.modal.news-article-modal {
    position: fixed;
    inset: 0;
    display: none;
    width: 100vw;
    z-index: var(--layout-modal-z);
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
}

.modal.news-article-modal.show,
.modal.news-article-modal[aria-hidden="false"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.news-article-modal-card {
    width: var(--layout-modal-target-width);
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.news-article-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.news-article-modal-body .news-article-header-grid {
    display: grid;
    grid-template-columns: 30% 1fr;
    align-items: start;
    gap: 24px;
}

.news-article-modal-body .news-article-header-col-left {
    width: 100%;
    justify-self: start;
}

.news-article-modal-body .news-featured-image {
    margin-bottom: 0;
}

.news-article-modal-body .news-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.news-article-modal-body .news-article-taxonomy-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.news-article-modal-body .news-article-taxonomy-row > .news-article-tags {
    margin-bottom: 0;
}

.news-article-modal-body .news-article-taxonomy-row > .news-article-tags h3 {
    margin-bottom: 8px;
}

.event-modal-container,
.product-modal-overlay,
.job-modal {
    align-items: center;
    justify-content: center;
}

.contact-modal.is-open,
.contact-modal[aria-hidden="false"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 28px);
}

.contact-modal-dialog {
    margin: 0 !important;
}

:where(.modal-header, .news-article-modal-header, .contact-modal-header, .event-modal-header) {
    display: flex;
    align-items: center;
}

:where(.modal-header, .news-article-modal-header, .contact-modal-header, .event-modal-header)
  :where(.modal-close, .news-article-modal-close, .event-modal-close, .product-modal-close, .contact-modal-close, .job-modal-close) {
    margin-left: auto !important;
}

/* Modal body consistency for common modal structures */
:where(.modal-body, .news-article-modal-body, .product-modal-info, .contact-modal-body, .job-modal-body) {
    overflow-y: auto;
    padding: var(--layout-modal-content-padding) !important;
}

@media (max-width: 768px) {
    .news-article-modal-body .news-article-header-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .news-article-modal-body .news-article-taxonomy-row {
        gap: 12px;
    }

    :where(.news-article-modal-card, .event-modal-content, .product-modal-box, .contact-modal-dialog, .job-modal-content) {
        border-radius: 12px;
        max-height: 95vh;
    }
}