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

@layer base {
  h1 { @apply text-4xl font-bold  mb-4 leading-tight; }
  h2 { @apply text-3xl font-bold  mb-3 leading-tight; }
  h3 { @apply text-2xl font-semibold  mb-3 leading-snug; }
  h4 { @apply text-xl font-semibold  mb-2 leading-snug; }
  h5 { @apply text-lg font-semibold  mb-2 leading-snug; }
  h6 { @apply text-base font-bold  uppercase tracking-wide mb-2; }

  p { @apply  leading-relaxed mb-4; }
}

@layer components {

  /* ===== Layout ===== */
  .main {
    @apply bg-lech-sand-100;
  }

  .main-wrapper {
    @apply max-w-container mx-auto flex gap-8 ;
  }

  .center-content {
    @apply flex-1 min-w-0;
  }

  .right-sidebar {
    @apply w-60 min-w-60 flex flex-col hidden lg:block;
  }

  .left-sidebar,
  .right-sidebar {
    @apply mt-2 mb-2;
  }


  /* ===== Header ===== */
  .site-header {
    @apply w-full border-b-2 border-lech-water-300 bg-lech-paper;
  }

  .header-top-decoration {
    @apply h-2 bg-lech-header opacity-60;
  }

  .header-inner {
    @apply max-w-container mx-auto px-6 py-3 flex items-center justify-between;
  }

  .logo {
    @apply flex items-center flex-shrink-0 ;
  }

  .logo img {
    @apply max-h-logo w-auto flex-shrink-0;
  }

  .top-nav {
    @apply flex items-center gap-0;
  }

  .top-nav a {
    @apply text-nav font-semibold text-lech-water-800 px-5 py-2 transition-all hover:underline;
  }

  /* ===== Footer ===== */
  .site-footer {
    @apply text-white bg-lech-footer;
  }

  .footer-wave {
    @apply w-full h-6;
  }

  .footer-wave svg {
    @apply w-full h-full;
  }

  .footer-content {
    @apply max-w-container mx-auto px-6 py-3 text-center;
  }

  .footer-content p {
    @apply text-sm opacity-95;
  }

  .footer-content p:last-child {
    @apply text-xs opacity-95;
  }

  /* ===== Event Cards ===== */
  .event-card {
    @apply bg-lech-water-800 rounded overflow-hidden;
  }

  .event-header {
    @apply text-center p-4 text-lech-paper;
  }

  .event-title {
    @apply text-3xl text-lech-paper mt-2;
  }

  .event-subtitle {
    @apply text-2xl text-lech-paper mt-2;
  }

  .event-date {
    @apply mt-2;
  }

  .event-image-wrapper {
    @apply aspect-video overflow-hidden w-full;
  }

  .event-image {
    @apply w-full h-full object-cover;
  }

  .event-description {
    @apply px-4 pb-4 text-lech-water-100 text-sm;
  }

  .section-title {
    @apply text-2xl font-bold text-lech-ink pb-1 mt-4;
  }

  .wave-divider {
    @apply flex justify-center my-3;
  }

  .wave-divider svg {
    @apply w-full h-6;
  }

  .wave-divider-sidebar {
    @apply flex justify-center my-3;
  }

  .wave-divider-sidebar svg {
    @apply w-full h-2;
  }


  .no-events {
    @apply text-gray-600;
  }


  /* ======= media =========== */
  @media (max-width: 1023px) {
    .main-wrapper {
      @apply flex-col;
    }

    .left-sidebar,
    .right-sidebar {
      @apply w-full min-w-0;
    }

    .left-sidebar {
      @apply order-first;
    }
  }

  .events-section {
    @apply px-2 py-2;
  }

  .wave-path {
    @apply stroke-lech-water-300 stroke-[1.5];
  }

  .wave-path-accent {
    @apply stroke-lech-ember-500 stroke-[1.5];
  }

  .left-sidebar {
    @apply rounded-lg bg-lech-sidebar p-3 hidden lg:block relative;
  }

  .sidebar-nav {
    @apply mt-2;
  }

  .sidebar-nav-item-wrapper {
    @apply mb-2;
  }

  .sidebar-box-wrapper {
    @apply mb-4;
  }

  .sidebar-nav-item-link {
    @apply text-sm font-semibold text-lech-ink px-5 py-2 transition-all hover:underline;
  }

  .info-box-card {
    @apply bg-lech-paper border border-lech-water-300 rounded-lg p-6;
  }

  .info-box-title {
    @apply text-lg font-bold text-lech-ink mb-3;
  }

  .info-box-body {
    @apply text-sm text-lech-ink leading-tight;
  }

  .info-box-button {
    @apply my-4;
  }

  .info-box-btn-primary {
    @apply bg-lech-water-800 text-lech-paper px-4 py-2 mb-4 rounded-lg font-semibold transition;
  }

  .sidebar-box-item {
    @apply mb-2;
    /*opacity: 0;*/
    /*transform: translateY(20px);*/
    /*animation: fadeInUp 0.5s ease-out forwards;*/
  }

  /*.sidebar-box-item:nth-child(1) {*/
  /*  animation-delay: 0.1s;*/
  /*}*/
  /*.sidebar-box-item:nth-child(2) {*/
  /*  animation-delay: 0.2s;*/
  /*}*/
  /*.sidebar-box-item:last-child {*/
  /*  animation-delay: 0.3s;*/
  /*}*/
  /*@keyframes fadeInUp {*/
  /*  from {*/
  /*    opacity: 0;*/
  /*    transform: translateY(20px);*/
  /*  }*/
  /*  to {*/
  /*    opacity: 1;*/
  /*    transform: translateY(0);*/
  /*  }*/
  /*}*/
  .wave-accent {
    @apply w-full h-2 mb-2;
  }

  .wave-narrow {
    @apply w-full h-2 mb-2;
  }

  .wave-divider svg path {
    stroke: #7BA3C9;
  }

  .wave-divider-sidebar svg path {
    stroke: #ffffff;
  }

  .footer-wave svg path {
    stroke: #ffffff;
  }

  /* ===== Event Index ===== */
  .event-index-container {
    @apply max-w-container mx-auto px-6 py-8;
  }

  .event-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
  }

  .page-title {
    @apply text-3xl font-bold text-lech-ink mb-6;
  }

  .page-intro {
    @apply text-lg text-lech-ink mb-8;
  }

  /* ===== Artist Index ===== */
  .artist-index-container {
    @apply max-w-container mx-auto px-6 py-8;
  }

  .artist-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
  }

  /* ===== Artist Card ===== */
  .artist-card {
    @apply bg-lech-paper rounded-lg overflow-hidden shadow-md transition-transform hover:translate-y-2;
  }

  .artist-card-header {
    @apply p-6;
  }

  .artist-card-title {
    @apply text-2xl font-bold text-lech-ink mb-2;
  }

  .artist-card-description {
    @apply text-sm text-lech-ink mb-4;
  }

  .artist-card-image-wrapper {
    @apply aspect-square overflow-hidden;
  }

  .artist-card-image {
    @apply w-full h-full object-cover;
  }

  .artist-card-meta {
    @apply px-6 py-4 flex gap-4 flex-wrap;
  }

  .artist-card-website,
  .artist-card-email {
    @apply text-sm font-semibold text-lech-water-800 hover:text-lech-water-600;
  }

  /* ===== Organizer Profile ===== */
  .organizer-profile {
    @apply max-w-container mx-auto px-6 py-8;
  }

  .organizer-header {
    @apply flex flex-col items-center text-center mb-8;
  }

  .organizer-logo-wrapper {
    @apply mb-6;
  }

  .organizer-logo {
    @apply max-h-logo w-auto;
  }

  .organizer-website {
    @apply text-lg text-lech-water-800 hover:text-lech-water-600 mt-2;
  }

  .organizer-description {
    @apply max-w-3xl mx-auto text-lg text-lech-ink mb-8;
  }

  .organizer-events {
    @apply mt-12;
  }

  /* ===== Event Detail ===== */
  .event-detail {
    @apply max-w-container mx-auto px-6 py-8;
  }

  .event-detail-header {
    @apply mb-8;
  }

  .event-meta {
    @apply flex flex-wrap gap-4 text-sm text-lech-ink mb-4;
  }

  .event-time,
  .event-location {
    @apply font-semibold;
  }

  .organizer-box {
    @apply mt-4;
  }

  .organizer-link {
    @apply flex items-center gap-3 text-lech-ink;
  }

  .organizer-logo-detail {
    @apply h-16 w-auto;
  }

  .organizer-name {
    @apply font-semibold;
  }

  /* ===== Line-Up Section ===== */
  .lineup-section {
    @apply mb-8;
  }

  .lineup-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
  }

  .lineup-item {
    @apply flex items-center gap-4 p-4 bg-lech-sidebar rounded-lg;
  }

  .set-time {
    @apply text-lg font-bold text-lech-water-800 min-w-20;
  }

  .artist-thumb {
    @apply h-16 w-16 rounded-full object-cover;
  }

  .artist-name {
    @apply font-semibold;
  }

  /* ===== StreamField Blocks ===== */
  .stream-block-heading {
    @apply text-2xl font-bold text-lech-ink mb-4 mt-6;
  }

  .stream-block-paragraph {
    @apply text-lech-ink leading-relaxed mb-4;
  }

  .stream-block-image {
    @apply my-6;
  }

  .stream-block-image-text {
    @apply my-6 flex flex-col md:flex-row gap-6;
  }

  .stream-block-image-text.layout-left {
    @apply flex-col md:flex-row;
  }

  .stream-block-image-text.layout-right {
    @apply flex-col md:flex-row-reverse;
  }

  .stream-block-image-text img {
    @apply w-full md:w-1/2;
  }

  .stream-block-image-text .text-left,
  .stream-block-image-text .text-right {
    @apply w-full md:w-1/2;
  }

  .stream-block-gallery {
    @apply my-8;
  }

  .gallery-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4;
  }

  .gallery-item {
    @apply aspect-square overflow-hidden;
  }

  .gallery-item img {
    @apply w-full h-full object-cover;
  }

  .stream-block-quote {
    @apply border-l-4 border-lech-water-800 pl-6 py-4 my-6 italic text-xl;
  }

  .stream-block-embed {
    @apply my-8;
  }

  .stream-block-embed iframe {
    @apply w-full aspect-video;
  }

  /* ===== Responsive ===== */
  @media (max-width: 768px) {
    .event-grid {
      @apply grid-cols-1;
    }

    .artist-grid {
      @apply grid-cols-1;
    }

    .lineup-grid {
      @apply grid-cols-1;
    }

    .gallery-grid {
      @apply grid-cols-2;
    }
  }

  /* ===== Content Page ===== */
  .content-page {
    @apply max-w-container mx-auto px-6 py-8;
  }

  .content-header {
    @apply mb-8;
  }

  .content-subtitle {
    @apply text-xl text-lech-water-800 mt-2;
  }

  .content-body {
    @apply text-lech-ink leading-relaxed;
  }

  .content-body h2 {
    @apply text-2xl font-bold text-lech-ink mb-4 mt-6;
  }

  .content-body h3 {
    @apply text-xl font-bold text-lech-ink mb-3 mt-4;
  }

  .content-body p {
    @apply mb-4;
  }

  .content-body ul,
  .content-body ol {
    @apply mb-4 pl-6;
  }

  .content-body li {
    @apply mb-2;
  }

  @media (max-width: 1023px) {
    .main-wrapper {
      @apply flex-col;
    }

    .left-sidebar,
    .right-sidebar {
      @apply w-full min-w-0;
    }

    .left-sidebar {
      @apply order-first;
    }
  }
}