/* ==========================================================================
   index.css — Styles unique to index.php
   --------------------------------------------------------------------------
   Requires: tokens.css, base.css (in that order, before this file).

   IMPORTANT — everything here is scoped under .page-home or a component class.
   The previous version styled bare `img`, `p`, `h1` and `h2` selectors, which
   leaked into whatever header.php and footer.php render: every logo in the
   header was getting a 300px cap and a gold border. Don't reintroduce
   unscoped element selectors in a page stylesheet.

   Contents:
     1. Hero banner
     2. Content sections
     3. Section media
     4. Credentials box
     5. Skills grid
     6. Achievements
     7. Video
     8. Contact
     9. Responsive overrides
   ========================================================================== */


/* ==========================================================================
   1. Hero banner
   ========================================================================== */
.hero-banner {
    position: relative;
    padding: 80px var(--container-padding-x);
    background: var(--gradient-brand-hero);
    color: var(--color-text-inverse);
    text-align: center;
    overflow: hidden;
    border-bottom: 3px solid var(--color-accent);
}

/* Decorative dot field, right half. Ornamental only. */
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    /* Angle brackets and quotes must be percent-encoded inside a data URI or
       Firefox and Safari silently drop the background. */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='rgba(212,175,55,0.05)'/%3E%3C/svg%3E");
    background-size: 120px;
    opacity: 0.5;
}

.hero-banner__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
    z-index: var(--z-base);
}

/* --------------------------------------------------------------------------
   color IS REQUIRED HERE. Do not remove it.

   .hero-banner sets color: var(--color-text-inverse), and it would be
   reasonable to assume the h1 inside picks that up. It does not.

   base.css has:
       h1, h2, h3, h4, h5, h6 { color: var(--color-brand); }   = #0e1b33

   That rule matches the h1 DIRECTLY. .hero-banner's white only reaches the h1
   by INHERITANCE — and inheritance is the weakest source in the cascade: any
   rule that matches an element directly beats an inherited value, no matter
   how specific the ancestor's selector was. So the name rendered #0e1b33 on a
   #0e1b33 hero: invisible. It was only visible when selected, because the
   selection highlight repaints the text.

   Every other hero on the site declares this (.spk-hero h1, .adv-hero h1,
   .proj-hero h1, .bl-hero h1, .c-hero__title, .gi-hero__title). This one was
   the only one that didn't, which is exactly why it was the only one broken.
   -------------------------------------------------------------------------- */
.hero-title {
    font-size: 3rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.5px;
    margin: 0 0 var(--space-4);
    color: var(--color-text-inverse);
}

.hero-subtitle {
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    color: var(--color-accent);
    margin: 0 0 var(--space-4);
}

.hero-description {
    font-size: 1.2rem;
    color: var(--color-text-inverse);
    opacity: 0.95;
    max-width: var(--measure);
    margin: 0 auto var(--space-8);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}


/* ==========================================================================
   2. Content sections
   --------------------------------------------------------------------------
   Renamed from `.hero` to `.band`. The old file used `.hero` for BOTH the
   banner and every content section, and defined `.hero-content` twice with
   conflicting rules — the second definition silently won. Separate names now.

   Alternating backgrounds use an explicit .band--tinted class rather than
   :nth-child(even), which was counting the language selector and the banner
   and so shaded the wrong sections.
   ========================================================================== */
.band {
    padding: var(--section-padding-y) 10%;
    background-color: var(--color-bg-raised);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.band--tinted {
    background: var(--gradient-surface-alt);
}

.band__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    overflow: hidden;   /* contains the floated section image */
}

.band__inner h2 {
    position: relative;
    color: var(--color-brand);
    font-size: 2.2rem;
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-4);
}

/* Left-aligned rule (the shared .section-header centres its own). */
.band__inner h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-rule);
}

.band__inner p {
    font-size: 1.1rem;
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}


/* ==========================================================================
   3. Section media
   --------------------------------------------------------------------------
   Scoped to .section-image. Floats are set with a class, not the deprecated
   HTML `align` attribute.
   ========================================================================== */
.section-image {
    max-width: 300px;
    border-radius: 8px;
    border: 3px solid var(--color-accent);
    box-shadow: 0 8px 20px rgba(26, 35, 50, 0.15);
    transition: transform var(--duration-base) var(--ease);
}

.section-image:hover {
    transform: scale(1.02);
}

.section-image--left {
    float: left;
    margin: 0 var(--space-7) var(--space-6) 0;
}

.section-image--right {
    float: right;
    margin: 0 0 var(--space-6) var(--space-7);
}


/* ==========================================================================
   4. Credentials box
   ========================================================================== */
.credentials-box {
    background: rgba(212, 175, 55, 0.1);
    border-left: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: var(--space-6);
    margin: var(--space-7) 0;
}

.credentials-box h3 {
    color: var(--color-brand);
    font-size: var(--text-xl);
    margin: 0 0 var(--space-4);
}

.credentials-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credentials-box li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) var(--space-7);
    color: var(--color-text-muted);
}

.credentials-box li::before {
    content: "\25C6";              /* ◆ */
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 1.2rem;
}


/* ==========================================================================
   5. Skills grid
   --------------------------------------------------------------------------
   Uses .pill .pill--outline from base.css. The old .skill-tag class was
   defined differently here and on experience.php — same name, two looks.
   ========================================================================== */
.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-7) 0;
}


/* ==========================================================================
   6. Achievements
   ========================================================================== */
.achievements {
    margin: var(--space-7) 0;
}

.achievement-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    background: var(--gradient-surface);
    border-radius: 8px;
    border-left: 4px solid var(--color-accent);
    transition:
        transform var(--duration-base) var(--ease),
        box-shadow var(--duration-base) var(--ease);
}

.achievement-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(26, 35, 50, 0.1);
}

.achievement-icon {
    flex-shrink: 0;
    color: var(--color-accent);
    font-size: 1.6rem;
    line-height: 1.2;
}

/* Overrides the .band__inner p defaults for text inside a card. */
.achievement-item p {
    margin: 0;
    color: var(--color-text);
}


/* ==========================================================================
   7. Video
   ========================================================================== */
.video-container {
    position: relative;
    padding-bottom: 56.25%;        /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: var(--space-9) 0;
    border-radius: var(--radius-lg);
    border: 3px solid var(--color-accent);
    box-shadow: var(--shadow-card-hover-sm);
}

.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================================
   8. Contact
   ========================================================================== */
.contact-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-9);
}

.contact-container .section-image {
    flex-shrink: 0;
}


/* ==========================================================================
   9. Responsive overrides
   ========================================================================== */
@media (max-width: 768px) {

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-description {
        font-size: var(--text-md);
    }

    .band {
        padding: var(--space-10) 5%;
    }

    .band__inner h2 {
        font-size: 1.8rem;
    }

    /* Unfloat section images. Scoped to .section-image, so header/footer
       imagery is left alone — the old rule used a bare `img` selector with
       `float: none !important` and hit everything on the page. */
    .section-image,
    .section-image--left,
    .section-image--right {
        float: none;
        display: block;
        max-width: 100%;
        margin: 0 0 var(--space-5) 0;
    }

    .contact-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}