/*
 * Toxic Partner Card — frontend CSS
 *
 * Drei Card-Typen mit unterschiedlicher Geometrie aber gleicher Bauweise:
 *   .tx-pc-card--hero   : Hero-Karte (min-height 440px, frei in Aspect-Ratio)
 *   .tx-pc-card--strip  : Banner-Strip (aspect-ratio 16:6)
 *   .tx-pc-card--tile   : Sortiment-Tile (aspect-ratio 1:1)
 *
 * Layout-Stack:
 *   - Bild als absoluter Backdrop (object-fit:cover)
 *   - Dunkler Overlay-Verlauf für Text-Lesbarkeit
 *   - Content-Block bottom-left (Kicker → Headline → Subline → CTA)
 *   - Optional Brand-Badge in Ecke
 */

.tx-pc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: #0B0C0D;
    border: 1px solid var(--tx-line, #1A1D1F);
    transition: border-color .2s, transform .2s;
    text-decoration: none;
    color: inherit;
}
.tx-pc-card:hover {
    border-color: var(--tx-mint, #01DEC2);
    transform: translateY(-3px);
}

/* ─── Card-Typ-Geometrien ───────────────────────────────────────── */
.tx-pc-card--hero  { aspect-ratio: 3 / 2; min-height: 320px; }      /* Default 3:2 = voluminös */
.tx-pc-card--hero[data-hero-aspect="16-9"]  { aspect-ratio: 16 / 9; }   /* kompakter Banner-Style */
.tx-pc-card--hero[data-hero-aspect="16-10"] { aspect-ratio: 16 / 10; }  /* Mittelweg */
.tx-pc-card--strip { aspect-ratio: 16 / 6; min-height: 0; }
.tx-pc-card--tile  { aspect-ratio: 1 / 1;  min-height: 0; }


/* ─── Backdrop-Bild ─────────────────────────────────────────────── */
.tx-pc-card > .tx-pc-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
    transition: transform .5s ease, opacity .3s ease;
    opacity: 0.92;
}
.tx-pc-card:hover > .tx-pc-card__bg {
    transform: scale(1.04);
    opacity: 1;
}
.tx-pc-card[data-img-focus="left"]         > .tx-pc-card__bg { object-position: left center;  }
.tx-pc-card[data-img-focus="right"]        > .tx-pc-card__bg { object-position: right center; }
.tx-pc-card[data-img-focus="top"]          > .tx-pc-card__bg { object-position: center top;   }
.tx-pc-card[data-img-focus="left-bottom"]  > .tx-pc-card__bg { object-position: left bottom;  }
.tx-pc-card[data-img-focus="right-bottom"] > .tx-pc-card__bg { object-position: right bottom; }

/* ─── Overlay-Verläufe für Text-Lesbarkeit ──────────────────────── */
.tx-pc-card > .tx-pc-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.tx-pc-card[data-overlay="bottom"] > .tx-pc-card__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.82) 100%);
}
.tx-pc-card[data-overlay="bottom-right"] > .tx-pc-card__overlay {
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.7)  100%),
        linear-gradient(270deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,0) 60%);
}
.tx-pc-card[data-overlay="bottom-left"] > .tx-pc-card__overlay {
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.7)  100%),
        linear-gradient(90deg,  rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,0) 60%);
}
.tx-pc-card[data-overlay="left"] > .tx-pc-card__overlay {
    background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,0) 65%);
}
.tx-pc-card[data-overlay="right"] > .tx-pc-card__overlay {
    background: linear-gradient(270deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,0) 65%);
}
.tx-pc-card[data-overlay="left-bottom"] > .tx-pc-card__overlay {
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.7)  100%),
        linear-gradient(90deg,  rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,0) 60%);
}
.tx-pc-card[data-overlay="full"] > .tx-pc-card__overlay {
    background: rgba(0,0,0,.4);
}

/* ─── Brand-Badge ──────────────────────────────────────────────── */
.tx-pc-card__badge {
    position: absolute;
    z-index: 4;
    max-width: 120px;
    height: auto;
    opacity: .95;
}
.tx-pc-card__badge--top-right { top: 22px; right: 24px; }
.tx-pc-card__badge--top-left  { top: 22px; left: 24px;  }

/* ─── Content-Block ─────────────────────────────────────────────── */
.tx-pc-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 36px 32px;
    max-width: 100%;
}
.tx-pc-card--strip .tx-pc-card__content { padding: 22px 28px; }
.tx-pc-card--tile  .tx-pc-card__content { padding: 28px 24px; }

/* ─── Content-Position-Varianten ────────────────────────────────
   Default = bottom-left (= flex-end + flex-start). Andere Positionen
   überschreiben justify/align und ggf. text-align/align-items für
   den ganzen Stack. So kann der Editor den Content um das Bildmotiv
   herum platzieren statt es zu überdecken. */
.tx-pc-card[data-content-pos="bottom-right"] .tx-pc-card__content {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}
.tx-pc-card[data-content-pos="top-left"] .tx-pc-card__content {
    justify-content: flex-start;
    align-items: flex-start;
}
.tx-pc-card[data-content-pos="top-right"] .tx-pc-card__content {
    justify-content: flex-start;
    align-items: flex-end;
    text-align: right;
}
/* Subline max-width bei rechtsbündiger Ausrichtung an die rechte
   Seite ziehen, sonst float sie links und sieht falsch aus. */
.tx-pc-card[data-content-pos$="-right"] .tx-pc-card__sub {
    margin-left: auto;
}

/* ─── Kicker ────────────────────────────────────────────────────── */
.tx-pc-card__kicker {
    display: inline-block;
    font: 700 0.72rem/1 'Oxanium', sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 12px 0;
}
.tx-pc-card__kicker--mint  { color: var(--tx-mint, #01DEC2); }
.tx-pc-card__kicker--white { color: #fff; }
.tx-pc-card__kicker--red   { color: #ED1C24; }
.tx-pc-card__kicker--green { color: #76B900; }
.tx-pc-card__kicker--blue  { color: #0071C5; }
.tx-pc-card__kicker--amber { color: #FFC857; }

/* ─── Eyebrow-Position „unten" ───────────────────────────────────
   order:1 schiebt den Kicker hinter alle Standard-Elemente (order:0)
   → unter Headline/Subline/Button. Oben = Default (DOM-Reihenfolge). */
.tx-pc-card[data-kicker-pos="bottom"] .tx-pc-card__kicker {
    order: 1;
    margin: 16px 0 0 0;
}

/* ─── Headline-Akzent (*Wort* → farbig) ──────────────────────────
   Farbe kommt als CSS-Variable --tx-hl-accent von der Karte (im Template
   aufgeloest: Preset ODER validierte freie Farbe). Fallback = Mint. */
.tx-pc-card__hl-accent { color: var(--tx-hl-accent, var(--tx-mint, #01DEC2)); }

/* Jede Headline-Zeile als eigener Block (Zweiton-Look, eigene Grundfarbe). */
.tx-pc-card__hl-line { display: block; }

/* ─── Headline ──────────────────────────────────────────────────── */
.tx-pc-card__headline {
    font: 700 30px/1.05 'Raleway', 'Open Sans', sans-serif;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.tx-pc-card--strip .tx-pc-card__headline { font-size: 22px; margin-bottom: 6px; }
.tx-pc-card--tile  .tx-pc-card__headline { font-size: 26px; }

/* ─── Headline-Font-Varianten ───────────────────────────────────── */
.tx-pc-card[data-headline-font="bebas"]    .tx-pc-card__headline { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; }
.tx-pc-card[data-headline-font="rajdhani"] .tx-pc-card__headline { font-family: 'Rajdhani', sans-serif; letter-spacing: .03em; }
.tx-pc-card[data-headline-font="oxanium"]  .tx-pc-card__headline { font-family: 'Oxanium', sans-serif; letter-spacing: .04em; }

/* ─── Subline ───────────────────────────────────────────────────── */
.tx-pc-card__sub {
    font: 400 14px/1.5 'Inter', sans-serif;
    color: rgba(236, 239, 238, .82);
    margin: 0 0 18px 0;
    max-width: 480px;
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.tx-pc-card--strip .tx-pc-card__sub { font-size: 13px; margin-bottom: 10px; }
.tx-pc-card--tile  .tx-pc-card__sub { font-size: 13px; margin-bottom: 14px; }

/* ─── CTA-Button ────────────────────────────────────────────────── */
.tx-pc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font: 700 13px/1 'Oxanium', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    transition: filter .15s, transform .15s;
}
.tx-pc-card__cta .tx-arr { font-size: 14px; line-height: 1; }
.tx-pc-card:hover .tx-pc-card__cta { filter: brightness(1.08); transform: translateY(-1px); }

/* Primary = mint Cut-Corner (Toxic-Default) */
.tx-pc-card__cta.tx-btn--primary {
    background: var(--tx-mint, #01DEC2);
    color: #062019;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* Ghost / Outline */
.tx-pc-card__cta.tx-btn--ghost {
    background: rgba(11, 12, 13, .55);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    backdrop-filter: blur(4px);
}
.tx-pc-card__cta.tx-btn--ghost:hover { border-color: var(--tx-mint, #01DEC2); }

/* Branded CTAs — mit Cut-Corner */
.tx-pc-card__cta.tx-btn--pc-red    { background: #ED1C24; color: #fff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.tx-pc-card__cta.tx-btn--pc-green  { background: #76B900; color: #fff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.tx-pc-card__cta.tx-btn--pc-blue   { background: #0071C5; color: #fff; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.tx-pc-card__cta.tx-btn--pc-white  { background: #fff;    color: #0B0C0D; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }

/* Strip-Variante: kompakter CTA */
.tx-pc-card--strip .tx-pc-card__cta {
    padding: 10px 18px;
    font-size: 12px;
}

/* ─── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .tx-pc-card__content { padding: 28px 24px; }
    .tx-pc-card__headline { font-size: 24px; }
    .tx-pc-card--strip .tx-pc-card__headline { font-size: 20px; }
}

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .tx-pc-card--hero  { min-height: 360px; }
    /* Strip + Tile: Aspect-Ratio bleibt, sieht auf 1-col gut aus */
    .tx-pc-card__content { padding: 22px 20px; }
    .tx-pc-card__headline { font-size: 22px; }
    .tx-pc-card--strip .tx-pc-card__headline { font-size: 18px; }
    .tx-pc-card__sub { font-size: 13px; margin-bottom: 14px; }
    .tx-pc-card__badge { max-width: 80px; top: 14px; right: 14px; }
    .tx-pc-card__badge--top-left { left: 14px; right: auto; }
}