/* VenueOS — Hero styles */

    /* Hero
     * QUALITY: Heroes look blurry when images are too small. Current assets are
     * ~940–1024px wide; on desktop they stretch to full width and get upscaled.
     * Replace with images at least 1920px wide (height ~640px or to taste) for
     * sharp results. Same filenames in assets/images/branding/ (hero-*.png).
     * CROP: Edit background-position: [x] [y]; e.g. center 55%
     */
    .hero-wrap {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      padding: 16px;
      margin: 0 auto;
    }
    @media (min-width: 769px) {
      .hero-wrap {
        padding: 24px;
        max-width: var(--content-max-xl, 1400px);
        margin-left: auto;
        margin-right: auto;
      }
    }
    .hero {
      position: relative;
      width: 100%;
      min-height: 220px;
      background: var(--page-bg) url('../../assets/images/branding/hero-food.png') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-image 0.5s ease;
      border-radius: 24px;
      overflow: hidden;
      box-sizing: border-box;
    }
    @media (min-width: 769px) {
      .hero { border-radius: 32px; }
    }
    .hero.hero-food {
      background-image: url('../../assets/images/branding/hero-food.png');
      background-position: center center;
      background-size: cover;
      min-height: 280px;
    }
    @media (min-width: 769px) {
      .hero.hero-food {
        min-height: 380px;
        background-position: center 55%;
      }
    }
    .hero.hero-food::after {
      background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);
    }
    .hero.hero-cocktails {
      background-image: url('../../assets/images/branding/hero-drinks.png');
      background-position: center;
      background-size: cover;
      min-height: 220px;
    }
    @media (min-width: 769px) {
      .hero.hero-cocktails {
        min-height: 380px;
        background-position: center 50%;
      }
    }
    .hero.hero-cocktails::after {
      background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);
    }
    .hero.hero-standards {
      background-image: url('../../assets/images/branding/hero-standards.png?v=46');
      min-height: 380px;
      /* Frame the set tables: center horizontally, show middle/lower so tables are in view */
      background-position: center 58%;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .hero.hero-standards::after {
      background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.08) 100%);
    }

    @media (min-width: 769px) {
      .hero.hero-standards {
        min-height: 400px;
        /* Desktop: keep tables in frame, slightly lower crop for white cloths & glasses */
        background-position: center 55%;
        background-size: cover;
      }
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(26, 26, 26, 0.4) 0%, rgba(26, 26, 26, 0.85) 100%);
    }

    .hero-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      margin: 0;
      padding: 0;
      font-size: 2rem;
      font-weight: 400;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--white);
      text-align: center;
      max-width: 90%;
    }

    /* Venue logo image on food hero (optional: mask = green text, no background) */
    .hero-logo-img {
      display: none;
      position: relative;
      z-index: 1;
      width: min(85%, 420px);
      max-width: 420px;
      height: 88px;
      background-color: #1a4a3d;
      -webkit-mask-image: url('../../assets/images/branding/cecconis-hero-text.png');
      mask-image: url('../../assets/images/branding/cecconis-hero-text.png');
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-mode: luminance;
      mask-mode: luminance;
    }
    .hero.hero-food .hero-logo-img {
      display: none; /* green logo removed from hero */
    }

    /* Mobile overrides for hero */
    @media (max-width: 768px) {
      .hero {
        min-height: 140px;
        background-size: cover;
        background-position: center;
      }

      .hero-title {
        font-size: 1.2rem;
        letter-spacing: 0.12em;
      }

      .hero {
        background-size: cover;
        background-position: center;
      }
    }