/* ==========================================================================
   Promotions — index (template-promotions.php) + detail (template-promotion.php)
   Loaded only on those two templates. Colours from main.css tokens.
   ========================================================================== */

/* ---------- Detail page ---------- */
.kgp { background: var(--background); }
.kgp-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
  background: linear-gradient(105deg, oklch(0.985 0.012 60), oklch(0.955 0.04 45) 60%, oklch(0.94 0.05 35)); }
.kgp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, oklch(1 0 0 / .45) 50%, transparent 60%);
  background-size: 250% 100%; animation: kgp-sheen 9s linear infinite; }
@keyframes kgp-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.kgp-hero__inner { position: relative; z-index: 1; padding-block: 2.25rem 2.5rem; }
.kgp-crumbs { margin-bottom: .9rem; }
.kgp-title { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink-foreground); text-wrap: balance; max-width: 52rem; }

.kgp-body { padding-block: 2.75rem 3.5rem; }
.kgp-grid { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: 2.75rem; align-items: start; }
.kgp-grid--no-media { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.kgp-side { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.admin-bar .kgp-side { top: 8.25rem; }
.kgp-poster { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #fff;
  box-shadow: 0 22px 44px -26px color-mix(in oklab, var(--brand) 55%, transparent); }
.kgp-poster img { display: block; width: 100%; height: auto; }
.kgp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.kgp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; text-align: center; background: var(--brand); color: #fff; border-radius: 10px; padding: .85rem 1rem; font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .15s, transform .15s; }
.kgp-btn:hover { background: color-mix(in oklab, var(--brand) 85%, black); color: #fff; transform: translateY(-1px); }
.kgp-btn--alt { background: var(--background); color: var(--brand); border: 1.5px solid var(--brand); }
.kgp-btn--alt:hover { background: var(--brand); color: #fff; }

.kgp-main { display: grid; gap: 1.75rem; min-width: 0; }
.kgp-red { color: var(--brand); }
.kgp-main strong { color: var(--ink-foreground); }
.kgp-main strong .kgp-red, .kgp-red strong { color: var(--brand); }
.kgp-announce { margin: 0; font-size: 1.15rem; line-height: 1.65; font-weight: 400; color: #000; }
.kgp-offer { position: relative; overflow: hidden; border-radius: 14px; padding: 1.35rem 1.5rem 1.35rem 1.85rem;
  background: linear-gradient(110deg, var(--brand-tint), oklch(0.95 0.045 45)); border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--border)); }
.kgp-offer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand); }
.kgp-offer p + p { margin-top: .55rem; }
.kgp-offer p { margin: 0; font-size: 1.3rem; line-height: 1.45; color: var(--ink-foreground); }

.kgp-block { display: grid; gap: .85rem; }
.kgp-h { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-foreground); letter-spacing: -.01em; }
.kgp-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
.kgp-benefits li { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--background); font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--ink-foreground); }
.kgp-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); position: relative; margin-top: .05rem; }
.kgp-tick::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kgp-terms ul { list-style: none; margin: 0; padding: .4rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--neutral-soft); }
.kgp-terms li { position: relative; padding: .8rem 0 .8rem 1.4rem; font-size: .98rem; line-height: 1.55; color: color-mix(in oklab, var(--ink-foreground) 85%, transparent); }
.kgp-terms li + li { border-top: 1px solid var(--border); }
.kgp-terms li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.kgp-contact { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 1rem 1.2rem; border-radius: 12px; border: 1px dashed color-mix(in oklab, var(--brand) 30%, var(--border)); font-size: 1rem; color: color-mix(in oklab, var(--ink-foreground) 85%, transparent); }
.kgp-contact > svg { flex: none; width: 22px; height: 22px; color: var(--brand); }
.kgp-contact a { color: var(--brand); font-weight: 700; text-decoration: none; }
.kgp-contact a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .kgp-grid { grid-template-columns: 1fr; gap: 2rem; }
  .kgp-side { position: static; max-width: 28rem; }
}
@media (max-width: 480px) { .kgp-actions { grid-template-columns: 1fr; } .kgp-offer p { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .kgp-hero::after { animation: none; } }

/* ---------- Index page ---------- */
.kgpi-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.25rem; }
.kgpi-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--background); text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.kgpi-card:hover { border-color: color-mix(in oklab, var(--brand) 30%, var(--border)); box-shadow: 0 18px 36px -22px color-mix(in oklab, var(--brand) 50%, transparent); transform: translateY(-3px); }
.kgpi-card__media { aspect-ratio: 1 / 1; background: var(--neutral-soft); overflow: hidden; }
.kgpi-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kgpi-card:hover .kgpi-card__media img { transform: scale(1.03); }
.kgpi-card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.15rem 1.15rem; flex: 1; }
.kgpi-card__title { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 700; color: var(--ink-foreground); }
.kgpi-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 700; color: var(--brand); }
.kgpi-card__cta span { transition: transform .2s; }
.kgpi-card:hover .kgpi-card__cta span { transform: translateX(4px); }
.kgpi-tile.is-filtered-out { display: none; }
@media (prefers-reduced-motion: reduce) { .kgpi-card, .kgpi-card__media img, .kgpi-card__cta span { transition: none; } }

/* ---------- Index hero: text left, KEYS video in a framed card right ---------- */
.kgpi-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border);
  background: linear-gradient(105deg, oklch(0.99 0.008 60), oklch(0.965 0.03 45) 55%, oklch(0.945 0.045 35)); }
.kgpi-hero::before { content: ""; position: absolute; inset: -25%; pointer-events: none;
  background:
    radial-gradient(38% 55% at 78% 40%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(30% 45% at 20% 100%, color-mix(in oklab, var(--brand) 7%, transparent), transparent 70%);
  animation: kgpi-drift 26s ease-in-out infinite alternate; }
.kgpi-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, oklch(1 0 0 / .4) 50%, transparent 60%);
  background-size: 250% 100%; animation: kgp-sheen 11s linear infinite; }
@keyframes kgpi-drift { to { transform: translate3d(-5%, 4%, 0) scale(1.06); } }
.kgpi-hero__inner { position: relative; z-index: 1; padding-block: 3rem 3.25rem; min-height: 19rem;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2.5rem; }
.kgpi-hero--video .kgpi-hero__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.kgpi-hero__text { display: flex; flex-direction: column; }
.kgpi-hero .breadcrumb { margin-bottom: 1rem; }
.kgpi-hero__eyebrow { display: inline-block; margin-bottom: .6rem; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.kgpi-hero__title { margin: 0; font-size: clamp(2.4rem, 5.5vw, 3.75rem); line-height: 1.02; letter-spacing: -.03em; color: var(--ink-foreground); }
.kgpi-hero__sub { margin: .7rem 0 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; color: var(--brand); letter-spacing: -.01em; }
.kgpi-hero__count { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; padding: .5rem .95rem; border-radius: 999px; background: var(--background); border: 1px solid color-mix(in oklab, var(--brand) 25%, var(--border)); font-size: .86rem; font-weight: 700; color: var(--ink-foreground); text-decoration: none; box-shadow: 0 6px 18px -12px color-mix(in oklab, var(--brand) 60%, transparent); }
.kgpi-hero__count:hover { border-color: var(--brand); color: var(--brand); }
.kgpi-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.kgpi-hero__media { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--border));
  box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--brand) 60%, transparent), 0 0 0 6px oklch(1 0 0 / .6); }
.kgpi-hero__video { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .kgpi-hero--video .kgpi-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .kgpi-hero__inner { min-height: 0; padding-block: 2.25rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .kgpi-hero::before, .kgpi-hero::after { animation: none; } }

/* ---------- Tag bar (Oct 2026): sticks under the site header ---------- */
.kgpt-bar { position: sticky; top: var(--kgpt-top, 0px); z-index: 20; background: color-mix(in oklab, var(--background) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.kgpt-bar__pills { display: flex; gap: .5rem; padding-block: .85rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kgpt-bar__pills::-webkit-scrollbar { display: none; }
.kgpt-pill { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.05rem; border-radius: 999px; border: 1px solid var(--border); background: var(--background); color: var(--ink-foreground); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.kgpt-pill:hover:not(:disabled) { border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); color: var(--brand); }
.kgpt-pill.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.kgpt-pill:disabled { opacity: .45; cursor: default; }
.kgpt-pill__n { min-width: 1.5rem; height: 1.5rem; padding-inline: .4rem; border-radius: 999px; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--neutral-soft); color: var(--muted-foreground); }
.kgpt-pill.is-active .kgpt-pill__n { background: color-mix(in oklab, white 22%, transparent); color: #fff; }
@media (min-width: 1024px) { .kgpt-bar__pills { flex-wrap: wrap; justify-content: center; overflow: visible; } }
#current-promotions { scroll-margin-top: calc(var(--kgpt-top, 0px) + 4.5rem); }
.kgpt-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.kgpt-chip { padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--brand); background: var(--brand-tint); border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--border)); }
.kgpt-empty { margin: 1.5rem 0 0; text-align: center; color: var(--muted-foreground); }
.kgpt-empty__all { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; text-decoration: underline; }
.kgpt-pill.is-active, .kgpt-pill.is-active:hover { color: #fff; }
.kgpt-bar + #current-promotions > .section { padding-top: 2.5rem; }
.kgp-announce strong, .kgp-announce b, .kgp-announce span, .kgp-announce p { font-weight: 400; color: #000; }