/* ============================================================
   promo.css – Promóciós kártyák (template + image)
   Elhelyezés: public_html/assets/css/promo.css
   A base.css tokenjeire épül (--gold, --orange, --fd, --fm, --r-*).
   Betöltés: a header.php-ben globálisan (hogy bármely slotos oldal kapja),
   vagy a főoldal $pageCss mellett. Lásd az integrációs jegyzetet a chatben.
   ============================================================ */

/* A .promo-grid (2 oszlop) az index.css-ben marad – a kártya kitölti a celláját. */

/* ============================================================
   TEMPLATE KÁRTYA – sötét sziget, narancs glow
============================================================ */
.promo-tpl {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 340px;
    padding: 26px 28px;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: #f3efe9;
    background:
        radial-gradient(120% 80% at 88% 8%, rgba(232,145,42,.28) 0%, rgba(232,145,42,0) 55%),
        linear-gradient(150deg, #211c15 0%, #14110c 60%, #0e0b08 100%);
    box-shadow: var(--sh-lg);
    isolation: isolate;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.promo-tpl:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg), 0 0 28px rgba(232,145,42,.22);
}
.promo-tpl:focus-visible {
    outline: 2px solid var(--gold-h);
    outline-offset: 3px;
}

/* Finom él-glow, hogy ne legyen lapos a sarok */
.promo-tpl__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 50% at 92% 0%, rgba(232,145,42,.35), transparent 70%);
    opacity: .7;
    pointer-events: none;
}

/* ── Fejléc: logó + badge ── */
.promo-tpl__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.promo-tpl__brand { display: inline-flex; align-items: center; gap: 9px; }
.promo-tpl__brand-ico {
    width: 30px; height: 30px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: var(--gold);
    color: #1a1200;
}
.promo-tpl__brand-ico svg { width: 17px; height: 17px; }
.promo-tpl__brand-txt {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
}
.promo-tpl__badge {
    flex-shrink: 0;
    max-width: 44%;
    text-align: center;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #ffd9a8;
    padding: 7px 12px;
    border: 1.5px solid rgba(232,145,42,.55);
    border-radius: 999px;
    background: rgba(232,145,42,.12);
}

/* ── Törzs: szöveg + termékkép ── */
.promo-tpl__body {
    display: flex;
    align-items: center;       /* a termékkép MINDIG a szöveg mellett, sosem alatta */
    gap: 20px;
    flex: 1;
}
.promo-tpl__content { flex: 1 1 auto; min-width: 0; }
.promo-tpl__title {
    display: block;
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(26px, 4.4vw, 40px);
    line-height: .98;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    text-wrap: balance;
}
.promo-tpl__slogan {
    display: block;
    margin-top: 10px;
    font-family: var(--fb);
    font-size: 15px;
    color: #cabfb2;
}

/* Felsorolás */
.promo-tpl__bullets {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}
.promo-tpl__bullet { display: flex; align-items: center; gap: 11px; }
.promo-tpl__bullet-ico {
    width: 30px; height: 30px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gold);
    color: #1a1200;
}
.promo-tpl__bullet-ico svg { width: 16px; height: 16px; }
.promo-tpl__bullet-txt {
    font-family: var(--fb);
    font-size: 14px;
    font-weight: 500;
    color: #e6ddd2;
}

/* Termékkép – a szöveg mellett, arányosan zsugorodik, sosem nő óriásira */
.promo-tpl__media { flex: 0 1 38%; min-width: 0; max-width: 210px; text-align: center; }
.promo-tpl__media img {
    display: block;
    width: 100%;
    max-height: 190px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
}

/* ── Ár-sáv: világos panel (a mintakép „szakadt papír" helyén) ── */
.promo-tpl__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: linear-gradient(180deg, #faf8f4, #efece5);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.promo-tpl__price-was {
    font-family: var(--fm);
    font-size: 15px;
    color: var(--text-3);
    text-decoration: line-through;
}
.promo-tpl__price-pct {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: var(--red);
    padding: 2px 8px;
    border-radius: 999px;
}
.promo-tpl__price-now {
    margin-left: auto;
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1;
    color: var(--gold);
}

/* ── Footer: CTA + bizalmi sor ── */
.promo-tpl__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.promo-tpl__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #1a1200;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--gold);
    transition: background .2s var(--ease);
}
.promo-tpl:hover .promo-tpl__cta { background: var(--gold-h); }
.promo-tpl__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-family: var(--fb);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8f857a;
}
.promo-tpl__trust span { position: relative; }
.promo-tpl__trust span + span::before {
    content: '';
    position: absolute;
    left: -9px; top: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #6a6157;
    transform: translateY(-50%);
}

/* ============================================================
   VISSZASZÁMLÁLÓ (mindkét típusban)
============================================================ */
.promo-countdown {
    display: inline-flex;
    gap: 8px;
}
.pc-block {
    min-width: 52px;
    text-align: center;
    padding: 7px 6px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}
.pc-num {
    display: block;
    font-family: var(--fm);
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    color: var(--gold-h);
}
.pc-lbl {
    display: block;
    margin-top: 3px;
    font-family: var(--fb);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9a9082;
}

/* ============================================================
   IMAGE KÁRTYA – kész, ráégetett szövegű kép
============================================================ */
.promo-img {
    position: relative;
    display: block;
    align-self: start;         /* ne nyúljon a template-kártya magasságához */
    justify-self: center;      /* rácsban vízszintesen középre */
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;       /* nem-rács kontextusban is középre */
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.promo-img:hover { transform: translateY(-3px); box-shadow: var(--sh-lg), 0 0 28px rgba(232,145,42,.22); }
.promo-img:focus-visible { outline: 2px solid var(--gold-h); outline-offset: 3px; }
/* A kreatív TELJES egészében látszik (sosem vág), méretre korlátozva.
   A max-height utólag egy számmal hangolható, ha magasabb/alacsonyabb kell. */
.promo-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: 400px; }

/* Overlay a kép fölött – countdown + gomb, olvashatósági scrimmel */
.promo-img__overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(0deg, rgba(10,8,6,.72), transparent);
}
.promo-img__cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #1a1200;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--gold);
    transition: background .2s var(--ease);
}
.promo-img:hover .promo-img__cta { background: var(--gold-h); }

/* ============================================================
   RESZPONZÍV
============================================================ */
@media (max-width: 600px) {
    .promo-tpl { padding: 22px 20px; min-height: 0; }
    .promo-tpl__media { display: none; }          /* mobilon a szöveg kap teret */
    .promo-tpl__price-now { margin-left: 0; }
    .promo-tpl__footer { justify-content: flex-start; }
    .promo-tpl__cta { width: 100%; justify-content: center; }
    .pc-block { min-width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-tpl, .promo-img, .promo-tpl__cta, .promo-img__cta { transition: none; }
    .promo-tpl:hover, .promo-img:hover { transform: none; }
}