/*
 * ============================================================
 * FEARANN ALBA — projects.css
 * ============================================================
 * Styles for the Projects section on the homepage.
 *
 * This section uses a scroll-driven card stacking effect — as the
 * user scrolls down, the first card pins in place below the heading
 * and each later card slides upward into view from below, covering
 * the card beneath it. Scrolling back up reverses this. The effect
 * is produced entirely with CSS position: sticky (see section 5);
 * no JavaScript is required.
 *
 * Contents:
 *   1. Gradient text utility (.projects-gradient-text)
 *   2. Projects section wrapper
 *   3. Section heading
 *   4. Card stack container
 *   5. Individual card sticky wrappers
 *   6. Card inner styling
 *   7. Card top row (number + name + button)
 *   8. Card image grid (bottom row)
 *   9. Live Project button
 *  10. Responsive adjustments
 * ============================================================
 */


/*
 * ============================================================
 * 1. GRADIENT TEXT UTILITY
 * ============================================================
 * Applied to the section heading and large project numbers.
 * Creates a vertical gradient from a dark grey at the top
 * to a lighter blue-grey at the bottom — gives a premium,
 * dimensional feel to large display text.
 * ============================================================
 */

.projects-gradient-text {
    /* The gradient runs top to bottom */
    background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);

    /* Clip the background to the text shape only */
    -webkit-background-clip: text;
    background-clip: text;

    /* Make the text itself transparent so the gradient shows through */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Ensure the gradient renders correctly in all browsers */
    display: inline-block;
}


/*
 * ============================================================
 * 2. PROJECTS SECTION WRAPPER
 * ============================================================
 * The outer section sits on a dark background.
 *
 * overflow: clip is essential here — it clips each card
 * while it is in its translated-down (hidden) position,
 * preventing cards from being visible below the section
 * before they animate into place.
 *
 * Important: we use 'clip' rather than 'hidden' because
 * overflow: hidden creates a new scroll container, which
 * silently breaks position: sticky on all descendant elements
 * (cards stop pinning and scroll away instead). overflow: clip
 * clips visually without creating a scroll context, so sticky
 * positioning works correctly inside the section.
 *
 * z-index: 10 ensures this section layers correctly above
 * adjacent sections as it scrolls over them.
 * ============================================================
 */

.projects-section {
    background-color: #0C0C0C;
    overflow: clip;
    position: relative;
    z-index: 10;

    /*
     * Rounded top corners give the section a "floating card"
     * feel as it scrolls up over the section above it.
     * The clamp scales from 40px on small screens to 60px desktop.
     */
    border-radius: clamp(40px, 8vw, 60px) clamp(40px, 8vw, 60px) 0 0;
}


/*
 * ============================================================
 * 3. SECTION HEADING
 * ============================================================
 * "Projects" displayed as a large display heading.
 * Uses the gradient text class above.
 * font-weight: 900 (black) for maximum weight contrast.
 * clamp() makes it fluid from mobile to ultra-wide.
 * ============================================================
 */

.projects-section__heading-wrap {
    padding:
        clamp(5rem, 8vw, 8rem)      /* top — breathing room below nav */
        clamp(1.25rem, 4vw, 2.5rem) /* right */
        clamp(2.5rem, 4vw, 2.5rem)  /* bottom */
        clamp(1.25rem, 4vw, 2.5rem);/* left */
    text-align: center;
}

.projects-section__heading {
    font-family: var(--font-primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;

    /*
     * Fluid size: minimum 3rem on tiny screens,
     * scales up with viewport, maximum 160px on wide screens.
     */
    font-size: clamp(3rem, 12vw, 160px);
    line-height: 1;

    /* No margin — padding is handled by the wrapper above */
    margin: 0;
}


/*
 * ============================================================
 * 4. CARD STACK CONTAINER
 * ============================================================
 * The container that holds all three card sticky-wrappers.
 * Padding below gives space after the last card settles
 * before the next section appears.
 * ============================================================
 */

.projects-stack {
    padding-bottom: clamp(3rem, 6vw, 6rem);
}


/*
 * ============================================================
 * 5. CARD STICKY WRAPPERS
 * ============================================================
 * The card stacking is driven entirely by CSS position: sticky —
 * no JavaScript required.
 *
 * Each 100vh wrapper is itself sticky and pins at top: 5rem.
 * Because the wrappers are siblings inside .projects-stack, they
 * share the full height of the stack as their containing block,
 * which is what lets every card stay pinned while the later cards
 * scroll up and stack on top of it. The first card (Drone) stays
 * put as the base of the stack; the rest rise up and cover it in
 * turn as the user scrolls.
 * ============================================================
 */

.projects-card-wrapper {
    /*
     * 100vh height gives each card a full viewport of scroll
     * travel, so the next card rises up over a smooth, unhurried
     * distance rather than snapping into place.
     */
    height: 100vh;

    /*
     * The WRAPPER itself is the sticky element. Because all three
     * wrappers are siblings inside .projects-stack, they share the
     * whole stack as their containing block — so each one pins at
     * top: 5rem and STAYS pinned while the later cards scroll up
     * and stack on top of it. The first card (Drone) therefore
     * remains on screen as the base of the stack instead of
     * scrolling away once its own section has been passed.
     *
     * top: 5rem (80px) clears the fixed navigation bar. All cards
     * use the same top value, so they stack directly on top of one
     * another as they arrive.
     */
    position: sticky;
    top: 5rem;
}

.projects-card-sticky {
    /*
     * Plain wrapper now — the stickiness lives on
     * .projects-card-wrapper above. This element only supplies the
     * horizontal padding that keeps cards off the viewport edges.
     */
    padding: 0 clamp(1rem, 3vw, 2.5rem);
}


/*
 * ============================================================
 * 6. CARD INNER STYLING
 * ============================================================
 * The visual card itself. Dark background with a subtle
 * blue-grey border. Heavy border radius matches the
 * rounded-corner language of the section header.
 *
 * overflow: hidden ensures images respect the border radius.
 * ============================================================
 */

.projects-card {
    background-color: #0C0C0C;
    border: 2px solid #D7E2EA;
    border-radius: clamp(40px, 6vw, 60px);
    padding: clamp(1rem, 2.5vw, 2rem);
    overflow: hidden;
}


/*
 * ============================================================
 * 7. CARD TOP ROW
 * ============================================================
 * Flex row containing:
 *   Left:  large project number + category label stacked
 *   Right: project name + Live Project button
 * ============================================================
 */

.projects-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
    flex-wrap: wrap;
}

/* --- Left side: number + category --- */

.projects-card__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.projects-card__number {
    font-family: var(--font-primary);
    font-weight: 900;

    /*
     * Same fluid sizing as service numbers.
     * Minimum 3rem on mobile, up to 140px on wide screens.
     */
    font-size: clamp(3rem, 10vw, 140px);
    line-height: 0.9;
    margin: 0;
    padding: 0;
}

.projects-card__category {
    /*
     * Small uppercase label beneath the number.
     * Uses the blue-grey border colour for a subtle, muted look.
     */
    color: #D7E2EA;
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 0.35rem;
}

/* --- Right side: project name + button --- */

.projects-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    text-align: right;
}

.projects-card__name {
    color: #D7E2EA;
    font-family: var(--font-primary);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(1.2rem, 3vw, 2.5rem);
    line-height: 1.1;
    margin: 0;
}


/*
 * ============================================================
 * 8. CARD IMAGE GRID
 * ============================================================
 * Two-column grid at the bottom of each card:
 *   Left column (40% width):  two stacked images
 *   Right column (60% width): one tall image
 *
 * The combined height of the two left images equals the
 * height of the single right image.
 * ============================================================
 */

.projects-card__images {
    display: flex;
    gap: clamp(0.5rem, 1.2vw, 1rem);
    align-items: stretch;
}

/* Left column — 40% width, two images stacked */
.projects-card__col-left {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.2vw, 1rem);
}

/* Right column — 60% width, one tall image */
.projects-card__col-right {
    flex: 0 0 calc(60% - clamp(0.5rem, 1.2vw, 1rem));
    display: flex;
}

/* --- Individual images --- */

.projects-card__img {
    width: 100%;
    object-fit: cover;
    display: block;

    /*
     * Border radius matches the card's heavy rounded corners —
     * keeps images feeling like part of the card design.
     */
    border-radius: clamp(20px, 4vw, 40px);
}

/* Top left image — shorter */
.projects-card__img--top-left {
    height: clamp(130px, 16vw, 230px);
}

/* Bottom left image — taller */
.projects-card__img--bottom-left {
    height: clamp(160px, 22vw, 340px);
}

/* Right image — fills full height of both left images combined */
.projects-card__img--right {
    height: 100%;
    min-height: clamp(290px, 38vw, 570px);
    flex: 1;
}


/*
 * ============================================================
 * 9. LIVE PROJECT BUTTON
 * ============================================================
 * Pill-shaped outlined button. Differs from the site's
 * standard square .btn — it uses border-radius: 9999px
 * to create a fully rounded pill shape, matching the
 * prompt spec for this specific component.
 *
 * Colour: #D7E2EA border and text — the blue-grey that runs
 * through the cards — keeping the card interior consistent.
 * On hover: subtle blue-grey fill at 10% opacity.
 * ============================================================
 */

.btn--live-project {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Pill shape — overrides the site's default square corners */
    border-radius: 9999px;

    border: 2px solid #D7E2EA;
    color: #D7E2EA;
    background-color: transparent;

    font-family: var(--font-primary);
    font-weight: 500;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;

    padding: 0.75rem clamp(1.5rem, 2.5vw, 2.5rem);

    cursor: pointer;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.btn--live-project:hover {
    background-color: rgba(215, 226, 234, 0.1);
    color: #D7E2EA;
}


/*
 * ============================================================
 * 10. RESPONSIVE ADJUSTMENTS
 * ============================================================
 * The fluid clamp() values handle most sizing automatically.
 * These breakpoints handle layout shifts that clamp alone
 * can't cover — specifically the card top row on narrow screens.
 * ============================================================
 */

/*
 * On small screens, the card top row wraps:
 * number + category above, name + button below.
 * Both sides become full-width and left-aligned.
 */
@media (max-width: 600px) {

    .projects-card__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .projects-card__right {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    /*
     * On mobile, the image grid becomes a single column:
     * All three images stack vertically.
     */
    .projects-card__images {
        flex-direction: column;
    }

    .projects-card__col-left,
    .projects-card__col-right {
        flex: 0 0 100%;
        width: 100%;
    }

    .projects-card__img--right {
        min-height: clamp(200px, 60vw, 350px);
        height: clamp(200px, 60vw, 350px);
    }

    /*
     * The sticky top offset is the same 5rem on mobile, but we keep
     * this rule so the value is easy to tune for the shorter mobile
     * nav. It targets the wrapper, which is the sticky element.
     */
    .projects-card-wrapper {
        top: 5rem;
    }
}

/*
 * On medium screens (tablets), give the image grid
 * slightly more height to fill the card well.
 */
@media (min-width: 601px) and (max-width: 900px) {

    .projects-card__img--top-left {
        height: clamp(100px, 14vw, 180px);
    }

    .projects-card__img--bottom-left {
        height: clamp(130px, 18vw, 260px);
    }

    .projects-card__img--right {
        min-height: clamp(230px, 32vw, 440px);
    }
}