{% require_css %}
<style>
  {% scope_css %}

  /* ========== GRID: Desktop wrap, Mobile stack ========== */
  .product-cardlayout {
    width: 100%;
  }

  .product-cardlayout__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  /* ========== CARD (360x480 + Background image) ========== */
  .product-cardlayout__card {
    position: relative;
    overflow: hidden;

    width: 480px;
    height: 360px;

    /* responsive wrap */
    flex: 1 1 480px;
    max-width: 480px;

    /* für Text-Kontrast */
    color: #ffffff;

    /* Hover-Transition */
    transition: transform 180ms ease;
  }

  /* Overlay: Abdunkelung + Blur (Glass-Effekt) */
  .product-cardlayout__card::before {
    content: "";
    position: absolute;
    inset: 0;

    /* Vorgabe: rgba(0,0,0,0.15) + blur(6px) */
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    

    transition: background 200ms ease, backdrop-filter 200ms ease, -webkit-backdrop-filter 200ms ease;
    pointer-events: none;
    z-index: 0;
  }

  /* Hover: Blur auf 6px und Abdunkelung +15%*/
  @media (hover:hover) and (pointer:fine) {
    .product-cardlayout__card:hover::before {
      background: rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
  }

  /* ========== TAG (oben links) ========== */
  .product-cardlayout__tag-wrap {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
  }

  /* Tag-Style nach Vorgabe */
  .tag-repeater__tag {
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 32px;
    background: #EBEBEB;
    color: #000000;
    white-space: nowrap;
  }

  /* ========== INNER CONTENT (unten) ========== */

  .product-cardlayout__content {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    width: 480px;
    padding: 16px 16px 24px 16px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
  }

  .product-cardlayout__textblock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
  }

  .product-cardlayout__kicker {
    margin: 0;
  }

  .product-cardlayout__title {
    margin: 0;
    color: #fff;
    font-size: 28px;
  }


  /* ========== Hover-Reveal (Desktop) ========== */
  .product-cardlayout__description,
  .product-cardlayout__link {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 180ms ease, max-height 180ms ease, transform 180ms ease;
  }

  @media (hover:hover) and (pointer:fine) {
    .product-cardlayout__card:hover .product-cardlayout__description,
    .product-cardlayout__card:hover .product-cardlayout__link {
      opacity: 1;
      max-height: 220px; /* genug für Copy + Link */
      pointer-events: auto;
      transform: translateY(0);
    }
  }

  /* Link: global arrow-link nutzen, hier nur Farbe/Layout (weiß gewünscht) */
  .product-cardlayout__link.arrow-link {
    color: #ffffff;
    margin-top: 4px; /* minimaler Layout-Abstand */
  }

  /* ========== Mobile: kein Hover => immer Text+Link sichtbar & Cards stacken ========== */
  @media (hover:none), (max-width: 680px) {
    .product-cardlayout__card {
      max-width: 100%;
      width: 100%;
      flex-basis: 100%;
      height: auto;
      min-height: 390px;
    }

    .product-cardlayout__content {
      width: 100%;
    }

    .product-cardlayout__description,
    .product-cardlayout__link {
      opacity: 1;
      max-height: none;
      pointer-events: auto;
      transform: none;
    }
    
      /* Mobile Overlay: 30% Abdunklung + 2px Blur */
  .product-cardlayout__card::before {
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  }


/* Description – Desktop */
.product-cardlayout__description {
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

/* Mobile: kein Hover => immer sichtbar; Typo kleiner */
@media (hover:none), (max-width: 680px) {
  .product-cardlayout__description {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }
}

/* Arrow-Link Pfeil im Card-Modul auf weiß setzen (globaler Pfeil läuft über content:url(...) ) */
.product-cardlayout a.arrow-link::before {
  content: url("data:image/svg+xml;utf8,<svg width='20' height='14' viewBox='0 0 20 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M18.813 5.8895L12.518 0L10.144 2.22106L13.5734 5.42947H0L0 8.57054H13.5734L10.144 11.779L12.518 14L18.813 8.11054L20 7.00002L18.813 5.8895Z' fill='%23ffffff'/></svg>") !important;
}

  {% end_scope_css %}
</style>
{% end_require_css %}