/* ================================
   RESPONSIVE CSS – Angi Style
   ================================ */

/* Container scaling */
@media (max-width: 1200px){
  .page-wrap{ max-width: 960px; padding:0 14px; }
}
@media (max-width: 992px){
  .page-wrap{ max-width: 720px; padding:0 14px; }
}
@media (max-width: 768px){
  .page-wrap{ max-width: 540px; padding:0 14px; }
}
@media (max-width: 576px){
  .page-wrap{ max-width: 100%; padding:0 12px; }
}

/* ================================
   NAVBAR
   ================================ */
@media (max-width: 992px){
  .nav-links{ display:none !important; }
  .top-actions a{ display:none !important; }
}

/* ================================
   HERO SECTION
   ================================ */
@media (max-width: 992px){
  .hero{ height:260px; }

  .hero-box{
    left:0;
    right:0;
    top:48px;
    width:auto;
    padding:0 14px;
  }

  .hero-box h1{
    font-size:22px;
    line-height:1.2;
  }

  .searchbar{
    width:100%;
    height:auto;
    padding:10px 12px;
    border-radius:14px;
    flex-wrap:wrap;
  }

  .searchbar input{
    width:100%;
    font-size:13px;
    padding:6px 0;
  }

  .zip{
    border-left:0;
    padding-left:0;
    margin-top:6px;
    width:calc(100% - 36px);
  }

  .go{
    margin-left:auto;
  }
}

/* ================================
   CATEGORY ICONS
   ================================ */
@media (max-width: 992px){
  .cats .col{ flex:0 0 16.66%; max-width:16.66%; }
}
@media (max-width: 768px){
  .cats .col{ flex:0 0 25%; max-width:25%; }
}
@media (max-width: 480px){
  .cats .col{ flex:0 0 33.33%; max-width:33.33%; }
}

/* ================================
   POPULAR PROJECT GRID
   ================================ */
@media (max-width: 992px){
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 576px){
  .proj-grid{ grid-template-columns:1fr; }
}

/* ================================
   NEWSLETTER BAR
   ================================ */
@media (max-width: 992px){
  .newsletter{
    flex-direction:column;
    align-items:stretch;
  }

  .newsletter .right{
    width:100%;
    flex-wrap:wrap;
  }

  .n-input,
  .n-input.zip,
  .n-btn{
    width:100% !important;
  }
}

/* ================================
   IMAGE CARD SECTIONS
   ================================ */
@media (max-width: 992px){
  .img-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 576px){
  .img-row{ grid-template-columns:1fr; }
  .img-card img{ height:180px; }
}

/* ================================
   COST GUIDE SECTION
   ================================ */
@media (max-width: 992px){
  .cost-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 576px){
  .cost-grid{ grid-template-columns:1fr; }
  .cost-card img{ height:140px; }
}

/* ================================
   POPULAR CATEGORY LINKS
   ================================ */
@media (max-width: 992px){
  .links-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 576px){
  .links-grid{ grid-template-columns:1fr; }
}

/* ================================
   FOOTER
   ================================ */
@media (max-width: 992px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 576px){
  .footer-grid{ grid-template-columns:1fr; }

  .bottomline{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}
