/* C88 homepage: visual entry points and readable editorial sections */

.home-hero {
    position: relative;
    min-height: min(760px, 82vh);
    display: grid;
    align-items: end;
    overflow: hidden;
    background: var(--surface-1);
}

.home-hero__media,
.home-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-hero__media img { object-fit: cover; opacity: .58; }
.home-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 7 12 / .92), rgb(5 7 12 / .48) 60%, rgb(5 7 12 / .2)); }
.home-hero__content { position: relative; z-index: 1; max-width: 850px; padding: clamp(5rem, 12vw, 10rem) 0 clamp(3rem, 8vw, 7rem); }
.home-hero__eyebrow { margin-bottom: var(--space-sm); color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.home-hero__title { margin-bottom: var(--space-md); color: var(--color-text); font-size: clamp(2.5rem, 7vw, 6rem); line-height: .98; letter-spacing: 0; }
.home-hero__desc { max-width: 700px; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.8; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

.section-header { max-width: 760px; margin: 0 auto var(--space-xl); text-align: center; }
.section-header__title { margin-bottom: var(--space-sm); color: var(--color-text); font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.15; }
.section-header__desc { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.8; }

.home-games { padding: clamp(3rem, 7vw, 6rem) 0; }
.game-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.game-card { overflow: hidden; background: var(--surface-1); border: 1px solid var(--surface-3); border-radius: var(--radius-md); }
.game-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.game-card__body { padding: var(--space-lg); }
.game-card__title { margin-bottom: .6rem; color: var(--color-text); font-size: var(--text-xl); }
.game-card__desc { color: var(--color-text-muted); line-height: 1.75; }
.game-card__link { display: inline-flex; margin-top: var(--space-md); color: var(--color-accent); font-weight: 700; }

.home-features { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--surface-1); }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.feature-item { display: grid; grid-template-columns: minmax(220px, 31%) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: start; padding: clamp(1.75rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--surface-3); }
.feature-item:last-child { border-bottom: 1px solid var(--surface-3); }
.feature-item__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.feature-item__title { grid-column: 2; margin: 0 0 .75rem; color: var(--color-text); font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.25; }
.feature-item__desc { grid-column: 2; margin: 0; color: var(--color-text-muted); font-size: var(--text-body); line-height: 1.85; }

.home-cta { padding: clamp(3rem, 7vw, 6rem) 0; text-align: center; }
.home-cta__inner { max-width: 800px; margin: 0 auto; }
.home-cta__title { margin-bottom: var(--space-md); color: var(--color-text); font-size: var(--text-3xl); }
.home-cta__desc { margin-bottom: var(--space-lg); color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.8; }

@media (max-width: 850px) { .game-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .feature-item { grid-template-columns: 1fr; }
    .feature-item__title,
    .feature-item__desc { grid-column: 1; }
    .feature-item__img { max-width: 30rem; }
}