html, body {
    scroll-behavior: smooth;
    font-family: 'Montserrat', sans-serif;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* navbar */
.navbar-menu-transition {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.navbar-menu-transition.show {
    max-height: 500px;
    opacity: 1;
}

.menu-icon .menu-line {
    transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
    transform-origin: center;
}

.menu-icon.open .top {
    transform: translateY(4.3px) rotate(45deg);
}

.menu-icon.open .middle {
    opacity: 0;
}

.menu-icon.open .bottom {
    transform: translateY(-4.3px) rotate(-45deg);
}

@media (max-width: 1023px) {
    #navbar-menu {
        position: absolute;
        top: 70%;
        padding-top: 25px;
        padding-left: 10px;
        padding-right: 10px;
        left: 0;
        right: 0;
        z-index: 50;
    }
}

@media (min-width: 1024px) {
    #navbar-menu {
        display: flex !important;
        max-height: none !important;
        opacity: 1 !important;
    }
}

/* blob animation */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
        animation: blob 7s infinite;
    }
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    .animation-delay-4000 {
        animation-delay: 4s;
    }

.floating {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* event content links — matches legacy mirror's prose-a:text-[#008dd2] */
.event-content a {
    --tw-text-opacity: 1;
    color: rgb(0 141 210 / var(--tw-text-opacity));
}

/* event hero — image right (its file is a variant capped at 600px tall,
   displayed at the hero's own height), solid panel left (min 50%, grows to
   meet the image, or gets overlapped by it when the image is wider than 50%) */
.event-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2 / 1;
    max-height: 505px;
}

/* Only the composed title/meta overlay needs the solid panel color — a plain
   content-graphic hero (object-contain, see _hero.html.slim) would otherwise
   show it as odd-looking letterbox bars behind an image that's supposed to
   stand on its own. */
.event-hero--panel {
    background: #3fabd4;
}

.event-hero__image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    max-width: none;
}

.event-hero__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%; /* JS (hero_controller) overrides this once the image has a rendered width */
    z-index: 2;
    background: #3fabd4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    box-sizing: border-box;
    padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 5vw, 3rem);
}

.event-hero__title,
.event-hero__meta {
    color: #fff;
    text-align: right;
    max-width: 32rem;
}

.event-hero__title {
    font-weight: 700;
    margin: 0;
}

.event-hero__title h1 {
    font-size: clamp(1.1rem, 4.5vw, 2.4rem);
}

.event-hero__title h2 {
    font-size: clamp(.75rem, 2.2vw, 1.25rem);
}

.event-hero__meta p {
    font-size: clamp(.7rem, 2vw, 1.125rem);
    margin: .25rem 0 0;
}

.event-hero__logo {
    position: absolute;
    left: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 4vw, 2rem);
    z-index: 3;
    height: clamp(1.5rem, 5vw, 3rem);
    width: auto;
    filter: brightness(0) invert(1); /* no white logo asset — force the colored one white */
}

/* event card (events#index list) — hero reused at card-slot size instead of
   its own aspect-ratio/max-height, which target the full-width detail page.
   Sizing is plain CSS, not Tailwind utility classes: tailwind_build.css is a
   frozen vendor extract of the mirror's own class usage (see ADR-0002), so an
   arbitrary value like h-[385px] that never appeared in the mirror compiles
   to nothing. */
.event-card {
    height: auto;
}

.event-card-hero {
    position: relative;
    height: 14rem;
}

.event-card-hero .event-hero {
    height: 100%;
    aspect-ratio: unset;
    max-height: none;
}

@media (min-width: 1024px) {
    .event-card {
        height: 385px;
    }

    .event-card-hero {
        height: 100%;
    }
}

/* homepage event grid (3-up) — hero on its own row, 16:9, rest of the card
   info below; same reused-hero sizing trick as .event-card-hero above. The
   legacy .aspect-w-16/.aspect-h-9 plugin classes (from the mirror) don't work
   here: they rely on the sized child being position:absolute, but .event-hero
   hardcodes position:relative for its own internal absolute children. */
.event-grid-card-hero {
    position: relative;
    aspect-ratio: 16 / 9;
}

.event-grid-card-hero .event-hero {
    height: 100%;
    aspect-ratio: unset;
    max-height: none;
}

/* grid card hero is tiny (a third of a row) — the detail-page hero's type
   scale/spacing is way oversized here, so shrink it down for desktop only */
@media (min-width: 1024px) {
    .event-grid-card-hero .event-hero__title h1 {
        font-size: 1.5em;
    }

    .event-grid-card-hero .event-hero__panel {
        padding: 10px;
    }

    .event-grid-card-hero .event-hero__meta > p {
        padding: 0;
    }

    .event-grid-card-hero .event-hero__logo {
        height: 25px;
        bottom: 15px;
        left: 15px;
    }
}

/* below this width the side-by-side layout has no room left for the text —
   stack panel above image instead of trying to keep shrinking it */
@media (max-width: 368px) {
    .event-hero {
        display: flex;
        flex-direction: column;
        aspect-ratio: unset;
        max-height: none;
    }

    .event-hero__image {
        position: static;
        order: 3;
        width: 100%;
        height: auto;
        display: block;
    }

    .event-hero__panel {
        position: relative;
        order: 1;
        width: 100% !important;
        padding-left: 6rem; /* room for the logo on the left, at the same level as the moderator line */
    }

    .event-hero__logo {
        /* stays position:absolute (from the base rule), now anchored to the
           panel instead of the whole hero, so it lines up with the meta text */
        order: 2;
    }

    .event-hero__description {
        width: 100% !important;
    }
}

/* Pagy's pagy_nav ships unstyled <a> tags (no configurable classes without a
   custom nav helper) — styled here to match the mirror's own hand-rolled
   pagination (coworking-most.cz/events/index.html), which used the same
   px-3/py-2/border-gray-300/rounded-md/shadow/bg-blue-50 Tailwind classes. */
.pagy {
    display: inline-flex;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.pagy a {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    margin-left: -1px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
}

.pagy a:first-child {
    margin-left: 0;
    border-radius: 0.375rem 0 0 0.375rem;
}

.pagy a:last-child {
    border-radius: 0 0.375rem 0.375rem 0;
}

.pagy a:hover:not([aria-disabled]) {
    background: #f9fafb;
}

.pagy a.current {
    background: #eff6ff;
    color: #2563eb;
}

.pagy a[aria-disabled]:not(.current) {
    color: #d1d5db;
    cursor: default;
}