/* =========================================================
   WELLY BREWING — SLIDER BIÈRES
   Styles isolés avec le préfixe wb-
========================================================= */

.wb-hero{
  --beer-accent:#e2bd38;
  --beer-glow:rgba(226,189,56,.24);
  min-height:1000px;
  padding:165px 0 85px;
  overflow:hidden;
  position:relative;
  color:#fff;
  background:
    radial-gradient(circle at 50% 43%,var(--beer-glow),transparent 29%),
    linear-gradient(160deg,#0b2d25 0%,#123a2f 58%,#0c2a23 100%);
  transition:background .45s ease;
}

.wb-hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -190px;
  height:360px;
  border-radius:50% 50% 0 0;
  background:var(--cream);
  pointer-events:none;
}

.wb-hero-top{
  text-align:center;
  position:relative;
  z-index:2;
}

.wb-hero-top .eyebrow{
  color:#e1b77f;
  margin-bottom:12px;
}

.wb-hero-top h1{
  font-family:'DM Serif Display',serif;
  font-size:clamp(4.2rem,8vw,8.4rem);
  line-height:.78;
  letter-spacing:-.045em;
  margin:0;
}

.wb-hero-top>p{
  max-width:620px;
  margin:28px auto 0;
  color:rgba(255,255,255,.76);
  line-height:1.65;
}

.wb-swipe-hint{
  color:#e1b77f;
  margin:22px 0 0;
  transform:rotate(-2deg);
}

.wb-slider{
  position:relative;
  z-index:2;
  max-width:1120px;
  min-height:690px;
  margin:15px auto 0;
  display:grid;
  grid-template-columns:120px minmax(280px,470px) 120px;
  grid-template-areas:
    "prev can next"
    ". info ."
    ". dots ."
    ". future .";
  justify-content:center;
  align-items:center;
  outline:none;
}

.wb-back-name{
  position:absolute;
  top:115px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  font-family:'DM Serif Display',serif;
  font-size:clamp(7rem,18vw,18rem);
  line-height:.75;
  letter-spacing:-.055em;
  color:rgba(255,255,255,.035);
  user-select:none;
  pointer-events:none;
}

.wb-center{
  grid-area:can;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.wb-can-shell{
  width:min(360px,70vw);
  height:440px;
  display:grid;
  place-items:center;
  position:relative;
  cursor:default;
  transition:transform .35s ease;
}

.wb-can-shell::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:20px;
  width:210px;
  height:34px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(0,0,0,.26);
  filter:blur(13px);
  z-index:-1;
}

.wb-can-shell img{
  max-height:440px;
  max-width:100%;
  width:auto;
  height:auto;
  display:block;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.27));
  transition:opacity .2s ease,filter .3s ease,transform .38s cubic-bezier(.2,.8,.2,1);
}

.wb-can-shell.is-changing img{
  opacity:0;
  transform:translateX(20px) rotate(2deg) scale(.97);
}

.wb-soldout-overlay{
  position:absolute;
  inset:27px 48px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:rgba(6,18,15,.76);
  opacity:0;
  transform:scale(.96);
  transition:.25s ease;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(2px);
}

.wb-soldout-overlay span{
  font-family:'DM Serif Display',serif;
  font-size:2rem;
  line-height:.95;
  color:#fff;
}

.wb-soldout-overlay small{
  margin-top:10px;
  color:#e1b77f;
  font:600 .72rem/1.2 'DM Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.wb-can-shell.is-soldout:hover img{
  filter:brightness(.38) saturate(.65) drop-shadow(0 28px 28px rgba(0,0,0,.27));
}

.wb-can-shell.is-soldout:hover .wb-soldout-overlay,
.wb-can-shell.is-soldout.is-overlay-visible .wb-soldout-overlay{
  opacity:1;
  transform:scale(1);
}

.wb-counter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:-2px;
  font-size:.65rem;
  letter-spacing:.12em;
  color:rgba(255,255,255,.62);
}

.wb-counter i{
  width:42px;
  height:1px;
  display:block;
  background:rgba(255,255,255,.32);
}

.wb-arrow{
  width:66px;
  height:66px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  transition:.2s ease;
  display:grid;
  place-items:center;
  backdrop-filter:blur(5px);
}

.wb-arrow:hover{
  background:#fff;
  color:var(--green);
  transform:scale(1.05);
}

.wb-arrow:focus-visible,
.wb-dot-btn:focus-visible{
  outline:3px solid #e1b77f;
  outline-offset:4px;
}

.wb-arrow-prev{grid-area:prev;justify-self:end}
.wb-arrow-next{grid-area:next;justify-self:start}

.wb-info{
  grid-area:info;
  text-align:center;
  max-width:700px;
  margin:18px auto 0;
}

.wb-kicker{
  min-height:28px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:#e1b77f;
  font:700 .68rem/1.4 'DM Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.wb-dot{opacity:.6}

.wb-unavailable{
  margin-left:7px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-size:.58rem;
}

.wb-info h2{
  margin:8px 0 8px;
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.7rem,5vw,4.8rem);
  font-weight:400;
  line-height:.92;
  color:#fff;
}

.wb-notes{
  margin:0;
  font-family:'Caveat',cursive;
  font-size:1.65rem;
  color:#e1b77f;
}

.wb-description{
  max-width:600px;
  margin:15px auto 0;
  color:rgba(255,255,255,.76);
  line-height:1.65;
  font-size:.94rem;
}

.wb-intensity{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  margin-top:22px;
  color:rgba(255,255,255,.58);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.wb-intensity-dots{
  display:flex;
  gap:5px;
}

.wb-intensity-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.48);
  background:transparent;
}

.wb-intensity-dot.is-on{
  background:var(--beer-accent);
  border-color:var(--beer-accent);
}

.wb-dots{
  grid-area:dots;
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:27px;
  flex-wrap:wrap;
}

.wb-dot-btn{
  width:38px;
  height:6px;
  border:0;
  padding:0;
  background:rgba(255,255,255,.2);
  cursor:pointer;
  transition:.2s ease;
}

.wb-dot-btn.is-active{
  background:var(--beer-accent);
  width:58px;
}

.wb-future{
  grid-area:future;
  margin:20px 0 0;
  text-align:center;
  font-family:'Caveat',cursive;
  font-size:1.35rem;
  color:#e1b77f;
}

.wb-story{
  position:relative;
  z-index:3;
  background:var(--cream);
  padding:70px 0 110px;
}

.wb-story-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px;
  align-items:start;
}

.wb-story h2{
  margin:10px 0 0;
  font-family:'DM Serif Display',serif;
  font-size:clamp(3.6rem,6vw,6.5rem);
  line-height:.83;
  letter-spacing:-.04em;
  color:var(--green);
}

.wb-story-copy{
  padding-top:20px;
}

.wb-story-copy h3{
  margin:30px 0 7px;
  font-family:'DM Serif Display',serif;
  font-size:2rem;
  color:var(--green);
  font-weight:400;
}

.wb-story-copy p{
  line-height:1.7;
  color:#45443f;
}

.wb-story-copy .lead{
  font-size:1.2rem;
  color:var(--ink);
}

.wb-story-copy .hand{
  color:var(--rust);
  font-size:1.8rem;
  margin-top:28px;
  transform:rotate(-2deg);
  display:inline-block;
}

@media (hover:none){
  .wb-can-shell.is-soldout .wb-soldout-overlay{
    opacity:1;
    transform:scale(1);
    background:rgba(6,18,15,.68);
  }
  .wb-can-shell.is-soldout img{
    filter:brightness(.5) saturate(.7) drop-shadow(0 28px 28px rgba(0,0,0,.27));
  }
}

@media(max-width:800px){
  .wb-hero{
    min-height:auto;
    padding:112px 0 54px;
  }

  .wb-hero::after{
    height:220px;
    bottom:-145px;
  }

  .wb-hero-top .eyebrow{margin-bottom:8px}
  .wb-hero-top h1{font-size:clamp(3.35rem,16vw,5rem)}
  .wb-hero-top>p{
    max-width:520px;
    padding:0 14px;
    margin-top:18px;
    font-size:.9rem;
    line-height:1.5;
  }
  .wb-swipe-hint{
    margin-top:14px;
    font-size:1.35rem;
  }

  .wb-slider{
    min-height:560px;
    margin-top:0;
    grid-template-columns:52px minmax(180px,1fr) 52px;
    grid-template-areas:
      "prev can next"
      "info info info"
      "dots dots dots"
      "future future future";
  }

  .wb-back-name{
    top:92px;
    font-size:24vw;
  }

  .wb-can-shell{
    width:min(245px,58vw);
    height:300px;
  }

  .wb-can-shell img{max-height:292px}
  .wb-can-shell::after{
    width:135px;
    height:26px;
    bottom:16px;
  }
  .wb-soldout-overlay{inset:18px 22px 24px}
  .wb-soldout-overlay span{font-size:1.35rem}
  .wb-soldout-overlay small{font-size:.62rem}

  .wb-arrow{
    width:42px;
    height:42px;
    font-size:1.2rem;
  }

  .wb-counter{
    margin-top:-4px;
    font-size:.58rem;
  }
  .wb-counter i{width:32px}

  .wb-info{
    padding:0 10px;
    margin-top:4px;
  }
  .wb-kicker{
    min-height:22px;
    font-size:.6rem;
    gap:6px;
  }
  .wb-info h2{
    font-size:2.55rem;
    margin:6px 0;
  }
  .wb-notes{font-size:1.38rem}
  .wb-description{
    font-size:.84rem;
    line-height:1.5;
    margin-top:10px;
    max-width:520px;
  }
  .wb-intensity{
    margin-top:15px;
    gap:7px;
  }
  .wb-dots{
    margin-top:18px;
    gap:7px;
  }
  .wb-dot-btn{width:28px}
  .wb-dot-btn.is-active{width:44px}
  .wb-future{
    margin-top:12px;
    font-size:1.12rem;
  }

  .wb-story{
    padding:46px 0 64px;
  }
  .wb-story-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .wb-story h2{
    font-size:3.25rem;
    margin-top:6px;
  }
  .wb-story-copy{
    padding-top:0;
  }
  .wb-story-copy .lead{
    font-size:1rem;
    line-height:1.55;
  }
  .wb-story-copy h3{
    margin-top:20px;
    font-size:1.65rem;
  }
  .wb-story-copy p{
    font-size:.9rem;
    line-height:1.55;
  }
  .wb-story-copy .hand{
    font-size:1.45rem;
    margin-top:16px;
  }
}

@media(max-width:420px){
  .wb-hero{padding-top:100px}
  .wb-swipe-hint{display:none}
  .wb-slider{
    min-height:520px;
    grid-template-columns:44px minmax(165px,1fr) 44px;
  }
  .wb-can-shell{
    width:56vw;
    height:270px;
  }
  .wb-can-shell img{max-height:265px}
  .wb-arrow{
    width:38px;
    height:38px;
  }
  .wb-info h2{font-size:2.3rem}
  .wb-description{font-size:.81rem}
  .wb-intensity{font-size:.5rem}
  .wb-intensity-dot{
    width:7px;
    height:7px;
  }
  .wb-future{display:none}
  .wb-story{padding:40px 0 54px}
}