/* 1kamas — homepage "Populaires" offer cards test (replaces the look of the 4 game cards).
   Each card is a game-launcher tile: a real picture of the game as the background (cropped from the
   site's own blog images, cards/bg-*.webp), dimmed so the game's transparent logo on top reads
   (cards/logo-*.webp, with a real drop shadow), and fading to near-black under the game name, the
   number of servers covered and the existing "Acheter des Kamas" label shown as a button
   (Eldorado-style). Only the Dofus card has a badge ("3 offres"): it also offers Comptes and
   Objets (see 1k-offers.js). Links, titles and the page's own images (kept for their alt text)
   are unchanged. The heading, badge and server line are CSS text for this test; in the real site
   code they should be real text.
   With a mouse, the text slides up and the button rises from below on hover (last section).
   Builds on 1k-cards.css (gaps). Remove the <link data-1k-offers> tag to undo. */

/* Section heading, per language */
html body .hp-aura::before {
  content: "Populaires"; position: static; display: block; inset: auto; height: auto;
  background: none; z-index: auto; pointer-events: none;
  margin: 0 0 16px; font-size: 18px; line-height: 27px; font-weight: 700; color: rgb(var(--ink));
}
html[lang="en"] body .hp-aura::before { content: "Popular"; }
html[lang="es"] body .hp-aura::before,
html[lang="pt"] body .hp-aura::before { content: "Populares"; }

/* Card: plum while its picture loads; its height is the 5:4 picture area plus the text */
html body .hp-aura .hp-lift {
  position: relative; display: flex; flex-direction: column;
  background: #1e1226; border: 0; border-radius: 8px; box-shadow: none; overflow: hidden;
}
html body .hp-aura .hp-lift:hover { border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transform: none; }
html body .hp-aura .hp-lift:focus-visible { outline: 2px solid #dcd2f6; outline-offset: 2px; }

/* Background: a real picture of each game (cards/bg-*.webp, cropped to the card's shape from the
   site's blog images: Dofus Unity tactical map, a Dofus Retro fight, the Dofus Touch new-servers
   art, the Wakfu kamas art), muted and dimmed at the top and faded to near-black under the text.
   Logos: the official transparent logos (cards/logo-*.webp), in full color in front */
html body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="/dofus-kamas/"]) {
  --k1-art: url(/cards/bg-dofus.webp); --k1-logo: url(/cards/logo-dofus.webp);
}
html body .hp-aura .hp-lift:is([href$="kamas-retro/"], [href$="dofus-retro-kamas/"], [href$="kamas-dofus-retro/"]) {
  --k1-art: url(/cards/bg-dofus-retro.webp); --k1-logo: url(/cards/logo-dofus-retro.webp);
}
html body .hp-aura .hp-lift:is([href$="kamas-touch/"], [href$="dofus-touch-kamas/"], [href$="kamas-dofus-touch/"]) {
  --k1-art: url(/cards/bg-dofus-touch.webp); --k1-logo: url(/cards/logo-dofus-touch.webp);
}
html body .hp-aura .hp-lift[href*="wakfu"] {
  --k1-art: url(/cards/bg-wakfu.webp); --k1-logo: url(/cards/logo-wakfu.webp);
}
/* The picture sits in its own layer (::after, behind the logo and the text) so it can be toned
   down on its own: colors muted to 45% and a darker veil, so the full-color logo is what the eye
   lands on. `isolation` keeps the layer inside the card */
html body .hp-aura .hp-lift { isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html body .hp-aura .hp-lift::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 12, 19, .55) 0%, rgba(14, 12, 19, .6) 50%, rgba(14, 12, 19, .95) 100%),
    var(--k1-art) center / cover no-repeat;
  filter: saturate(.45);
}

/* Badge, Dofus only: the one card with more than kamas. /produit/kamas-dofus/ in fr, es and pt,
   /en/product/dofus-kamas/ in en */
html body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"])::before {
  content: "3 offres"; position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 12px; line-height: 18px; font-weight: 700;
}
html[lang="en"] body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"])::before { content: "3 offers"; }
html[lang="es"] body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"])::before,
html[lang="pt"] body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"])::before { content: "3 ofertas"; }
/* Touch screens and phones always show the three options, and the badge would cover the logo */
@media (hover: none), (max-width: 639px) {
  html body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"])::before { display: none; }
}

/* Picture area: 5:4, the transparent logo in front: large (88% wide) with a deeper real shadow.
   The page's own <img> (logo on a plum square) stays in the page for its alt text, invisible */
html body .hp-aura .hp-lift > div:first-child {
  flex: none; aspect-ratio: 5 / 4; position: relative;
  background: var(--k1-logo) center 54% / 88% auto no-repeat;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .6));
}
html body .hp-aura .hp-lift > div:first-child img { opacity: 0; }

/* Text block: title, number of servers, then the button */
html body .hp-aura .hp-lift > div:last-child { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 4px 16px 16px; }
html body .hp-aura .hp-lift h3 { order: 1; margin: 0; color: #fff; font-size: 20px; line-height: 25px; }
html body .hp-aura .hp-lift:hover h3 { color: #fff; }

/* Servers covered (the lists on each product page): Dofus 13 (7 Unity + 6 Pionniers), Retro,
   Touch and Wakfu 3 each */
html body .hp-aura .hp-lift > div:last-child::after {
  content: "3 serveurs"; order: 2; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .78);
}
html body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"]) > div:last-child::after { content: "13 serveurs"; }
html[lang="en"] body .hp-aura .hp-lift > div:last-child::after { content: "3 servers"; }
html[lang="en"] body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"]) > div:last-child::after { content: "13 servers"; }
html:is([lang="es"], [lang="pt"]) body .hp-aura .hp-lift > div:last-child::after { content: "3 servidores"; }
html:is([lang="es"], [lang="pt"]) body .hp-aura .hp-lift:is([href$="kamas-dofus/"], [href$="dofus-kamas/"]) > div:last-child::after { content: "13 servidores"; }

/* The existing "Acheter des Kamas" label becomes the button */
html body .hp-aura .hp-lift .chip {
  order: 3; display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin-top: 8px;
  padding: 0; border: 0; border-radius: 8px; background: #b8a4ee; color: #16151c;
  font-size: 14px; font-weight: 700;
}

/* ---------- Multi-offer card (Dofus): Kamas, Comptes, Objets — options added by 1k-offers.js ---------- */

/* The single "Acheter des Kamas" button is replaced by the three options */
html body .hp-aura .hp-lift.k1-multi .chip { display: none; }

/* Three options in the button slot: Kamas (filled) goes to the kamas page; Comptes and Objets
   (outlined) show "Bientôt" until their pages exist */
.k1-opts { order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.k1-opts > span {
  display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 8px;
  font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.k1-opt-main { background: #b8a4ee; color: #16151c; }
.k1-opt-main:hover { background: #a68fe6; }
.k1-opt-soon { border: 1px solid rgba(255, 255, 255, .16); color: rgba(228, 225, 234, .86); cursor: default; }
.k1-opt-soon:hover, .k1-opt-soon.k1-show-soon { font-size: 0; }
.k1-opt-soon:hover::after, .k1-opt-soon.k1-show-soon::after {
  content: attr(data-soon); font-size: 12px; font-weight: 500; color: rgba(217, 212, 228, .8);
}

/* Mobile: 2 per row, slightly smaller text, Kamas on its own row above Comptes and Objets */
@media (max-width: 639px) {
  html body .hp-aura .hp-lift > div:last-child { padding: 2px 12px 12px; gap: 2px; }
  html body .hp-aura .hp-lift h3 { font-size: 16px; line-height: 21px; }
  html body .hp-aura .hp-lift > div:last-child::after { font-size: 13px; line-height: 18px; }
  html body .hp-aura .hp-lift .chip { height: 32px; font-size: 13px; }
  .k1-opts { grid-template-columns: 1fr 1fr; }
  .k1-opts > span { height: 32px; font-size: 12px; }
  .k1-opt-main { grid-column: 1 / -1; }
}

/* ---------- Slide-up hover (mouse, 640px and up), Eldorado-style ----------
   At rest the title and server line sit at the bottom and the button waits just below the card
   edge. On hover the text block rises 48px (8px + 36px button + 4px gap) and the button fades in
   underneath. The card reserves the full text block (117px) under the image, so the raised text
   never covers the logo. Touch screens and phones keep the always-visible button above.
   `html:root` gives these rules priority over the rules above. */
@media (hover: hover) and (min-width: 640px) {
  html:root body .hp-aura .hp-lift { display: block; padding-bottom: 117px; }
  html:root body .hp-aura .hp-lift > div:last-child {
    position: absolute; left: 0; right: 0; bottom: 0;
    transform: translateY(48px); transition: transform .25s cubic-bezier(.2, .7, .2, 1);
  }
  html:root body .hp-aura .hp-lift:hover > div:last-child,
  html:root body .hp-aura .hp-lift:focus-visible > div:last-child { transform: translateY(0); }

  /* The button fades in as it rises */
  html:root body .hp-aura .hp-lift .chip,
  html:root body .hp-aura .hp-lift .k1-opts { opacity: 0; transition: opacity .2s ease; }
  html:root body .hp-aura .hp-lift:hover .chip,
  html:root body .hp-aura .hp-lift:focus-visible .chip,
  html:root body .hp-aura .hp-lift:hover .k1-opts,
  html:root body .hp-aura .hp-lift:focus-visible .k1-opts { opacity: 1; }
}

/* Reduced motion: same states, no movement */
@media (prefers-reduced-motion: reduce) {
  html:root body .hp-aura .hp-lift > div:last-child,
  html:root body .hp-aura .hp-lift .chip,
  html:root body .hp-aura .hp-lift .k1-opts { transition: none; }
}