/* ══════════════════════════════════════════════════════════
   INDEX.CSS — Homepage-only styles for Forge47
   Depends on: common.css (must be loaded first)
   Covers: hero title/CTA (homepage variant), about section
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   HERO — Homepage overrides
   ══════════════════════════════════════════════════════════ */
.hero-content {
    padding: 0 100px 130px;
}

.hero-title {
    font-family: 'Horizon', sans-serif;
    font-size: clamp(6rem, 13vw, 2rem);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--frost);
    margin-bottom: 36px;
    animation: heroFadeUp 1s ease 0.2s both;
}

.cta_main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.hero-cta {
    font-size: 1.4rem;
    width: 400px;
    max-width: none;
}


/* ══════════════════════════════════════════════════════════
   ABOUT — Homepage version (two-column image + text)
   ══════════════════════════════════════════════════════════ */
.about {
    background: var(--obsidian);
    padding: 90px 0;
}
.about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin: 0 auto;
}
.about-img {
    width: 100%;
    aspect-ratio: 5/3;
    object-fit: cover;
}
.about-text {
    padding: 20px 65px 20px 0;
    text-align: end;
}
.about-body {
    font-family: 'Jost', sans-serif;
    font-size: 1.66rem;
    line-height: 1.8;
    color: rgba(239, 240, 241, 0.78);
}


/* ══════════════════════════════════════════════════════════
   TABLET RESPONSIVE — 769px to 1024px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

    /* ── HERO ────────────────────────────────────────────── */
    .hero-title {
        font-size: clamp(5rem, 11vw, 9rem);
        line-height: 0.95;
        margin-bottom: 0;
    }

    /* ── ABOUT ───────────────────────────────────────────── */
    .about { padding: 72px 0; }
    .about-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
    .about-text { padding: 16px 36px 16px 0; text-align: end; }
    .section-label { font-size: 1.35rem; letter-spacing: 0.17em; margin-bottom: 16px; }
    .about-body { font-size: 1.25rem; line-height: 1.75; }
}


/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 768px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── HERO ────────────────────────────────────────────── */
    .hero-content{
        padding: 0 20px 30px;
    }
    .hero-title {
        font-size: clamp(4rem, 18vw, 6rem);
        margin-bottom: 0;
        line-height: 0.9;
    }
    .cta_main { justify-content: flex-start; }
    .hero-cta { width: auto; }

    /* ── ABOUT ───────────────────────────────────────────── */
    .about { padding: 56px 0; }
    .about-inner { grid-template-columns: 1fr; gap: 0; }
    .about-img { aspect-ratio: 16/10; width: 100%; }
    .about-text { padding: 32px 22px 16px; text-align: left; }
    .section-label { font-size: 1.1rem; letter-spacing: 0.13em; margin-bottom: 14px; }
    .about-body { font-size: 1.05rem; line-height: 1.75; }
}


/* ══════════════════════════════════════════════════════════
   VERY SMALL SCREENS — max-width: 390px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
    .hero-title { font-size: clamp(3.6rem, 20vw, 5.5rem); }
    .about-body { font-size: 0.95rem; }
}