/* ── Category tiles ──────────────────────────────────────────
   Figma (Stay, Rooms by type): desktop 1366:66572,
   mobile 1366:66278.
   ─────────────────────────────────────────────────────────── */

.category-tiles {
    padding: var(--section-y) var(--pad-x);
    background: var(--color-candle-wax);
}

.category-tiles__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: var(--site-max-w);
    margin: 0 auto;
}

.category-tiles__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.category-tiles__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.category-tiles__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 312px;
    padding: 16px;
    overflow: hidden;
    isolation: isolate; /* the picture and wash sit behind the words */
    background: var(--color-beamwood);
    color: var(--color-canvas);
}

.category-tiles__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* The wash under the words: lighter at rest, deeper when open. */
.category-tiles__tile::before,
.category-tiles__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity var(--transition);
}

.category-tiles__tile::before {
    /* Figma's CSS export drops the minus on the first stop (-9.34%), which
       draws a hard line; these are the stops read from the Figma fill. */
    background: linear-gradient(359.33deg, rgba(81, 7, 17, 0.6) -9.34%, rgba(20, 13, 12, 0.6) 11.52%, rgba(81, 7, 17, 0) 64.57%);
}

.category-tiles__tile::after {
    background: linear-gradient(359.33deg, rgba(81, 7, 17, 0.9) -9.34%, rgba(20, 13, 12, 0.9) 13.21%, rgba(81, 7, 17, 0) 70.54%);
    opacity: 0;
}

.category-tiles__body {
    display: flex;
    flex-direction: column;
}

.category-tiles__name {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.14px;
}

/* The words and arrow open up under the name. */
.category-tiles__more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--transition), opacity var(--transition);
}

.category-tiles__more-inner {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

.category-tiles__text {
    flex: 1;
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0.07px;
    color: var(--color-candle-wax);
}

.category-tiles__link {
    margin-left: auto;
}

/* The arrow's hit area covers the tile. Nothing between them is
   positioned, so the tile holds it and the closed row doesn't clip it. */
.category-tiles__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.category-tiles__tile:hover::after,
.category-tiles__tile:focus-within::after {
    opacity: 1;
}

.category-tiles__tile:hover .category-tiles__more,
.category-tiles__tile:focus-within .category-tiles__more {
    grid-template-rows: 1fr;
    opacity: 1;
}

.category-tiles__tile:focus-within {
    outline: 2px solid var(--color-copper);
    outline-offset: 4px;
}

.category-tiles__link:focus-visible {
    outline: none;
}


/* Tablet and mobile — 1024px and below: words showing */
@media (max-width: 1024px) {
    .category-tiles__inner {
        gap: 20px;
    }

    .category-tiles__header {
        gap: 16px;
        text-align: left;
    }

    .category-tiles__eyebrow {
        color: var(--color-beamwood);
    }

    /* Tablet: three across, taller so the words fit */
    .category-tiles__list {
        gap: 16px;
    }

    .category-tiles__tile {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .category-tiles__tile::before {
        opacity: 0;
    }

    .category-tiles__tile::after {
        opacity: 1;
    }

    .category-tiles__name {
        font-size: 24px;
        line-height: 1.18;
        letter-spacing: -0.12px;
    }

    .category-tiles__more {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}

/* Mobile — 767px and below: one under another */
@media (max-width: 767px) {
    .category-tiles__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-tiles__tile {
        aspect-ratio: 353 / 198.5;
    }
}