/* benefit-partner-card.css */

/* ===== Hide duplicate page title on VEN-Card page ===== */
/* The Views page has its own hero header, so hide the page-title block */
/* Placed outside @layer for higher specificity */
body:has(.view-venneker-benefits) #block-adesso-cms-theme-pagetitle,
body:has(.view-venneker-benefits) .block-page-title-block,
body:has(.view-venneker-benefits) > h2:first-of-type {
  display: none !important;
}

@layer components {
  /* ===== Page Background ===== */
  .view-venneker-benefits {
    @apply relative py-8 md:py-12;
    background:
      radial-gradient(ellipse 80% 50% at 20% 0%, rgb(251 191 36 / 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 85% 80%, rgb(251 191 36 / 0.04) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgb(248 250 252 / 0.5) 0%, transparent 100%),
      linear-gradient(180deg, rgb(255 255 255) 0%, rgb(250 251 252) 50%, rgb(255 255 255) 100%);
  }

  /* Card base with shadow and border */
  .benefit-partner-card {
    @apply rounded-xl overflow-hidden;
    box-shadow:
      0 1px 3px 0 rgb(0 0 0 / 0.04),
      0 1px 2px -1px rgb(0 0 0 / 0.03),
      0 0 0 1px rgb(0 0 0 / 0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .benefit-partner-card:hover {
    box-shadow:
      0 24px 48px -12px rgb(0 0 0 / 0.15),
      0 12px 24px -8px rgb(0 0 0 / 0.1),
      0 0 0 1px rgb(202 138 4 / 0.2);
    transform: translateY(-6px);
    border-color: rgb(202 138 4 / 0.35);
  }

  .benefit-partner-card:active {
    transform: translateY(-3px);
    box-shadow:
      0 12px 24px -8px rgb(0 0 0 / 0.12),
      0 6px 12px -4px rgb(0 0 0 / 0.08);
  }

  /* Card inner content area */
  .benefit-partner-card .p-5 {
    @apply p-5 md:p-6;
  }

  .benefit-partner-card img {
    @apply max-h-24 md:max-h-28 w-auto object-contain transition-all duration-300;
    filter: grayscale(0.1);
  }

  .benefit-partner-card:hover img {
    transform: scale(1.03);
    filter: grayscale(0);
  }

  /* Logo container background refinement */
  .benefit-partner-card > div:first-of-type {
    @apply relative overflow-hidden;
  }

  .benefit-partner-card > div:first-of-type::after {
    content: '';
    @apply absolute inset-0 bg-gradient-to-t from-white/30 to-transparent pointer-events-none;
  }

  /* ===== Leaflet Map Styling ===== */
  .leaflet-container {
    @apply rounded-2xl;
    min-height: 400px;
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.05),
      0 2px 4px -2px rgb(0 0 0 / 0.03),
      0 0 0 1px rgb(0 0 0 / 0.04);
  }

  @media (min-width: 768px) {
    .leaflet-container {
      min-height: 480px;
    }
  }

  @media (min-width: 1024px) {
    .leaflet-container {
      min-height: 520px;
    }
  }

  /* Map popup styling */
  .leaflet-popup-content-wrapper {
    @apply rounded-xl;
    border: 1px solid rgb(0 0 0 / 0.08);
    box-shadow:
      0 20px 25px -5px rgb(0 0 0 / 0.1),
      0 8px 10px -6px rgb(0 0 0 / 0.1);
  }

  .leaflet-popup-content {
    font-family: var(--font-sans, system-ui);
    margin: 0 !important;
    padding: 0;
    min-width: 280px;
    max-width: 320px;
  }

  .leaflet-popup-tip {
    /* ds-exception: Standard elevation shadow */
    box-shadow: 0 3px 6px -1px rgb(0 0 0 / 0.1);
  }

  .leaflet-popup-close-button {
    @apply text-slate-400 hover:text-slate-600 transition-colors;
    font-size: 22px !important;
    padding: 8px 10px !important;
  }

  /* Card in Popup - compact version */
  .leaflet-popup-content .benefit-partner-card {
    @apply shadow-none border-0;
  }

  /* Hide logo in popup - show only text content */
  .leaflet-popup-content .benefit-partner-card > div:first-of-type {
    @apply hidden;
  }

  .leaflet-popup-content .benefit-partner-card .p-5 {
    @apply p-4;
  }

  /* Custom map markers */
  .leaflet-marker-icon {
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.2));
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .leaflet-marker-icon:hover {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.25));
  }

  /* Map controls styling */
  .leaflet-control-zoom {
    @apply border-0 shadow-lg rounded-lg overflow-hidden;
  }

  .leaflet-control-zoom a {
    @apply bg-white text-slate-700 hover:bg-slate-50 border-0;
  }

  .leaflet-control-zoom a:first-child {
    @apply border-b border-slate-200;
  }

  /* ===== Views Grid Layout ===== */
  /* Match reference site: 6 columns on large screens */
  .view-venneker-benefits .views-view-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6;
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  /* Grid item enter animation */
  .view-venneker-benefits .views-view-grid > .views-row {
    animation: cardFadeIn 0.4s ease-out backwards;
  }

  .view-venneker-benefits .views-view-grid > .views-row:nth-child(1) { animation-delay: 0.05s; }
  .view-venneker-benefits .views-view-grid > .views-row:nth-child(2) { animation-delay: 0.1s; }
  .view-venneker-benefits .views-view-grid > .views-row:nth-child(3) { animation-delay: 0.15s; }
  .view-venneker-benefits .views-view-grid > .views-row:nth-child(4) { animation-delay: 0.2s; }
  .view-venneker-benefits .views-view-grid > .views-row:nth-child(5) { animation-delay: 0.25s; }
  .view-venneker-benefits .views-view-grid > .views-row:nth-child(6) { animation-delay: 0.3s; }
  .view-venneker-benefits .views-view-grid > .views-row:nth-child(7) { animation-delay: 0.35s; }
  .view-venneker-benefits .views-view-grid > .views-row:nth-child(8) { animation-delay: 0.4s; }

  @keyframes cardFadeIn {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .view-venneker-benefits .views-view-grid > .views-row {
      animation: none;
    }
  }

  /* Page header area styling */
  .view-venneker-benefits .view-header {
    @apply mb-12 md:mb-16;
  }

  /* Map attachment wrapper with section styling */
  .view-venneker-benefits .attachment {
    @apply mb-8 md:mb-12 relative pt-6;
  }

  /* Map wrapper with subtle background */
  .view-venneker-benefits .attachment .leaflet-container {
    @apply border border-slate-200/60;
  }

  /* Grid section styling with proper spacing */
  .view-venneker-benefits .view-content {
    @apply relative pt-8 md:pt-12;
    /* Top border divider for visual separation */
    border-top: 1px solid rgb(226 232 240 / 0.6);
    margin-top: 2rem;
  }

  /* ===== Category Badge Variants ===== */
  /* Different colors for different categories */
  .benefit-partner-card span[class*="bg-amber"]:has(+ h3) {
    /* Default amber styling - applied in template */
  }

  /* ===== Footer CTA Area ===== */
  .view-venneker-benefits::after {
    content: '';
    @apply block mt-12 md:mt-20 pt-8 pb-12 md:pb-16;
    background: linear-gradient(to bottom, transparent 0%, rgb(248 250 252 / 0.5) 50%, rgb(248 250 252) 100%);
  }

  /* ===== Card Content Consistency ===== */
  .benefit-partner-card h3 {
    @apply line-clamp-2 min-h-[2.5rem] md:min-h-[2.75rem];
  }

  .benefit-partner-card p {
    @apply line-clamp-1;
  }

  /* ===== Focus States for Accessibility ===== */
  .benefit-partner-card:focus-within {
    @apply ring-2 ring-amber-400/50 ring-offset-2;
  }

  .benefit-partner-card a:focus-visible {
    @apply outline-2 outline-offset-2 outline-amber-500 rounded;
  }

  /* ===== Mobile Optimizations ===== */
  @media (max-width: 640px) {
    .view-venneker-benefits {
      @apply px-4;
    }

    .benefit-partner-card .p-5 {
      @apply p-4;
    }

    .view-venneker-benefits .view-header {
      @apply mb-8;
    }

    .view-venneker-benefits .attachment::before {
      @apply text-lg mb-3;
    }

    .view-venneker-benefits .view-content::before {
      @apply text-lg;
    }

    .view-venneker-benefits .view-content::after {
      @apply text-sm mb-6;
    }
  }

  /* ===== Link Underline Animation ===== */
  .benefit-partner-card a {
    @apply relative;
  }

  .benefit-partner-card a::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-px bg-amber-400 transition-all duration-300;
  }

  .benefit-partner-card:hover a::after {
    @apply w-full;
  }

  /* ===== Animations ===== */
  @keyframes gradient-x {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .animate-gradient-x {
    animation: gradient-x 2s ease infinite;
  }

  /* ===== Scroll Behavior ===== */
  .view-venneker-benefits {
    scroll-padding-top: 100px;
  }

  /* ===== Print Styles ===== */
  @media print {
    .view-venneker-benefits .attachment {
      display: none;
    }

    .benefit-partner-card {
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .view-venneker-benefits .views-view-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}