/* Tapas V21: MOBILE ONLY. Desktop design and markup untouched. */
@media screen and (max-width: 800px) {
  /* Legible, accessible hamburger menu */
  .mobile-nav:not([hidden]) {
    display: block;
    position: absolute;
    z-index: 80;
    top: 61px;
    left: 16px;
    right: 16px;
    padding: 10px 14px;
    border: 1px solid rgba(244, 206, 166, .36);
    border-radius: 14px;
    background: #3d100b;
    box-shadow: 0 16px 40px rgba(31, 6, 3, .26);
  }
  .mobile-nav[hidden] { display: none !important; }
  .mobile-nav a,
  .mobile-nav a:link,
  .mobile-nav a:visited {
    display:block;
    padding: 15px 13px;
    color: #fff4e6 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: 0;
    border-radius: 8px;
  }
  .mobile-nav a + a { border-top: 1px solid rgba(255, 244, 230, .14); border-top-left-radius:0; border-top-right-radius:0; }
  .mobile-nav a:hover,
  .mobile-nav a:focus-visible {
    color: #fff !important;
    background: #713025;
    outline-offset: 2px;
  }

  /* Keep desktop CTA links; REMOVE ONLY from the mobile opening section */
  .hero-copy-band .hero-actions { display: none !important; }

  /* The original wide artwork is 2048x682; keep its entire composition
     visible as an edge-to-edge strip, not a cropped portrait fill. */
  .hero-copy-band {
    background: #990b06 !important;
    padding: calc(33.3vw + 24px) 18px 48px !important;
    border-top-color: #ead8ca !important;
    isolation: isolate;
  }
  .hero-copy-band::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 682;
    background: url('assets/mobile-intro-artwork.webp') center top / 100% 100% no-repeat !important;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 0;
  }
  .hero-copy-band .hero-copy { position: relative; z-index: 1; }
  .hero-copy-band .hero-copy > p { margin-bottom: 0 !important; }
}
@media screen and (max-width: 480px) {
  .mobile-nav:not([hidden]) { top: 54px; left: 12px; right: 12px; }
  .hero-copy-band { padding: calc(33.3vw + 22px) 17px 43px !important; }
}

/* V22: a single mobile-only red intro, with the original approved artwork.
   Actual HTML headline and description remain crisp, selectable, accessible.
   Desktop is unaffected; V21 high-contrast menu is preserved above. */
@media screen and (max-width:800px) {
  .hero-copy-band {
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-height:clamp(455px,125vw,535px) !important;
    margin:0 !important;
    padding:106px clamp(22px,6vw,35px) 93px !important;
    border-top:16px solid #ead8ca !important;
    border-bottom:0 !important;
    overflow:hidden !important;
    isolation:isolate !important;
    /* The original red pattern stays continuous; no separate photo strip. */
    background-color:#850802 !important;
    background-image:linear-gradient(180deg,rgba(140,3,0,.06),rgba(95,0,0,.12)),url('assets/bg-hero.webp') !important;
    background-position:center,center center !important;
    background-size:cover,auto 110% !important;
    background-repeat:no-repeat !important;
  }
  /* Show the original microphone/cocktail from either edge of the wide image.
     Soft radial masks merge both sides into the same red background. */
  .hero-copy-band::before,
  .hero-copy-band::after {
    content:"" !important;
    position:absolute !important;
    display:block !important;
    top:0 !important;
    bottom:0 !important;
    width:43% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    background-image:url('assets/bg-hero.webp') !important;
    background-size:auto clamp(255px,70vw,310px) !important;
    background-repeat:no-repeat !important;
    opacity:.84 !important;
    z-index:0 !important;
    pointer-events:none !important;
  }
  .hero-copy-band::before {
    left:0 !important;
    right:auto !important;
    background-position:left top !important;
    -webkit-mask-image:radial-gradient(ellipse 125% 62% at 0% 12%,#000 0%,rgba(0,0,0,.85) 25%,transparent 92%) !important;
    mask-image:radial-gradient(ellipse 125% 62% at 0% 12%,#000 0%,rgba(0,0,0,.85) 25%,transparent 92%) !important;
  }
  .hero-copy-band::after {
    right:0 !important;
    left:auto !important;
    background-position:right top !important;
    -webkit-mask-image:radial-gradient(ellipse 125% 62% at 100% 12%,#000 0%,rgba(0,0,0,.85) 25%,transparent 92%) !important;
    mask-image:radial-gradient(ellipse 125% 62% at 100% 12%,#000 0%,rgba(0,0,0,.85) 25%,transparent 92%) !important;
  }
  .hero-copy-band .hero-copy {
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:352px !important;
    margin:auto !important;
    padding:0 !important;
  }
  .hero-copy-band h1 {
    font-family:Georgia,'Times New Roman',serif !important;
    font-size:clamp(34px,8.9vw,45px) !important;
    line-height:1.07 !important;
    font-weight:600 !important;
    letter-spacing:-.045em !important;
    color:#fff3e7 !important;
    text-shadow:0 3px 12px rgba(44,0,0,.38) !important;
    margin:0 auto 26px !important;
  }
  .hero-copy-band h1 em {
    display:block !important;
    font-family:Georgia,'Times New Roman',serif !important;
    font-style:italic !important;
    font-weight:500 !important;
    color:#f7c278 !important;
    letter-spacing:-.055em !important;
    white-space:normal !important;
  }
  .hero-copy-band .hero-copy>p {
    font-family:'DM Sans',Arial,sans-serif !important;
    font-size:clamp(14px,3.75vw,16px) !important;
    font-weight:500 !important;
    line-height:1.72 !important;
    color:#fff7ec !important;
    max-width:385px !important;
    margin:0 auto !important;
    text-shadow:0 2px 8px rgba(38,0,0,.35) !important;
  }
  .hero-copy-band .hero-actions {display:none !important;}
}
@media screen and (max-width:375px) {
  .hero-copy-band {min-height:455px !important; padding:100px 22px 85px !important;}
  .hero-copy-band h1 {font-size:34px !important;}
  .hero-copy-band .hero-copy>p {font-size:14px !important;}
}