/*
   Homepage hero carousel — solid 3D conveyor.
   Cards slide in small from the top edge, grow to a centre SPOTLIGHT, then move
   right and shrink out the right edge. Positions are computed every frame by
   assets/js/carousel.js. Loaded only on the homepage (after styles.css, so it
   can use the :root tokens defined there). Independent of the chatbot.
*/

.cc-band {
    position: relative;
    height: clamp(560px, 68vh, 760px);   /* tall enough for 3 spaced cards, still in first screen */
    perspective: 1800px;
    overflow: hidden;        /* cards slide in/out at the edges instead of fading */
    border-radius: 18px;
}

.cc-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Card base — positions set every frame by JS. CSS handles look + size only. */
.cc-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    border-radius: 16px;
    box-shadow:
        0 24px 48px -20px rgba(15, 23, 42, .22),
        0 4px 12px -4px rgba(15, 23, 42, .08);
    overflow: hidden;
    background: #fff;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(.5);
    opacity: 0;
    will-change: transform, opacity;
    transition: box-shadow .3s cubic-bezier(.22, 1, .36, 1);
    /* avoid 3D-transform compositing artifacts */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cc-card img { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cc-card:hover {
    box-shadow:
        0 36px 64px -20px rgba(15, 23, 42, .32),
        0 8px 20px -4px rgba(15, 23, 42, .14);
}

/* Image card — screenshot / photo with a caption strip */
.cc-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.cc-card-image .cc-caption {
    padding: .85rem 1.1rem;
    font-family: var(--font-heading);
    font-size: .82rem;
    color: var(--text-secondary);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}
.cc-card-image .cc-caption span:first-child { flex: 1; }
.cc-card-image .cc-caption span:last-child {
    color: var(--accent-primary);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    white-space: nowrap;
}

/* Logo card — EGU conference mark on white */
.cc-card-logo {
    padding: 2rem 1.5rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
}
.cc-card-logo img {
    max-width: 70%;
    height: auto;
    margin-bottom: .9rem;
}
.cc-card-logo p {
    font-family: var(--font-heading);
    font-size: .82rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Hero slot — drop the old portrait frame; the band IS the visual now */
.hero-visual.cc-slot {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    transform: none;
    animation: none;
}

/* Give the carousel room and push it away from the text column */
.hero-grid {
    grid-template-columns: 1fr 1.08fr;
    gap: clamp(3rem, 6.5vw, 7rem);
}
.hero-content h1 { font-size: clamp(2.1rem, 3.4vw, 3.1rem); }
.hero-content .hero-description { max-width: 46ch; }
/* The narrower text column wraps the 7 hero buttons onto 3 rows; shrink them a
   touch (padding / size / gap) so they settle onto 2 rows. */
.hero-content .btn-group { gap: .55rem; }
.hero-content .btn { padding: .58rem .95rem; font-size: .88rem; }

/* On narrow screens the hero stacks. The 3D conveyor is too cramped on a phone,
   so swap it for a simple horizontal swipe gallery: the cards become a flex row
   you scroll/snap through. (carousel.js skips its animation below 880px.) */
@media (max-width: 880px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .hero-content h1 { font-size: clamp(2rem, 8vw, 3rem); }

    /* styles.css gives .hero-visual order:-1 on mobile (legacy portrait); override
       so the carousel sits BELOW the text + buttons, not above them. */
    .hero-visual.cc-slot { order: 2; }

    .cc-band {
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        perspective: none;
        border-radius: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .75rem;
        margin-top: var(--space-md);
    }
    .cc-track { display: flex; gap: 1rem; height: auto; }
    .cc-card {
        position: static;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
        width: 80%;
        flex: 0 0 80%;
        scroll-snap-align: center;
        box-shadow: 0 8px 24px -10px rgba(15, 23, 42, .18);
    }
    .cc-card-image img { height: 180px; }
}