/* MCT Gutscheine – Frontend Styles */

/* ── Hero: halbe Höhe (Seitenverhältnis 32:9 statt 16:9) ─ */
.mct-gutscheine-hero .mct-hero__image-wrap,
.mct-gutscheine-hero .mct-hero__image {
    aspect-ratio: 32 / 9 !important;
}

/* ── Hero: seitlicher Abstand auf Mobile ─────────────── */
@media (max-width: 640px) {
    .mct-gutscheine-hero .mct-hero__image-wrap {
        margin-left:   16px !important;
        margin-right:  16px !important;
        border-radius: 16px !important;
    }
}

/* ── Deaktiviert ──────────────────────────────────────────── */
.mct-gutscheine-disabled {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      40vh;
    padding:         48px 24px;
    text-align:      center;
    color:           #555;
}
.mct-gutscheine-disabled p {
    font-size:     18px;
    margin-bottom: 20px;
}
.mct-gutscheine-disabled__back {
    font-size:       14px;
    color:           #f97316;
    text-decoration: none;
}
.mct-gutscheine-disabled__back:hover { text-decoration: underline; }

/* ── Hero ohne Bild ───────────────────────────────────────── */
.mct-gutscheine-title-bar {
    padding:    48px 24px 32px;
    text-align: center;
}
.mct-gutscheine-title-bar h1 {
    font-size:     clamp(24px, 5vw, 40px);
    font-weight:   700;
    margin-bottom: 8px;
}
.mct-gutscheine-title-bar p { font-size: 16px; color: #666; }

/* ── Showcase Container ───────────────────────────────────── */
.mct-homepage-version--gutscheine { padding: 0 0 80px; }

/* ══════════════════════════════════════════════════════════
   Showcase-Grid (kopiert aus mct-homepage-toggle/toggle.css)
   Wird hier mitgeliefert da toggle.css nur auf der Startseite
   geladen wird.
══════════════════════════════════════════════════════════ */
.mct-gutscheine-products.mct-showcase { padding: 0 0 40px; }

.mct-showcase__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   16px;
    padding:               0 16px;
}
@media (min-width: 641px) {
    .mct-showcase__grid {
        grid-template-columns: 1fr 1fr;
        padding:               0 24px;
        gap:                   20px;
    }
}

.mct-showcase__item {
    background:    #1a1a1a;
    border-radius: 18px;
    overflow:      hidden;
    border:        1px solid rgba(255,255,255,.07);
    transition:    border-color .2s;
    position:      relative;
}
.mct-showcase__item:hover { border-color: rgba(255,255,255,.14); }

.mct-showcase__card-trigger {
    position:                absolute !important;
    inset:                   0 !important;
    width:                   100% !important;
    height:                  100% !important;
    z-index:                 3;
    background:              transparent !important;
    border:                  none !important;
    border-radius:           0 !important;
    padding:                 0 !important;
    margin:                  0 !important;
    min-height:              0 !important;
    box-shadow:              none !important;
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
    cursor:                  pointer;
}
.mct-showcase__card-trigger::before,
.mct-showcase__card-trigger::after { content: none !important; display: none !important; }

.mct-showcase__img-link {
    display:         block;
    text-decoration: none;
    position:        relative;
    z-index:         2;
}
.mct-showcase__img-wrap {
    aspect-ratio: 1 / 1;
    overflow:     hidden;
    display:      block;
}
.mct-showcase__img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease;
}
.mct-showcase__item:hover .mct-showcase__img-wrap img { transform: scale(1.04); }

.mct-showcase__body {
    padding:  18px 20px 22px;
    position: relative;
    z-index:  2;
}
.mct-showcase__name {
    font-size:   1rem;
    font-weight: 600;
    color:       #f0f0f0;
    margin:      0 0 8px;
    line-height: 1.35;
}
.mct-showcase__descr {
    font-size:   .82rem;
    color:       rgba(255,255,255,.5);
    margin:      0 0 14px;
    line-height: 1.5;
}
.mct-showcase__meta {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}
.mct-showcase__price {
    font-size:   .95rem;
    font-weight: 600;
    color:       var(--mct-primary, #ce5c15);
    white-space: nowrap;
}
.mct-showcase__price .woocommerce-Price-amount,
.mct-showcase__price bdi { color: inherit; font-weight: inherit; font-size: inherit; }

.mct-showcase__item .mct-showcase__cta { position: static !important; bottom: auto !important; right: auto !important; }
.mct-showcase__cta {
    position:        relative !important;
    z-index:         4 !important;
    flex-shrink:     0;
    width:           36px !important;
    height:          36px !important;
    border-radius:   50% !important;
    border:          1.5px solid rgba(255,255,255,.18) !important;
    background:      #262626 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    color:           var(--mct-link, #9b8ec4) !important;
    padding:         0 !important;
    margin-left:     auto;
    cursor:          pointer;
    min-height:      0 !important;
    min-width:       0 !important;
    box-shadow:      none !important;
    outline:         none !important;
    transition:      border-color .13s, color .13s, background .13s;
}
.mct-showcase__cta::before,
.mct-showcase__cta::after { content: none !important; display: none !important; }
.mct-showcase__cta svg { display: block !important; flex-shrink: 0; width: 16px !important; height: 16px !important; }
.mct-showcase__cta:hover { border-color: rgba(255,255,255,.30) !important; background: #333 !important; }