@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700&display=swap");

.hig-wrapper {
    width: 100%;
    font-family: "Barlow Semi Condensed", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* LAYOUT: 3-column mode (3 small per row)
   - Small  = span 1
   - Wide   = span 2
   - XL     = span 3
*/
.hig-wrapper.hig-layout-three .hig-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hig-wrapper.hig-layout-three .hig-card {
    grid-column: span 1;
}

.hig-wrapper.hig-layout-three .hig-card.hig-card--wide {
    grid-column: span 2;
}

.hig-wrapper.hig-layout-three .hig-card.hig-card--xl {
    grid-column: span 3;
}

/* LAYOUT: wide mode (2 small + 1 wide rows)
   We'll use 8 columns:
   - Small  = span 2
   - Wide   = span 4
   - XL     = span 6
*/
.hig-wrapper.hig-layout-wide .hig-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px;
}

.hig-wrapper.hig-layout-wide .hig-card {
    grid-column: span 2;
}

.hig-wrapper.hig-layout-wide .hig-card.hig-card--wide {
    grid-column: span 4;
}

.hig-wrapper.hig-layout-wide .hig-card.hig-card--xl {
    grid-column: span 6;
}

/* Responsive behavior for BOTH layouts */
@media (max-width: 991.98px) {
    .hig-wrapper.hig-layout-three .hig-grid,
    .hig-wrapper.hig-layout-wide .hig-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hig-wrapper.hig-layout-three .hig-card,
    .hig-wrapper.hig-layout-three .hig-card.hig-card--wide,
    .hig-wrapper.hig-layout-three .hig-card.hig-card--xl,
    .hig-wrapper.hig-layout-wide .hig-card,
    .hig-wrapper.hig-layout-wide .hig-card.hig-card--wide,
    .hig-wrapper.hig-layout-wide .hig-card.hig-card--xl {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .hig-wrapper.hig-layout-three .hig-grid,
    .hig-wrapper.hig-layout-wide .hig-grid {
        grid-template-columns: 1fr;
    }

    .hig-wrapper.hig-layout-three .hig-card,
    .hig-wrapper.hig-layout-three .hig-card.hig-card--wide,
    .hig-wrapper.hig-layout-three .hig-card.hig-card--xl,
    .hig-wrapper.hig-layout-wide .hig-card,
    .hig-wrapper.hig-layout-wide .hig-card.hig-card--wide,
    .hig-wrapper.hig-layout-wide .hig-card.hig-card--xl {
        grid-column: auto;
    }
}

/* CARD BASE – fixed height so centering is consistent */
.hig-card {
    position: relative;
    height: 320px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Slightly shorter on tablet/phone */
@media (max-width: 991.98px) {
    .hig-card {
        height: 280px;
    }
}
@media (max-width: 575.98px) {
    .hig-card {
        height: 240px;
    }
}

/* Background image */
.hig-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.03);
    transition: transform 0.45s ease;
    z-index: 0;
}

/* Dark overlay */
.hig-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hig-overlay-base, rgba(0, 0, 0, 0.35));
    transition: background 0.22s ease;
    z-index: 1;
}

/* Hover effects */
.hig-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}

.hig-card:hover::before {
    background: var(--hig-overlay-hover, rgba(0, 0, 0, 0.7));
}

.hig-card:hover .hig-card-bg {
    transform: scale(1.08);
}

/* Click area */
.hig-card-link {
    display: block;
    position: relative;
    z-index: 2;
    height: 100%;
    text-decoration: none;
    color: transparent; /* do NOT pass theme link color down */
}

/* CONTENT OVERLAY – centered to the CARD using grid */
.hig-card-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 32px;
    display: grid;
    place-items: center;
    text-align: center;
    pointer-events: none;
}

/* Title + description share the same grid cell (perfect overlap) */
.hig-card-title,
.hig-card-desc {
    grid-area: 1 / 1;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 90%;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

/* TITLE – visible by default */
.hig-card-title {
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1.1;
    opacity: 1;
    transition: opacity 0.22s ease;
}

/* DESCRIPTION – bigger, hidden by default */
.hig-card-desc {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.22s ease;
}

/* If NO description text, keep title visible on hover */
.hig-card:not(:has(.hig-card-desc:not(:empty))):hover .hig-card-title {
    opacity: 1 !important;
}

/* Normal hover swap (when description exists) */
.hig-card:hover .hig-card-title {
    opacity: 0;
}

.hig-card:hover .hig-card-desc {
    opacity: 1;
}

/* Accent links inside description if used */
.hig-card-desc a {
    color: var(--hig-accent, #0dc524);
    text-decoration: underline;
}

/* Force all overlay text + links to stay white */
.hig-card-inner,
.hig-card-inner a,
.hig-card-inner a:visited,
.hig-card-inner a:hover,
.hig-card-inner a:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
    .hig-card-inner {
        padding: 24px 18px;
    }
    .hig-card-title {
        font-size: 1.6rem;
        letter-spacing: 0.12em;
    }
    .hig-card-desc {
        font-size: 1.3rem;
    }
}