/* ══════════════════════════════════════════════════════════════════
   Venn Canteen · the gift card on the "dinner at venn" photo (home, EN and PT)
   2 Oct 2026. Replaces the white box (.hl-giftcard). Its old rules are still in the
   page's inline CSS but no longer match anything.

   A small pile of four EAT.BITZ ingredient cards stands on the photo, the chanterelle
   in front with the gift card page's own headline on it. The sentence and the button
   sit in a box of the cards' black with a copper edge.
   Phones (767 and below): the box is a full-width band right under the photo; the cards
     stand on the photo with their foot on the band's top edge; the dinner text follows.
   768 to 1023: the same band, under the photo (the dinner text runs long on the photo at
     these widths, in PT especially, and a box on the photo would cover its last lines).
   1024 and up: on the photo, bottom right, the box to the left of the cards.
   Cards: images/gift-card/cards/, cut from the EAT.BITZ press original
   OracleCard-Grid1-EN.jpg. The line on the front card is type, so EN and PT each say
   their own. The cards behind are dealt out once as the pile comes into view
   (js/home-gift-cards.js); their resting place is the dealt one.
   Built from the prototype in _giftcard-prototypes/home-gift-2026-10-02/ (round 5).
   v2 (2 Oct, later): smaller cards on phones, the line on the front card set a little larger
   to stay readable; the cards behind are now -2.webp, their black stock matched to the
   chanterelle's (the first ones had a lighter, teal-grey stock that read as a glow).
   New file name on purpose: css/home-gift-cards.css is cached at the edge for 4 hours.
   ══════════════════════════════════════════════════════════════════ */
.hg{--hg-copper:#E08A4E;--hg-cw:min(25vw,102px);position:relative;z-index:4}

/* ── the box ── */
.hg__box{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0;padding:30px 20px 26px;background:linear-gradient(180deg,#191b17 0%,#121411 100%);border-top:1px solid rgba(224,138,78,.6)}
.hg__p{margin:0;font-family:'Inter',sans-serif;font-weight:300;font-size:.9rem;line-height:1.55;color:#EEE8DC;text-wrap:pretty}
.hg__btn{display:flex;align-items:center;justify-content:space-between;gap:18px;align-self:stretch;min-height:50px;padding:0 18px 0 20px;background:#D98B52;color:#151714;font-family:'Inter',sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.14em;line-height:1;white-space:nowrap;text-decoration:none;transition:background .2s}
.hg__btn::after{content:"→";content:"→"/"";font-size:.9rem;letter-spacing:0;transition:transform .3s}
/* the whole box takes the tap, not only the button */
.hg__btn::before{content:"";position:absolute;inset:0}
.hg:hover .hg__btn,.hg__btn:focus-visible{background:#E9A16C}
.hg:hover .hg__btn::after,.hg__btn:focus-visible::after{transform:translateX(4px)}
.hg__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── the cards: every move is a share of one card ── */
.hg__stack{position:absolute;right:26px;bottom:calc(100% - 18px);z-index:2;display:block;width:var(--hg-cw);aspect-ratio:.72;container-type:inline-size;-webkit-tap-highlight-color:transparent}
.hg__card{position:absolute;inset:0;display:block;transform:translate(var(--tx,0%),var(--ty,0%)) rotate(var(--r,0deg));transition:transform .75s cubic-bezier(.2,.75,.15,1);filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.38))}
.hg__card img{display:block;width:100%;height:100%}
.hg__card.b1{transition-delay:.06s}
.hg__card.b2{transition-delay:.12s}
.hg__card.b3{transition-delay:.18s}
.hg__card.front::after{content:"";position:absolute;inset:1.2%;border-radius:4%;pointer-events:none;background:linear-gradient(125deg,rgba(255,220,160,.13),rgba(255,220,160,0) 45%)}
/* the line, set where the card's own word was */
.hg__word{position:absolute;left:0;right:0;bottom:11.2%;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:10.6cqi;line-height:1;letter-spacing:.01em;color:var(--hg-copper);text-shadow:0 0 .6cqi rgba(224,138,78,.35);white-space:nowrap}
:lang(pt) .hg__word{font-size:9.6cqi}
/* the pile on phones: the cards behind rise a little, so the diners stay in view */
.hg .b1{--tx:-14%;--ty:-10%;--r:-8deg}
.hg .b2{--tx:12%;--ty:-13%;--r:7deg}
.hg .b3{--tx:-1%;--ty:-19%;--r:-1.5deg}
.hg .front{--r:-2deg}
/* dealt once: js/home-gift-cards.js adds .is-pre only while the pile is off screen */
.hg.is-pre .hg__card:not(.front){--tx:0%;--ty:0%;--r:-2deg;transition:none}

/* phones: photo, then the box, then the dinner text */
@media (max-width:767px){
  .venn-hp .venn-split .venn-split__img{grid-row:1;grid-column:1}
  .venn-split .hg{grid-row:2;grid-column:1}
  body .venn-hp .venn-split .venn-split__text{grid-row:3;padding-top:38px !important}
  .hg__stack{right:24px}
  .hg__word{font-size:11.6cqi}
  :lang(pt) .hg__word{font-size:10.6cqi}
}

/* 768 to 1023: the band under the photo, the cards standing on the photo's lower right */
@media (min-width:768px) and (max-width:1023px){
  .hg{--hg-cw:128px}
  .hg__box{padding:30px 54px 32px;gap:18px}
  .hg__p{max-width:44ch}
  .hg__btn{align-self:flex-start;min-height:46px}
  .hg__stack{right:44px;bottom:calc(100% - 18px)}
}

/* 1024 and up: on the photo, bottom right */
@media (min-width:1024px){
  .hg{--hg-cw:146px;position:absolute;right:52px;bottom:44px;display:flex;align-items:flex-end;gap:68px}
  .hg__box{width:min(360px,46vw);gap:16px;padding:20px 22px 22px;background:#121411;border:1px solid rgba(224,138,78,.42);box-shadow:0 10px 30px rgba(0,0,0,.28)}
  .hg__p{font-size:.86rem;color:#EAE3D6}
  .hg__btn{align-self:flex-start;min-height:46px}
  .hg__stack{position:relative;right:auto;bottom:auto;flex:none}
  .hg__word{font-size:9.4cqi;bottom:11.6%}
  :lang(pt) .hg__word{font-size:8.6cqi}
  .hg .b1{--tx:-15%;--ty:-17%;--r:-9deg}
  .hg .b2{--tx:14%;--ty:-21%;--r:8deg}
  .hg .b3{--tx:-1%;--ty:-30%;--r:-1.5deg}
  /* the pile opens a little under the pointer */
  .hg:hover .b1,.hg:focus-within .b1{--tx:-19%;--ty:-20%;--r:-12deg}
  .hg:hover .b2,.hg:focus-within .b2{--tx:18%;--ty:-25%;--r:11deg}
  .hg:hover .b3,.hg:focus-within .b3{--tx:-1%;--ty:-36%;--r:-2deg}
  .hg:hover .front,.hg:focus-within .front{--ty:-2%;--r:-1deg}
}
@media (min-width:1180px){
  .hg{--hg-cw:184px;right:66px;bottom:54px}
  .hg__box{width:372px}
}

@media (prefers-reduced-motion:reduce){
  .hg__card,.hg__btn::after{transition:none}
}