/* ==========================================================================
   ClimaElite Italia — Responsive Stylesheet
   Breakpoints: 1199px | 991px | 767px | 575px
   Header: 40px announcement bar + 72px nav = 112px total fixed offset
   ========================================================================== */

/* ==========================================================================
   1. LARGE TABLET / SMALL DESKTOP  (≤ 1199px)
   ========================================================================== */

@media (max-width: 1199px) {

  /* Layout */
  .section {
    padding: 80px 0;
  }

  .container {
    padding: 0 24px;
  }

  /* Hero */
  .hero__content {
    padding: 60px 40px 60px 0;
  }

  .hero__heading {
    font-size: 3rem;
  }

  /* Footer: 2×2 grid */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Value prop */
  .value-prop-layout {
    gap: 48px;
  }

  /* Stats */
  .stats-grid {
    gap: 24px;
  }

  .stat-block__number {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   2. TABLET / MOBILE TRANSITION  (≤ 991px)
   ========================================================================== */

@media (max-width: 991px) {

  /* Layout */
  .section {
    padding: 60px 0;
  }

  /* ---- Navigation ---- */
  .site-nav {
    display: none;
  }

  .site-header__cta {
    display: none;
  }

  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- Announcement bar ---- */
  .announcement-bar__items {
    gap: 0;
  }

  .announcement-bar__item {
    font-size: 0.65rem;
    padding: 0 12px;
  }

  /* ---- Page hero offset ---- */
  /* Header is still 112px fixed (announcement + nav) */
  .page-hero {
    margin-top: 112px;
  }

  /* ---- Hero section ---- */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__content {
    padding: 80px 0 60px;
    order: 1;
  }

  .hero__image {
    height: 400px;
    display: block;
    order: 2;
  }

  /* ---- Trust bar: 2×2 ---- */
  .hero-trust-bar__inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero-trust-bar__item:nth-child(2) {
    border-right: none;
  }

  /* ---- Category grid: 2 col ---- */
  .category-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Product grids ---- */
  .product-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-grid--3col {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Testimonials: single column ---- */
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Value prop: stacked ---- */
  .value-prop-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* ---- Stats ---- */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Team ---- */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Certifications ---- */
  .cert-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Pricing: single column ---- */
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Contact ---- */
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* ---- Blog featured: stacked image on top ---- */
  .blog-featured {
    grid-template-columns: 1fr;
  }

  /* ---- Generic utility grids ---- */
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Footer ---- */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Showroom layout ---- */
  .showroom-layout {
    grid-template-columns: 1fr;
  }

  /* ---- Timeline ---- */
  .timeline-step {
    grid-template-columns: 60px 1fr;
  }
}

/* ==========================================================================
   3. MOBILE  (≤ 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Layout */
  .section {
    padding: 48px 0;
  }

  .container {
    padding: 0 16px;
  }

  /* ---- Announcement bar: hidden on mobile ---- */
  .announcement-bar {
    display: none;
  }

  /* ---- Header adjusts: no announcement bar ---- */
  .site-header {
    top: 0;
  }

  /* ---- Page hero offset: only nav height ---- */
  .page-hero {
    margin-top: 72px;
  }

  /* ---- Filter bar offset: only nav height ---- */
  .filter-bar {
    top: 72px;
  }

  .filter-bar__inner {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Hero section ---- */
  .hero {
    padding-top: 72px;
  }

  .hero__content {
    padding: 48px 0 40px;
  }

  .hero__heading {
    font-size: 2.4rem;
  }

  .hero__subheading {
    font-size: 1rem;
  }

  .hero__actions {
    flex-direction: column;
    gap: 12px;
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
  }

  .hero__image {
    height: 280px;
  }

  /* ---- Trust bar ---- */
  .hero-trust-bar__inner {
    grid-template-columns: 1fr 1fr;
    padding: 0 16px;
  }

  .hero-trust-bar__item {
    padding: 14px 8px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  /* ---- Category grid: single column ---- */
  .category-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Product grids: single column ---- */
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-grid--3col {
    grid-template-columns: 1fr;
  }

  /* ---- Value prop CTA ---- */
  .value-prop__content .btn--ghost {
    width: 100%;
    text-align: center;
  }

  /* ---- Testimonials ---- */
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Team: keep 2 col on mobile ---- */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Certifications: single column ---- */
  .cert-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Generic utility grids ---- */
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* ---- Footer ---- */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom__legal {
    justify-content: center;
  }

  /* ---- CTA section ---- */
  .cta-section__heading {
    font-size: 2rem;
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: center;
  }

  /* ---- Page hero title ---- */
  .page-hero__title {
    font-size: 2.2rem;
  }

  /* ---- Blog ---- */
  .blog-featured__content {
    padding: 28px;
  }

  /* ---- Contact layout ---- */
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .form-sidebar {
    margin-top: 40px;
  }

  /* ---- Consultation banner ---- */
  .consultation-banner {
    flex-direction: column;
    text-align: center;
  }

  /* ---- Newsletter form ---- */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-input {
    border-right: 1px solid rgba(201, 168, 76, 0.3);
    border-bottom: none;
  }
}

/* ==========================================================================
   4. SMALL MOBILE  (≤ 575px)
   ========================================================================== */

@media (max-width: 575px) {

  /* ---- Base typography ---- */
  body {
    font-size: 1rem;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  h3 {
    font-size: 1.4rem;
  }

  /* ---- Buttons ---- */
  .btn {
    padding: 14px 28px;
    font-size: 0.82rem;
  }

  .btn--sm {
    padding: 10px 20px;
    font-size: 0.75rem;
  }

  /* ---- Hero ---- */
  .hero__heading {
    font-size: 2rem;
  }

  /* ---- Stats ---- */
  .stat-block__number {
    font-size: 2.2rem;
  }

  /* ---- Team: single column on small mobile ---- */
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Value prop stats stay 2 col ---- */
  .value-prop-layout .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Cards ---- */
  .pricing-card {
    padding: 28px;
  }

  .testimonial-card {
    padding: 28px;
  }

  .category-card {
    padding: 28px;
  }
}