@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-neutral-background font-sans text-neutral-text-dark antialiased;
  }

  a {
    @apply text-brand-600 transition hover:text-accent-500;
  }

  h1 {
    @apply font-heading text-3xl font-semibold tracking-tight text-brand-700 md:text-4xl;
  }

  h2 {
    @apply font-heading text-2xl font-semibold tracking-tight text-brand-600;
  }
}

@layer components {
  .topbar-muted {
    @apply bg-neutral-card/90;
  }

  .text-topbar {
    @apply text-xs text-neutral-muted;
  }

  .topbar-cluster {
    @apply flex flex-wrap items-center gap-x-3 gap-y-1;
  }

  .topbar-divider {
    @apply hidden text-neutral-divider sm:inline;
  }

  .topbar-link {
    @apply text-neutral-muted transition hover:text-brand-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-card;
  }

  .topbar-social-link {
    @apply inline-flex h-8 w-8 items-center justify-center rounded-full bg-white text-brand-700 shadow-sm transition hover:bg-brand-100 hover:text-accent-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-card;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center rounded-xl bg-brand-600 px-5 py-3 text-sm font-medium text-white shadow-md transition hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-600 focus-visible:ring-offset-2;
  }

  .btn-accent {
    @apply inline-flex items-center justify-center rounded-xl bg-accent-500 px-5 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-accent-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2;
  }

  .card {
    @apply rounded-2xl bg-neutral-card p-6 shadow-soft;
  }

  .tagline {
    @apply text-sm font-semibold uppercase tracking-wide text-accent-600;
  }

  .divider {
    @apply border-neutral-divider/30;
  }

  .home-carousel {
    @apply mx-auto max-w-5xl space-y-4;
  }

  .home-carousel__header {
    @apply space-y-1;
  }

  .home-carousel__viewport {
    @apply relative overflow-hidden rounded-2xl border border-neutral-divider/40 bg-neutral-card shadow-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2;
  }

  .home-carousel__track {
    @apply flex;
    transition: transform 420ms ease-in-out;
    will-change: transform;
  }

  .home-carousel__slide {
    @apply relative w-full shrink-0;
    aspect-ratio: 16 / 7;
  }

  .home-carousel__slide img {
    @apply h-full w-full object-cover;
  }

  .home-carousel__caption {
    @apply absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/25 to-transparent px-4 pb-4 pt-12 text-sm font-medium text-white md:px-6 md:pb-5;
  }

  .home-carousel__controls {
    @apply flex items-center justify-between gap-3;
  }

  .home-carousel__button {
    @apply inline-flex items-center rounded-lg border border-neutral-divider/60 bg-white px-3 py-2 text-sm font-medium text-brand-700 transition hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500;
  }

  .home-carousel__dots {
    @apply flex items-center justify-center gap-2;
  }

  .home-carousel__dot {
    @apply h-2.5 w-2.5 rounded-full bg-neutral-divider transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500;
  }

  .home-carousel__dot.is-active {
    @apply w-6 bg-brand-600;
  }


  .home-carousel--fullbleed {
    @apply w-full;
    margin-left: 0;
    margin-right: 0;
  }

  .home-gallery,
  .home-gallery-fallback {
    @apply mt-4 grid grid-cols-1 gap-4 md:grid-cols-2;
  }

  .home-gallery a,
  .home-gallery-fallback__item {
    @apply relative overflow-hidden rounded-2xl border border-neutral-divider/40 bg-neutral-card shadow-soft;
    aspect-ratio: 16 / 9;
  }

  .home-gallery__image,
  .home-gallery-fallback__item img {
    @apply h-full w-full object-cover;
  }

  .home-gallery-fallback__item figcaption {
    @apply absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/25 to-transparent px-4 pb-4 pt-10 text-sm font-medium text-white;
  }

  @media (prefers-reduced-motion: reduce) {
    .home-carousel__track,
    .home-carousel__dot {
      transition: none;
    }
  }
}

@layer utilities {
  .social-icon {
    @apply h-4 w-4;
  }

  .section-padding {
    @apply py-12 md:py-16;
  }

  .section-padding-sm {
    @apply py-8 md:py-10;
  }
}