/* tiles.css */

/* SECTION WRAPPER */
.tiles-section {
    padding: 3.5rem clamp(1.5rem, 3vw, 3.5rem) 3rem;
    background: #08080b; /* unchanged */
}

/* HEADER */
.tiles-header {
    max-width: 50rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.tiles-header h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;

    /* THEME DYNAMIC */
    color: var(--gold-soft);

    margin: 0 0 0.5rem;
}

.tiles-header p {
    margin: 0;
    color: var(--offwhite-soft);
    font-size: 0.95rem;
}

/* GRID (default) */
.tiles-grid {
    max-width: 64rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

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

@media (max-width: 600px) {
    .tiles-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* CUSTOM 12-COLUMN GRID */
.tiles-grid-custom {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    max-width: 80rem;
    margin: 0 auto;
}

/* Width helpers */
.tile-w12 { grid-column: span 12; }
.tile-w8  { grid-column: span 8; }
.tile-w4  { grid-column: span 4; }

@media (max-width: 900px) {
    .tile-w8, .tile-w4, .tile-w12 {
        grid-column: span 12;
    }
}

/* TILE BASE */
.tile {
    position: relative;
    border-radius: 1rem;
    padding: 1.1rem 1.1rem 1.05rem;
    text-align: left;

    background: #111114;

    /* BORDER NOW THEME-AWARE */
    border: 1px solid rgba(from var(--gold) r g b / 0.22);

    color: var(--offwhite);
    cursor: pointer;
    overflow: hidden;

    box-shadow: 0 1px 3px rgba(0,0,0,0.4);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

/* Remove glossy pseudo-element */
.tile::before {
    display: none;
}

/* PRIMARY TILE OVERRIDE */
.tile-primary {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #15151a;
}

/* ICON SUPPORT */
.tile-icon {
    width: 1.55rem;
    height: 1.55rem;
    margin-bottom: 0.55rem;
    opacity: 0.92;

    /* THEME DYNAMIC ICON COLOR */
    color: var(--gold-soft);

    display: block;
}

/* TEXT */
.tile-title {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.tile-subtitle {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 0.85rem;
    color: var(--offwhite-soft);
}

/* HOVER */
.tile:hover {
    transform: translateY(-4px);

    box-shadow: 0 6px 14px rgba(0,0,0,0.5);

    /* STRONGER THEMED BORDER */
    border-color: rgba(from var(--gold) r g b / 0.65);
}

/* ACTIVE STATE */
.tile-active {
    transform: translateY(-2px) scale(0.99);
}

/* MOBILE */
@media (max-width: 600px) {
    .tile {
        padding: 1rem 1rem 0.95rem;
    }

    .tile-icon {
        margin-bottom: 0.4rem;
    }
}