/* V23: MOBILE-ONLY compact introductory red banner.
   Keep V22 copy, typography colours, and original Tapas artwork.
   All desktop styling remains untouched. */
@media screen and (max-width:800px) {
  .hero-copy-band {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:auto !important;
    min-height:clamp(186px,25svh,226px) !important;
    max-height:none !important; /* copy must remain accessible on short screens */
    padding:14px 14px 18px !important;
    border-top:10px solid #ead8ca !important;
    border-bottom:0 !important;
    margin:0 !important;
    background-color:#870702 !important;
    background-image:linear-gradient(90deg,rgba(44,0,0,.18),rgba(103,0,0,.12) 24%,rgba(90,0,0,.14) 76%,rgba(44,0,0,.18)), url('assets/bg-hero.webp') !important;
    background-size:100% 100%, auto 100% !important;
    background-position:center,center center !important;
    background-repeat:no-repeat !important;
    overflow:hidden !important;
  }
  /* The source is very wide. Paint the two original edge details separately,
     smaller, so both remain visible on a portrait phone. */
  .hero-copy-band::before,
  .hero-copy-band::after {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    height:100% !important;
    width:24% !important;
    opacity:.62 !important;
    background-image:url('assets/bg-hero.webp') !important;
    background-size:auto 100% !important;
    background-repeat:no-repeat !important;
    pointer-events:none !important;
    -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.75) 55%,transparent 100%) !important;
    mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.75) 55%,transparent 100%) !important;
    z-index:0 !important;
  }
  .hero-copy-band::before {
    left:0 !important;
    right:auto !important;
    background-position:left center !important;
  }
  .hero-copy-band::after {
    left:auto !important;
    right:0 !important;
    background-position:right center !important;
    transform:scaleX(-1); /* flip placement for mask only? override below */
  }
  /* Avoid mirroring the cocktail artwork: use mask fading toward the middle. */
  .hero-copy-band::after {
    transform:none !important;
    -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.75) 55%,transparent 100%) !important;
    mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.75) 55%,transparent 100%) !important;
  }
  .hero-copy-band .hero-copy {
    max-width:100% !important;
    padding:0 3px !important;
    margin:0 auto !important;
    position:relative !important;
    z-index:2 !important;
  }
  .hero-copy-band h1 {
    font-family:Georgia,'Times New Roman',serif !important;
    font-weight:600 !important;
    font-size:clamp(24px,6.3vw,32px) !important;
    letter-spacing:-.042em !important;
    line-height:1.02 !important;
    margin:0 0 9px !important;
    color:#fff3e7 !important;
    text-shadow:0 2px 9px rgba(40,0,0,.25) !important;
  }
  .hero-copy-band h1 em {
    display:block !important;
    font-weight:500 !important;
    font-style:italic !important;
    color:#f7c278 !important;
    letter-spacing:-.047em !important;
    white-space:normal !important;
  }
  .hero-copy-band .hero-copy>p {
    max-width:330px !important;
    color:#fff7ec !important;
    font-size:clamp(12px,3.25vw,13.5px) !important;
    line-height:1.4 !important;
    font-weight:500 !important;
    margin:0 auto !important;
    letter-spacing:-.012em !important;
    text-shadow:0 1px 7px rgba(45,0,0,.35) !important;
  }
  .hero-copy-band .hero-actions { display:none !important; }
}
@media screen and (max-width:375px) {
  .hero-copy-band { padding:12px 9px 15px !important; min-height:180px !important; }
  .hero-copy-band h1 { font-size:clamp(22px,6.5vw,25px) !important; margin-bottom:7px !important; }
  .hero-copy-band .hero-copy>p {font-size:12px !important;line-height:1.38 !important;}
}