/* ============================================================
   PROJECT CARD — Loop Item
   A card with background video/image, hover-reveal title + tags,
   and a custom "View Project" cursor that follows the mouse.

   Desktop: hover reveals title (fade down), tags (fade up), gradients.
   Mobile:  title + tag icon below card; tap icon to toggle tags
            inside the card with bottom gradient.
   ============================================================ */


/* ── Card Container ── */
.project-card {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
}

.project-card a {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── Background Media (video or image) ── */
.project-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}


/* ── Hover Gradients ── */
.project-card__gradient-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-content);
}

.project-card__gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-content);
}


/* ── Project Name ── */
.project-card__title {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-white);
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-content);
}


/* ── Tags Container ── */
.project-card__tags {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-content);
}


/* ── Individual Tag ── */
.project-card__tag {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    color: var(--color-white);
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    white-space: nowrap;
}

/* Tag service colour variants — stroke colour */
.project-card__tag--brand            { border-color: var(--color-red-brand); }
.project-card__tag--comms            { border-color: var(--color-orange-comms); }
.project-card__tag--web              { border-color: var(--color-blue-web); }
.project-card__tag--app-platform            { border-color: var(--color-purple-app-platform); }
.project-card__tag--name-ideation    { border-color: var(--color-pink-name-ideation); }
.project-card__tag--packaging        { border-color: var(--color-green-packaging); }
.project-card__tag--graphic-design   { border-color: var(--color-yellow-graphic-design); }


/* ── Custom Cursor — "View Project" ── */
.project-card__cursor {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-overlay);
    will-change: transform;
    /* Position so the tail square sits diagonally top-right of mouse */
    transform: translate(12px, -46px);
}

.project-card__cursor svg {
    display: block;
    width: 141px;
    height: 41px;
}


/* ── Mobile-only elements — hidden on desktop ── */
.project-card__info-row {
    display: none;
}

.project-card__title-mobile {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-white);
}


/* ── MOBILE — info below card, tag toggle ── */
@media (max-width: 767px) {

    .project-card {
        overflow: visible;
        aspect-ratio: auto;
    }

    /* Stack link content vertically. Image area only rounds its TOP
       corners — the bottom corners are sharp because the info-row sits
       flush below and supplies its own rounded bottom corners. */
    .project-card a {
        display: flex;
        flex-direction: column;
        height: auto;
        position: relative;
        border-radius: var(--radius) var(--radius) 0 0;
        overflow: hidden;
    }

    /* Media becomes a static block with its own aspect ratio */
    .project-card__media {
        position: static;
        aspect-ratio: 16 / 9;
    }

    /* Hide desktop-only elements */
    .project-card__gradient-top,
    .project-card__cursor,
    .project-card__title {
        display: none;
    }

    /* Bottom gradient: hidden by default, shown when tags are open */
    .project-card__gradient-bottom {
        opacity: 0;
        pointer-events: none;
    }

    /* Tags: positioned inside the card image area, hidden until toggled */
    .project-card__tags {
        position: absolute;
        bottom: var(--space-5);
        left: var(--space-5);
        opacity: 0;
        pointer-events: none;
    }

    .project-card__tag {
        font-size: 12px;
        padding: 4px 10px;
    }

    /* Info row below card: dark footer with rounded bottom corners.
       Sits flush against the image's flat bottom edge so the two
       pieces visually merge into one card with rounded outer corners.
       Title + tag toggle button sit inside on a #262626 background. */
    .project-card__info-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;
        background: var(--color-black);                 /* #262626 */
        border-radius: 0 0 var(--radius) var(--radius); /* rounded bottom only */
        padding: var(--space-3) var(--space-5);
    }

    /* Tag toggle button — visible on mobile */
    .project-card__tag-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        color: var(--color-white);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .project-card__tag-toggle svg {
        width: 20px;
        height: 20px;
    }

    /* The close (X) icon uses the centralised X Icon SVG.
       Both icons share the same 20×20 layout footprint and the
       GSAP swap animation in project-card.js stays unchanged. */
    .project-card__tag-toggle .icon-close path {
        fill: var(--color-white);
    }

    /* X icon hidden by default — GSAP handles the swap animation */
    .project-card__tag-toggle .icon-close {
        display: none;
    }
}