/* ============================================================================
   mk-cafehero.css - v1 (2026-08-03)

   Brings the /cafe HERO onto the homepage #cafe section: the crest + staggered
   "Herman & / Le Cafe" lockup + tagline + Ivorian flag bar, and the
   tab-filtered auto-rotating signature carousel.

   CLONED, NOT REDESIGNED. Every value here is lifted verbatim from cafe.html so
   the two surfaces cannot drift. The lockup in particular is BRAND, not page
   styling - the .hl2 translateX(1.715em) that drops the "L" under the "M" is
   the identity and must never be re-drawn by eye.

   Scoped under .cafeT throughout: the homepage runs a completely different
   palette (--ink/--orange), so the cafe tokens are redeclared locally rather
   than globally, and none of these class names can leak into the rest of the page.
   ========================================================================= */
.cafeT{
  --cafeEsp2:#241409;--cafeCream:#F3EAD6;--cafeGold:#E3A938;--cafeGoldB:#F6CD63;
  --cafeTl:#F6F0E4;--cafeTm:rgba(246,240,228,.62);
  --cafeCard:rgba(246,240,228,.045);--cafeCardB:rgba(246,240,228,.10);
  --cafeEase:cubic-bezier(.22,.61,.36,1)}

/* The section already carried a decorative .seal crest at the top. The intro
   block now brings its own, so without this the crest renders twice. */
/* !important because mk-mobile.css loads AFTER this file and restyles .seal;
   without it the crest renders twice. */
.cafeT .seal{display:none!important}

/* ---- hero intro: crest, lockup, tagline, flag ---------------------------- */
.cafeT .chintro{display:flex;flex-direction:column;align-items:center;text-align:center}
.cafeT .chintro .crest{
  width:clamp(88px,24vw,120px);margin-bottom:16px;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(227,169,56,.32));
  animation:cafeCrest 5s ease-in-out infinite}
@keyframes cafeCrest{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cafeT .chintro h3.clock{
  font-family:'Playfair Display',serif;font-size:clamp(36px,11vw,58px);font-weight:700;
  color:var(--cafeCream);line-height:1.02;letter-spacing:0;margin:0}
.cafeT .chintro h3.clock .hl1,
.cafeT .chintro h3.clock .hl2{display:block}
/* the lockup: "Le" sits under the "M" of Herman. Do not eyeball these. */
.cafeT .chintro h3.clock .hl1{transform:translateX(-0.136em)}
.cafeT .chintro h3.clock .hl2{transform:translateX(0.858em)}
.cafeT .chintro h3.clock .amp{color:var(--cafeGold);font-style:italic}
.cafeT .chintro .csub{
  margin-top:10px;font-size:14px;color:var(--cafeTm);font-style:italic;
  font-family:'Playfair Display',serif}
.cafeT .chintro .flagci{
  display:flex;width:58px;height:3px;border-radius:3px;overflow:hidden;margin:14px auto 0}
.cafeT .chintro .flagci i{flex:1}
.cafeT .chintro .flagci i:nth-child(1){background:#F77F00}
.cafeT .chintro .flagci i:nth-child(2){background:#fff}
.cafeT .chintro .flagci i:nth-child(3){background:#009E60}

/* ---- the three icon tabs ------------------------------------------------- */
.cafeT .ctabs{display:flex;gap:8px;margin-top:20px;width:100%}
.cafeT .ctab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px;border-radius:16px;background:var(--cafeCard);
  border:1px solid var(--cafeCardB);color:var(--cafeTm);font-family:inherit;
  font-size:11.5px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;
  transition:all .3s var(--cafeEase)}
.cafeT .ctab svg{width:22px;height:22px;stroke:currentColor}
.cafeT .ctab.on{
  background:linear-gradient(180deg,var(--cafeGoldB),var(--cafeGold));
  border-color:transparent;color:#241409;
  box-shadow:0 12px 26px -12px rgba(227,169,56,.6)}
.cafeT .ctab:hover:not(.on){border-color:rgba(227,169,56,.4);color:var(--cafeTl)}

/* ---- the signature carousel --------------------------------------------- */
.cafeT .csig{
  margin-top:16px;position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--cafeCardB);background:#1c1109;
  min-height:clamp(340px,92vw,440px);display:flex;align-items:flex-end}
.cafeT .csig .simg{position:absolute;inset:0}
.cafeT .csig .simg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--cafeEase)}
.cafeT .csig .simg img.on{opacity:1}
.cafeT .csig::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(125% 82% at 50% 36%,transparent 0%,rgba(9,5,2,.14) 40%,rgba(9,5,2,.9) 85%),
             linear-gradient(0deg,rgba(9,5,2,.95) 9%,rgba(9,5,2,.15) 46%,transparent 62%)}
.cafeT .csig .sdots{
  position:absolute;top:13px;left:0;right:0;z-index:3;display:flex;gap:6px;
  justify-content:center;flex-wrap:wrap;padding:0 16px}
.cafeT .csig .sdots i{
  width:6px;height:6px;border-radius:50%;background:rgba(246,240,228,.32);
  cursor:pointer;transition:all .3s var(--cafeEase)}
.cafeT .csig .sdots i.on{width:20px;border-radius:100px;background:var(--cafeGoldB)}
.cafeT .csig .sbody{
  position:relative;z-index:3;padding:18px 20px 16px;width:100%;text-align:left;
  display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"tag tag" "name name" "price btn";column-gap:14px;align-items:end}
.cafeT .csig .stag{
  grid-area:tag;font-size:10px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--cafeGoldB)}
.cafeT .csig .sname{
  grid-area:name;font-family:'Playfair Display',serif;font-size:25px;font-weight:700;
  color:#fff;margin:4px 0 7px;line-height:1.05;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.cafeT .csig .sprice{
  grid-area:price;align-self:end;font-weight:700;color:var(--cafeGoldB);font-size:16px;margin:0}
.cafeT .csig .sorder{
  grid-area:btn;justify-self:end;align-self:end;
  font-family:inherit;font-weight:600;font-size:11.5px;padding:8px 14px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,var(--cafeGoldB),var(--cafeGold));color:#241409;
  box-shadow:0 12px 28px -10px rgba(227,169,56,.55);
  transition:all .3s var(--cafeEase)}
.cafeT .csig .sorder:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(227,169,56,.6)}
.cafeT .csig .sorder:active{transform:translateY(1px)}

/* desktop: the carousel sits in the right column, so it can breathe */
@media(min-width:760px){
  .cafeT .csig{min-height:440px}
  .cafeT .csig .sbody{max-width:60%}
  .cafeT .chintro{align-items:flex-start;text-align:left}
  /* CREST CENTRED OVER THE "m" OF HERMAN - the same lockup logic that already
     puts "Le" under it via .hl2. MEASURED at 880: the m's centre sits 2.0622em
     from .chintro's left edge (= 2.1982em minus .hl1's -0.136em) and the crest
     is 120px wide here, so 2.0622 x 58px - 60px = 59.6px.
     px, not em: margin-left would resolve em against the IMG's inherited 16px,
     not the h3's - and h3.clock is clamp(36px,11vw,58px), i.e. pinned at 58px
     for every viewport at or above 528px, so a px value is exact at all widths
     this block covers. Do not eyeball these. */
  .cafeT .chintro .crest{margin-left:59.6px}
  /* FLAG CENTRED UNDER THE .csub LINE, not under the column. .chintro is a
     column flex with align-items:flex-start, so .csub is shrink-to-fit and its
     box width IS its text width - the offset is simply (csub - flag)/2.
     MEASURED at 880: csub 234.8px at font-size 14px, flag 58px -> 88.4px. */
  .cafeT .chintro .flagci{margin:18px 0 0 88.4px}
}
/* >=1000px: /cafe switches the lockup offsets (the "L" lands under the "M" at a
   different ratio once the type scales up) and enlarges the carousel. Cloned
   from cafe.html's own (min-width:1000px) block so the two never diverge. */
@media(min-width:1000px){
  /* crest 104px now, so its centre travels 2.1982em x 58px - 52px = 75.5px
     (.hl1's transform is none in this block, hence 2.1982 and not 2.0622) */
  .cafeT .chintro .crest{width:104px;margin-bottom:20px;margin-left:75.5px}
  .cafeT .chintro h3.clock .hl1{transform:none}
  .cafeT .chintro h3.clock .hl2{transform:translateX(1.715em)}
  .cafeT .chintro .csub{font-size:16px;margin-top:12px}
  /* the subtitle grows to 16px in this block, so the centring offset has to be
     restated: csub 268.4px, flag 58px -> (268.4-58)/2 = 105.2px */
  .cafeT .chintro .flagci{margin:18px 0 0 105.2px}
  .cafeT .ctabs{margin-top:24px;gap:10px}
  .cafeT .ctab{padding:15px 8px;font-size:12.5px;border-radius:18px}
  .cafeT .ctab svg{width:24px;height:24px}
  .cafeT .csig{min-height:clamp(468px,40vw,560px)}
  .cafeT .csig .sname{font-size:30px}
  .cafeT .csig .sbody{padding:24px 26px 22px;max-width:none}
  .cafeT .csig .stag{font-size:11px}
  .cafeT .csig .sprice{font-size:18px}
  .cafeT .csig .sorder{padding:11px 18px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.cafeT .chintro .crest{animation:none}}