/* ==========================================================
   XXL4YOU 2.0
   Vorschau
   Finalversion 1.0
   ========================================================== */

.preview-page {
    flex: 1;

    font-family: var(--font-family-base);

    background: var(--surface);
}

.preview {
    position: relative;

    padding: 44px 0 50px;

    border-bottom: 1px solid rgba(199, 163, 93, .18);
}


/* ==========================================================
   Kopfbereich
   ========================================================== */

.preview__header {
    max-width: 880px;

    margin: 0 auto 34px;

    text-align: center;
}

.preview__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-bottom: 14px;

    color: var(--color-gold);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.preview__eyebrow-icon {
    width: 18px;
    height: 18px;

    display: block;
    flex: 0 0 18px;

    filter:
        brightness(0)
        saturate(100%)
        invert(73%)
        sepia(52%)
        saturate(432%)
        hue-rotate(6deg)
        brightness(96%)
        contrast(91%);
}

.preview__title {
    margin: 0 0 12px;

    color: var(--text-light, #ffffff);

    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
}

.preview__intro {
    margin: 0;

    color: var(--text);

    font-size: var(--text-base);
    line-height: var(--line-height-relaxed);
}


/* ==========================================================
   Kartenraster
   ========================================================== */

.preview__grid {
    display: grid;
    gap: 24px;

    margin: 0 auto;
}

.preview__grid--1 {
    grid-template-columns: minmax(0, 820px);

    max-width: 820px;

    justify-content: center;
}

.preview__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    max-width: 1120px;
}

.preview__grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    max-width: 1120px;
}

.preview__grid--3 .preview-card:last-child {
    grid-column: 1 / -1;

    width: calc(50% - 12px);

    justify-self: center;
}


/* ==========================================================
   Karte
   ========================================================== */

.preview-card {
    min-width: 0;
    min-height: 320px;
    overflow: hidden;

    display: grid;
    grid-template-columns: 44% 56%;

    background: var(--color-card-background);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

/* ==========================================================
   Bild
   ========================================================== */

.preview-card__image {
    position: relative;
    overflow: hidden;

    min-height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 34%,
            rgba(91, 10, 10, .42) 0%,
            rgba(42, 0, 0, .80) 58%,
            var(--color-primary-dark) 100%
        );

    border-right: 1px solid rgba(199, 163, 93, .20);
}

.preview-card__image::after {
    content: "";

    position: absolute;
    inset: auto 0 0;

    height: 30%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(18, 0, 0, .80) 100%
        );

    pointer-events: none;
}

.preview-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;

    transition: transform .4s ease;
}

.preview-card:hover .preview-card__image img {
    transform: scale(1.025);
}

.preview-card__image-placeholder {
    position: relative;
    z-index: 1;

    color: rgba(245, 238, 232, .48);

    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}


/* ==========================================================
   Inhalt
   ========================================================== */

.preview-card__content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: var(--space-md);
}

.preview-card__name {
    margin: 0 0 var(--space-sm);

    color: var(--color-text-light);

    font-size: var(--heading-2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
}

.preview-card__features {
    margin: 0 0 var(--space-lg);
    padding: 0;

    display: grid;
    gap: 12px;

    list-style: none;
}

.preview-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);

    color: var(--color-text);

    font-size: var(--text-base);
    line-height: var(--line-height-normal);

    white-space: normal;
    overflow-wrap: anywhere;
}

.preview-card__icon {
    width: 20px;
    height: 20px;

    display: block;
    flex: 0 0 20px;

    margin-top: 1px;

    filter: brightness(0) saturate(100%)
            invert(73%) sepia(54%) saturate(463%)
            hue-rotate(5deg) brightness(95%) contrast(91%);
}

.preview-card__features li.sedcard-badge--available,
.preview-card__features li.sedcard-badge--later,
.preview-card__features li.sedcard-badge--gone,
.preview-card__features li.sedcard-badge--not-today {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
}

.preview-card__features li.sedcard-badge--available span,
.preview-card__features li.sedcard-badge--later span,
.preview-card__features li.sedcard-badge--gone span,
.preview-card__features li.sedcard-badge--not-today span {
    color: var(--color-text-light);
}

.preview-card__features li.sedcard-badge--available {
    background: rgba(40, 167, 69, 0.20);
    border: 1px solid rgba(40, 167, 69, 0.45);
}

.preview-card__features li.sedcard-badge--later {
    background: rgba(212, 175, 55, 0.20);
    border: 1px solid rgba(212, 175, 55, 0.45);
}

.preview-card__features li.sedcard-badge--gone,
.preview-card__features li.sedcard-badge--not-today {
    background: rgba(180, 40, 40, 0.20);
    border: 1px solid rgba(180, 40, 40, 0.45);
}

/* ==========================================================
   Button
   ========================================================== */

.preview-card__button {
    margin-top: auto;
    min-height: 44px;
    padding: 8px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    color: var(--color-button-text);
    background: var(--color-button-background);

    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-sm);

    text-decoration: none;

    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.preview-card__button:hover,
.preview-card__button:focus-visible {
    color: var(--color-gold);
    background: var(--color-button-background-hover);
    border-color: var(--color-gold);
}

/* ==========================================================
   Hinweis und Leerzustand
   ========================================================== */

.preview__notice {
    max-width: 1120px;

    margin: 22px auto 0;

    color: var(--text-muted);

    font-size: var(--text-xs);
    line-height: var(--line-height-normal);
    text-align: center;
}

.preview__empty {
    max-width: 760px;

    margin: 0 auto;
    padding: 24px;

    border: 1px solid rgba(199, 163, 93, .22);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, .02);
    color: var(--text-muted);

    font-size: var(--text-sm);
    text-align: center;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 980px) {

    .preview__grid--1,
    .preview__grid--2,
    .preview__grid--3 {
        grid-template-columns: 1fr;

        max-width: 680px;
    }

    .preview__grid--3 .preview-card:last-child {
        grid-column: auto;

        width: 100%;
    }
}

@media (max-width: 768px) {

	.preview {
		padding: 24px 0 40px;
	}
	
    .preview__header {
        margin-bottom: 26px;
    }

    .preview__title {
        font-size: 2rem;
    }

    .preview-card {
        min-height: 280px;

        grid-template-columns: 46% 54%;
    }

    .preview-card__image {
        min-height: 280px;
    }

    .preview-card__content {
        padding: 24px 22px 22px;
    }

    .preview-card__name {
        font-size: 1.65rem;
    }
}

@media (max-width: 520px) {

    .preview {
        padding-top: 30px;
    }

    .preview__eyebrow {
        margin-bottom: 10px;

        font-size: var(--text-xs);
    }

    .preview__title {
        font-size: 1.8rem;
    }

    .preview__intro {
        font-size: var(--text-sm);
    }

    .preview-card {
        min-height: 0;

        grid-template-columns: 1fr;
    }

    .preview-card__image {
        min-height: 250px;

        border-right: none;
        border-bottom: 1px solid rgba(199, 163, 93, .18);
    }

    .preview-card__content {
        padding: 21px 19px 19px;
    }

    .preview-card__name {
        margin-bottom: 16px;

        font-size: 1.5rem;
    }

    .preview-card__features {
        gap: 13px;

        margin-bottom: 22px;
    }
	
	    .preview-card__features li {
        align-items: flex-start;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}