/* ============================================================
   Hotel Profis - Responsive Stylesheet
   ============================================================ */

/* ---- Tablet: ≤ 1024px ---- */
@media (max-width: 1024px) {
  :root {
    --container-pad: 1.5rem;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about-image-wrap { max-width: 500px; margin: 0 auto; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-grid > .contact-info { order: 2; }
  .contact-grid > .reveal.reveal-delay-1 { order: 1; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* ---- Mobile: ≤ 768px ---- */
@media (max-width: 768px) {
  :root {
    --header-height: 68px;
    --container-pad: 1.25rem;
  }

  section { padding: 3.5rem 0; }

  /* Header */
  .main-nav { display: none; }
  .header-cta { display: none; }
  .lang-switcher { display: none; }
  .hamburger { display: flex; }
  .site-header { position: fixed; }

  /* Hero */
  .hero { min-height: 100svh; min-height: -webkit-fill-available; align-items: flex-end; padding-bottom: 3rem; }
  .hero-bg { background-attachment: scroll; }
  .hero-label::before,
  .hero-label::after { display: none; }
  .hero-label { margin-bottom: .75rem; }
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); margin-bottom: .75rem; }
  .hero-subtitle { font-size: 0.9rem; margin-bottom: 1.25rem; }
  .hero-content { padding: 0; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .hero-actions .btn { width: auto; max-width: 100%; justify-content: center; }
  .hero-actions #heroCta { width: auto !important; max-width: 100% !important; }
  .hero-scroll { bottom: .75rem; }

  /* Categories */
  .categories-grid { grid-template-columns: 1fr; }
  .category-card-inner { aspect-ratio: 16/9; }

  /* Products */
  .products-grid { grid-template-columns: 1fr; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Features */
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .feature-item { padding: 0.75rem 0.5rem; }

  /* About values */
  .about-values { grid-template-columns: 1fr; }

  /* Contact */
  .contact-form { padding: 1.75rem 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-main { padding: 3rem 0 2rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  /* Cookie */
  .cookie-notice { left: 1rem; right: 1rem; max-width: none; flex-direction: column; }

  /* WhatsApp + back to top */
  .whatsapp-float { bottom: 1.5rem; right: 1.5rem; }
  .back-to-top    { bottom: 5rem; right: 1.5rem; }

  /* CTA actions */
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 300px; }

  /* Page content float images */
  .page-content-wrap .float-left,
  .page-content-wrap .float-right {
    float: none;
    display: block;
    margin: 0 auto 1.5rem;
    max-width: 100% !important;
  }
}

/* ---- Small Mobile: ≤ 480px ---- */
@media (max-width: 480px) {
  :root { --container-pad: 1rem; }

  h2 { font-size: 1.7rem; }

  .features-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .feature-item h3 { font-size: 1.2rem; }

  .hero h1 { font-size: 1.9rem; }

  .product-card-body { padding: 1.25rem; }
  .service-card { padding: 2rem 1.5rem; }

  .page-hero { padding: 6rem 0 3rem; }
}

/* ---- Print ---- */
@media print {
  .site-header,
  .hero-scroll,
  .whatsapp-float,
  .back-to-top,
  .cookie-notice { display: none !important; }
  body { padding-top: 0 !important; }
}


/* === Fix: Лого размер на компютър === */
@media (min-width: 1200px) {
  .logo-img { height: var(--logo-height, 75px); width: var(--logo-width, auto); max-width: 500px; }
}

/* === Fix: Hero снимка на телефон === */
@media (max-width: 768px) {
  .hero-bg { background-attachment: scroll !important; background-size: cover !important; background-position: center center !important; }
}

/* ============================================================
   MOBILE FIXES v1.1
   ============================================================ */

@media (max-width: 768px) {

  /* ----------------------------------------------------------
     1. HERO OVERLAY — по-светъл на мобилен за да се вижда снимката
     ---------------------------------------------------------- */
  .hero-overlay {
    background: linear-gradient(
      160deg,
      rgba(20, 20, 20, 0.72) 0%,
      rgba(100, 20, 20, 0.18) 55%,
      rgba(20, 20, 20, 0.55) 100%
    ) !important;
  }

  /* ----------------------------------------------------------
     2. БУТОНИ В HERO — да не изглеждат сиви/disabled
     ---------------------------------------------------------- */
  .hero-actions .btn-primary {
    background: var(--color-bordeaux) !important;
    border-color: var(--color-bordeaux) !important;
    color: #fff !important;
    opacity: 1 !important;
  }
  .hero-actions .btn-hero-cta {
    background: linear-gradient(135deg, #c9a84c 0%, #e8c84a 50%, #c9a84c 100%) !important;
    color: #0a0a0a !important;
    border: none !important;
    opacity: 1 !important;
    padding: 1rem 2rem;
    font-size: 0.88rem;
  }
  .hero-actions .btn-outline-white {
    background: transparent !important;
    border-color: rgba(255,255,255,0.75) !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  /* ----------------------------------------------------------
     3. CTA SECTION БУТОНИ — да не изглеждат сиви
     ---------------------------------------------------------- */
  .cta-section .btn-gold {
    background: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: #1a1a1a !important;
    opacity: 1 !important;
  }
  .cta-section .btn-outline-white {
    background: transparent !important;
    border-color: rgba(255,255,255,0.75) !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  /* ----------------------------------------------------------
     4. FOOTER CTA БУТОН — да не е изрязан
     ---------------------------------------------------------- */
  .footer-cta-col .btn,
  .footer-cta-col a.btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ----------------------------------------------------------
     5. ПАРТНЬОРСКИ ЛОГА (бял фон) — премахва белия правоъгълник
     ---------------------------------------------------------- */
  .partner-logo img,
  .logo-item img,
  .client-logo img,
  .brand-logo img {
    mix-blend-mode: luminosity;
    filter: brightness(0) invert(1);
    opacity: 0.75;
  }

  /* Ако логото е в карта с бял фон */
  .partner-logo,
  .logo-item,
  .client-logo,
  .brand-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ----------------------------------------------------------
     6. ABOUT IMAGE — да не е прекалено висока на мобилен
     ---------------------------------------------------------- */
  .about-image {
    min-height: 260px !important;
    aspect-ratio: 4/3 !important;
  }
  .about-image-wrap {
    max-width: 100% !important;
  }
}