/* =========================================
   HOME_PAGE.CSS
   The site's real "Home" page (home.php) - hero + events carousel + the
   About Us / Data Hub quick-link card groups. This is a DIFFERENT file
   from css/home.css, which styles the one-time intro/splash screen served
   at index.php (the logo video + ENTER button) - two different pages,
   kept as two separate stylesheets.
   ========================================= */

.bg-home {
    background-image: url('../images/webp/323.webp');   /* Matt, 29 Sep 2026 (was 30.webp) */
}

.home-heading {
    text-align: center;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ============================
   EVENTS CAROUSEL
   ============================ */

.home-events-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.home-events {
    margin: 1.5rem;
    width: 100%;
    max-width: 1400px;
}

.home-slideshow {
    position: relative;
    width: 100%;
}

/* Visible window */
.home-slideshow .viewport {
    border-radius: var(--radius1);
    overflow: hidden;
    height: 28vh;
    min-height: 200px;
    max-height: 280px;
}

/* Slides row */
.home-slideshow .slides {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 1.5rem;
    box-sizing: border-box;
}

.home-slideshow .slide {
    flex: 1 1 0;
    display: flex;
    opacity: 0.85;
    transition: opacity 180ms ease;
}

.home-slideshow .slide.visible {
    opacity: 1;
}

.home-slideshow .slide.hidden {
    display: none;
}

/* Card itself - matches the join-page card look (gradient/border), with
   its own vertical scrollbar if an event's description runs long, since
   the viewport height above is deliberately capped and not meant to grow
   to fit every card's content. */
.home-slideshow .activity-card {
    width: 100%;
    border-radius: var(--radius1);
    background-image: var(--gradient-light);
    border: 0.125rem solid var(--highlight-colour);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    color: white;
    overflow-y: auto;
}

.home-slideshow .activity-card h2 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
}

.home-slideshow .activity-card p {
    margin: 0;
}

/* Controls sit in their OWN row below the viewport, never layered on top
   of the cards. The joinUs.php carousel this was ported from absolutely
   positioned its prev/next/playpause buttons over the slide viewport,
   which is what made them overlap the cards' own text at shorter card
   heights - putting them in a normal flex row underneath removes the
   overlap entirely rather than trying to reposition around it. */
.home-slideshow-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.home-slideshow .control {
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    outline: none;
}

.home-slideshow .control:hover,
.home-slideshow .control:focus-visible {
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.home-slideshow .control:active {
    transform: scale(0.98);
}

.home-slideshow .control.playpause {
    width: auto;
    min-width: 44px;
    padding: 0 14px;
    font-weight: 600;
    gap: 8px;
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    letter-spacing: 0.2px;
}

.home-slideshow .icon {
    font-size: 20px;
    line-height: 1;
}

.home-slideshow .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1388px) {
    .home-slideshow .viewport {
        min-height: 190px;
    }
}

@media (max-width: 768px) {
    .home-slideshow .viewport {
        min-height: 170px;
    }

    .home-slideshow-controls {
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .home-slideshow .slide,
    .home-slideshow .control {
        transition: none;
    }
}

/* ============================
   ABOUT US / DATA HUB CARD GROUPS
   ============================
   The card grids themselves reuse the Members Dashboard's own
   ".dashboard-default-container" / ".dashboard-default-container-item" /
   ".dashboard-quicklinks" / ".form-container-item" classes (from
   css/members_dashboard_layout_default.css, linked on home.php too) -
   this page doesn't redefine that styling, it deliberately reuses it, so
   these cards look identical to the Members Dashboard's, per the site
   owner's request. Only the section heading wrapper is new here. */

.home-linkgroup {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-linkgroup .home-heading {
    margin-top: 1.5rem;
}