/* =========================================================
   DEL MONACO V223
   Consolidated responsive HOME HERO fix
   ---------------------------------------------------------
   Goals:
   1) Restore the hero if an older mobile patch collapsed it.
   2) Keep the hero image full-width on phone + tablet.
   3) Keep hero copy below the sticky/fixed header.
   4) Preserve the existing Del Monaco typography family.
   5) Do not affect /products/ or other sections.
   6) No JavaScript positioning hacks.
   ========================================================= */

/* HOME HERO ONLY */
@media (max-width: 1024px) {
  #top.dm180-home-hero,
  #top.dm189-home-hero {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    /* Absolute children must never collapse the section. */
    min-height: clamp(500px, 72vw, 690px) !important;
    height: auto !important;

    overflow: hidden !important;
    background: #07140d !important;
  }

  /* The dedicated responsive/mobile visual must occupy the entire hero. */
  #top.dm180-home-hero .dm213-mobile-hero-visual,
  #top.dm189-home-hero .dm213-mobile-hero-visual {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;

    overflow: hidden !important;
    z-index: 0 !important;
  }

  #top.dm180-home-hero .dm213-mobile-hero-visual img,
  #top.dm189-home-hero .dm213-mobile-hero-visual img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /*
    Readability veil.
    It belongs to the HOME hero only and cannot create page width/white-space.
  */
  #top.dm180-home-hero::after,
  #top.dm189-home-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        rgba(5,17,11,.68) 0%,
        rgba(5,17,11,.43) 38%,
        rgba(5,17,11,.10) 72%,
        rgba(5,17,11,0) 100%
      ) !important;
  }

  /*
    IMPORTANT:
    In the current live DOM the same node carries:
    .dm189-stage.dm213-hero-copy
    We deliberately establish ONE final geometry here.
  */
  #top.dm180-home-hero .dm189-stage.dm213-hero-copy,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy {
    position: relative !important;
    z-index: 3 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: inherit !important;

    box-sizing: border-box !important;
    margin: 0 !important;

    /* Tablet: content stays clear of the sticky header. */
    padding:
      clamp(118px, 14vw, 145px)
      clamp(34px, 6vw, 64px)
      40px !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;
    overflow: visible !important;
  }

  /* Neutralize legacy negative translations only inside HOME hero copy. */
  #top.dm180-home-hero .dm189-stage.dm213-hero-copy > *,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy > * {
    transform: none !important;
    translate: none !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy h1,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: min(610px, 58vw) !important;
    max-width: 100% !important;

    margin-top: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;

    color: #fff8e8 !important;
    -webkit-text-fill-color: #fff8e8 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.34) !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy h1 *,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    transform: none !important;
    translate: none !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy h1 span:last-child,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 span:last-child {
    color: #e4ad21 !important;
    -webkit-text-fill-color: #e4ad21 !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy p,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy p {
    position: static !important;
    width: min(590px, 60vw) !important;
    max-width: 100% !important;

    color: rgba(255,248,232,.96) !important;
    -webkit-text-fill-color: rgba(255,248,232,.96) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.28) !important;

    transform: none !important;
    translate: none !important;
  }
}


/* PHONE */
@media (max-width: 767px) {
  #top.dm180-home-hero,
  #top.dm189-home-hero {
    /*
      430px phone => ~370px hero
      390px phone => ~350px hero
      enough room for eyebrow + title + text + CTAs.
    */
    min-height: clamp(345px, 88vw, 405px) !important;
  }

  /* Phone composition: slightly bias toward the bottles/right-hand scene. */
  #top.dm180-home-hero .dm213-mobile-hero-visual img,
  #top.dm189-home-hero .dm213-mobile-hero-visual img {
    object-position: 55% center !important;
  }

  #top.dm180-home-hero::after,
  #top.dm189-home-hero::after {
    background:
      linear-gradient(
        90deg,
        rgba(5,17,11,.62) 0%,
        rgba(5,17,11,.36) 50%,
        rgba(5,17,11,.08) 100%
      ) !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy {
    /*
      Positive top spacing only.
      The fixed/sticky header can no longer cover the first title line.
    */
    min-height: inherit !important;
    padding:
      clamp(76px, 19vw, 92px)
      clamp(18px, 5vw, 24px)
      20px !important;
  }

  /* Keep existing title FONT FAMILY; normalize mobile scale only. */
  #top.dm180-home-hero .dm189-stage.dm213-hero-copy h1,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 {
    width: min(92%, 390px) !important;
    max-width: 92% !important;

    font-size: clamp(30px, 8.1vw, 38px) !important;
    line-height: .94 !important;
    letter-spacing: -.025em !important;

    margin-bottom: clamp(10px, 2.5vw, 14px) !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy p,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy p {
    width: min(94%, 410px) !important;
    max-width: 94% !important;

    font-size: clamp(12px, 3.15vw, 14px) !important;
    line-height: 1.48 !important;
    margin-bottom: clamp(14px, 3.5vw, 18px) !important;
  }

  /*
    Do not force a new button design.
    Only make the existing CTA row fit the viewport cleanly.
  */
  #top.dm180-home-hero .dm189-stage.dm213-hero-copy a,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy a {
    max-width: 100% !important;
  }
}


/* SMALL PHONES */
@media (max-width: 390px) {
  #top.dm180-home-hero,
  #top.dm189-home-hero {
    min-height: 350px !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy {
    padding-top: 74px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy h1,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy h1 {
    font-size: 29px !important;
    max-width: 96% !important;
  }

  #top.dm180-home-hero .dm189-stage.dm213-hero-copy p,
  #top.dm189-home-hero .dm189-stage.dm213-hero-copy p {
    font-size: 12px !important;
    max-width: 96% !important;
  }
}