/* ============================================================
   EVENT CARDS - LAYOUT "OPTION B"
   ============================================================
   Loaded LAST (after event-carousel.css and landing.css), so these
   rules override the base "image behind, text overlaid on top" look
   with: a full-width image block on top of the card, and the event
   details in their own block underneath it - nothing overlaid.

   Both event card presentations on the landing page are covered:
     1. The 3D carousel cards   (.event-3d-card, event-carousel.css)
     2. The plain grid cards    (.event-card, landing.css - the
        no-JavaScript / smaller-count fallback)

   Nothing here changes markup, only how the existing elements are
   arranged, so no other feature (carousel rotation, visibility
   toggle, registration links, etc.) is affected.
   ============================================================ */

/* ------------------------------------------------------------
   1. CAROUSEL CARDS (.event-3d-card)
   ------------------------------------------------------------ */

.event-carousel-section .event-3d-card {
    display: flex;
    flex-direction: column;

    /* Taller than the base layout: the image and the text each get
       their own space instead of sharing one stacked area. */
    height: 560px;
}

/* The image becomes a normal top block instead of a full-bleed
   absolutely-positioned background layer. */
.event-carousel-section .event-3d-card-image {
    position: relative;
    inset: auto;

    flex: 0 0 210px;
    height: 210px;

    /* Only a light bottom fade so the image reads cleanly on its own;
       the heavy dark gradient that used to carry the overlaid text
       is no longer needed. */
    background-image:
        linear-gradient(
            180deg,
            rgba(3, 15, 21, 0) 70%,
            rgba(3, 15, 21, 0.35) 100%
        ),
        linear-gradient(135deg, #15505d, #071923);
}

.event-carousel-section .event-3d-card-image::after {
    /* The cyan corner wash was designed for the overlay look; drop it
       so the photo itself is not tinted. */
    background: none;
}

/* The number badge and status pill now sit on the image block only
   (the image is the only part of the card they can overlap). */
.event-carousel-section .event-3d-card .event-3d-number,
.event-carousel-section .event-3d-card .event-3d-status {
    top: 16px;
}

/* Content moves out of the overlay and into its own block below the
   image, on the card's own dark surface. */
.event-carousel-section .event-3d-content {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    left: auto;

    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 22px 22px;

    background: #0b2934;
}

/* ------------------------------------------------------------
   Carousel stage height follows the taller card at each of the
   carousel's own breakpoints (900 / 600 / 380), so the card never
   gets clipped by the 3D stage around it.
   ------------------------------------------------------------ */

.event-3d-stage {
    height: 610px;
}

@media (max-width: 900px) {
    .event-3d-stage {
        height: 530px;
    }

    .event-carousel-section .event-3d-card {
        height: 480px;
    }

    .event-carousel-section .event-3d-card-image {
        flex-basis: 185px;
        height: 185px;
    }
}

@media (max-width: 600px) {
    .event-3d-stage {
        height: 480px;
    }

    .event-carousel-section .event-3d-card {
        height: 440px;
    }

    .event-carousel-section .event-3d-card-image {
        flex-basis: 160px;
        height: 160px;
    }

    .event-carousel-section .event-3d-content {
        padding: 16px 16px 18px;
    }
}

@media (max-width: 380px) {
    .event-3d-stage {
        height: 450px;
    }

    .event-carousel-section .event-3d-card {
        height: 415px;
    }

    .event-carousel-section .event-3d-card-image {
        flex-basis: 145px;
        height: 145px;
    }
}

/* ------------------------------------------------------------
   2. GRID CARDS (.event-card)
   ------------------------------------------------------------ */

.event-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    /* Taller than the base layout for the same reason as the carousel
       card: the image is no longer shared space with the text. */
    min-height: 500px;
}

.event-card-image {
    position: relative;
    inset: auto;
    z-index: 0;

    flex: 0 0 200px;
    height: 200px;

    /* A light bottom fade only; the photo is not meant to carry text
       directly in this layout. */
    background-image:
        linear-gradient(
            180deg,
            rgba(2, 17, 26, 0) 70%,
            rgba(2, 17, 26, 0.3) 100%
        ),
        var(--event-card-photo, none);
}

/* The per-event photography is still set per card; layer it under
   the same light fade used above instead of the old heavy overlay. */
.event-card-one .event-card-image {
    background-image:
        linear-gradient(
            180deg,
            rgba(2, 17, 26, 0) 70%,
            rgba(2, 17, 26, 0.3) 100%
        ),
        url("../images/event-card-one.jpg");
}

.event-card-two .event-card-image {
    background-image:
        linear-gradient(
            180deg,
            rgba(2, 17, 26, 0) 70%,
            rgba(2, 17, 26, 0.3) 100%
        ),
        url("../images/event-card-two.jpg");
}

.event-card-three .event-card-image {
    background-image:
        linear-gradient(
            180deg,
            rgba(2, 17, 26, 0) 70%,
            rgba(2, 17, 26, 0.3) 100%
        ),
        url("../images/event-card-three.jpg");
}

.event-number {
    top: 14px;
}

.event-card-content {
    position: relative;
    z-index: 1;

    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
}

/* ------------------------------------------------------------
   Grid breakpoints follow landing.css's own breakpoints
   (1100 / 850 / 560 / 360) so the taller card scales down in step
   with everything else on the page.
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .event-card-image {
        flex-basis: 180px;
        height: 180px;
    }
}

@media (max-width: 850px) {
    .event-card {
        min-height: 460px;
    }

    .event-card-image {
        flex-basis: 165px;
        height: 165px;
    }
}

@media (max-width: 560px) {
    .event-card {
        min-height: 420px;
    }

    .event-card-image {
        flex-basis: 150px;
        height: 150px;
    }

    .event-card-content {
        padding: 18px 16px 16px;
    }
}

@media (max-width: 360px) {
    .event-card {
        min-height: 400px;
    }

    .event-card-image {
        flex-basis: 135px;
        height: 135px;
    }
}