/* =========================================================
   ZILABIZ
   Responsive Stylesheet
   File: assets/css/responsive.css
========================================================= */


/* =========================================================
   LARGE DESKTOP
   1400px+
========================================================= */

@media (min-width: 1400px) {

  :root {
    --container-width: 1320px;
  }


  .hero-section {
    min-height: 430px;
  }


  .hero-content {
    padding: 75px 0;
  }


  .business-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }


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

}


/* =========================================================
   DESKTOP
   1200px - 1399px
========================================================= */

@media (min-width: 1200px) {

  .business-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


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

}


/* =========================================================
   SMALL DESKTOP / LAPTOP
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

  .container,
  .header-inner {
    width:
      min(
        calc(100% - 40px),
        1100px
      );
  }


  .hero-content {
    width:
      min(
        calc(100% - 40px),
        800px
      );
  }


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


  .business-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .business-cover {
    height: 165px;
  }

}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

  :root {
    --header-height: 68px;
  }


  .container,
  .header-inner {
    width:
      calc(100% - 32px);
  }


  /* -----------------------------------------------
     HEADER
  ------------------------------------------------ */

  .header-inner {
    gap: 12px;
  }


  .brand-text span {
    display: none;
  }


  .district-button {
    min-width: 160px;
  }


  .header-login-button {
    padding:
      8px 11px;

    font-size: 11px;
  }


  /* -----------------------------------------------
     HERO
  ------------------------------------------------ */

  .hero-section {
    min-height: 370px;
  }


  .hero-content {
    padding:
      55px 0;
  }


  .hero-content h1 {
    font-size:
      clamp(36px, 7vw, 52px);
  }


  /* -----------------------------------------------
     FILTERS
  ------------------------------------------------ */

  .filter-grid {
    grid-template-columns:
      repeat(3, 1fr);

    gap: 10px;
  }


  /* -----------------------------------------------
     CATEGORIES
  ------------------------------------------------ */

  .categories-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 11px;
  }


  /* -----------------------------------------------
     BUSINESS
  ------------------------------------------------ */

  .business-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;
  }


  /* -----------------------------------------------
     CTA
  ------------------------------------------------ */

  .business-cta {
    padding: 28px;
  }


  /* -----------------------------------------------
     FOOTER
  ------------------------------------------------ */

  .footer-inner {
    flex-wrap: wrap;
  }

}


/* =========================================================
   LARGE MOBILE / SMALL TABLET
   576px - 767px
========================================================= */

@media (max-width: 767px) {

  :root {
    --header-height: 64px;
  }


  .container,
  .header-inner {
    width:
      calc(100% - 24px);
  }


  /* -----------------------------------------------
     HEADER
  ------------------------------------------------ */

  .site-header {
    height: var(--header-height);
  }


  .header-inner {
    gap: 8px;
  }


  .brand {
    gap: 8px;
  }


  .brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 20px;
  }


  .brand-text strong {
    font-size: 17px;
  }


  .district-button {
    min-width: 0;
    padding: 6px 8px;
    gap: 6px;
  }


  .district-icon {
    width: 29px;
    height: 29px;
    border-radius: 8px;
  }


  .district-button strong {
    max-width: 75px;
    font-size: 10px;
  }


  .district-button small {
    font-size: 8px;
  }


  .district-arrow {
    display: none;
  }


  .header-login-button {
    display: none;
  }


  .mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }


  /* -----------------------------------------------
     HERO
  ------------------------------------------------ */

  .hero-section {
    min-height: 355px;
  }


  .hero-content {
    width:
      calc(100% - 24px);

    padding:
      45px 0;
  }


  .hero-badge {
    font-size: 9px;
  }


  .hero-content h1 {
    margin-top: 16px;

    font-size:
      clamp(34px, 10vw, 46px);

    letter-spacing:
      -1.7px;
  }


  .hero-description {
    max-width: 480px;

    margin:
      12px auto 23px;

    font-size: 12px;
  }


  .main-search-wrapper {
    padding: 5px;

    border-radius: 14px;
  }


  .search-icon {
    width: 39px;
    height: 43px;
    font-size: 16px;
  }


  .main-search-wrapper input {
    height: 43px;
    font-size: 12px;
  }


  .clear-search-button {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }


  /* -----------------------------------------------
     SECTION SPACING
  ------------------------------------------------ */

  .filter-section,
  .categories-section,
  .business-section,
  .business-cta-section {
    padding:
      40px 0;
  }


  .section-heading,
  .filter-header {
    align-items: flex-start;
    margin-bottom: 19px;
  }


  .section-heading h2,
  .filter-header h2 {
    font-size: 22px;
  }


  /* -----------------------------------------------
     FILTERS
  ------------------------------------------------ */

  .filter-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .filter-field select {
    min-height: 43px;
  }


  /* -----------------------------------------------
     CATEGORIES
  ------------------------------------------------ */

  .categories-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 8px;
  }


  .category-card {
    min-height: 105px;

    padding:
      12px 6px;

    border-radius: 13px;
  }


  .category-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 20px;
  }


  .category-name {
    font-size: 9px;
  }


  .category-count {
    font-size: 8px;
  }


  /* -----------------------------------------------
     BUSINESS
  ------------------------------------------------ */

  .business-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .business-cover {
    height: 190px;
  }


  .business-content {
    padding:
      35px 15px 15px;
  }


  /* -----------------------------------------------
     CTA
  ------------------------------------------------ */

  .business-cta {
    flex-direction: column;

    align-items: flex-start;

    padding: 24px;

    gap: 18px;
  }


  .business-cta h2 {
    font-size: 22px;
  }


  .business-cta p {
    font-size: 11px;
  }


  .business-cta .primary-button {
    width: 100%;
  }


  /* -----------------------------------------------
     FOOTER
  ------------------------------------------------ */

  .footer-inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 17px;
  }


  .footer-links {
    gap: 13px;
  }


  /* -----------------------------------------------
     MODALS
  ------------------------------------------------ */

  .modal-overlay {
    padding: 12px;
  }


  .modal-box {
    max-height:
      calc(100vh - 24px);

    padding: 23px;

    border-radius: 17px;
  }


  .business-detail-cover {
    height: 200px;

    margin:
      -23px -23px 0;
  }


  .business-detail-header {
    margin-top: -34px;
  }


  .business-detail-logo {
    width: 72px;
    height: 72px;
  }


  .business-detail-title h2 {
    font-size: 20px;
  }


  .business-detail-info {
    grid-template-columns: 1fr;
  }


  .mini-items-grid {
    grid-template-columns: 1fr;
  }


  .business-detail-actions {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   480px - 575px
========================================================= */

@media (max-width: 575px) {

  /* -----------------------------------------------
     HEADER
  ------------------------------------------------ */

  .header-inner {
    gap: 5px;
  }


  .brand-logo {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }


  .brand-text strong {
    font-size: 16px;
  }


  .district-button {
    margin-left: auto;
  }


  /* -----------------------------------------------
     HERO
  ------------------------------------------------ */

  .hero-section {
    min-height: 345px;
  }


  .hero-content {
    padding:
      42px 0;
  }


  .hero-badge {
    padding:
      6px 9px;

    font-size: 8px;
  }


  .hero-content h1 {
    font-size:
      clamp(31px, 11vw, 42px);

    letter-spacing:
      -1.4px;
  }


  .hero-description {
    font-size: 11px;
  }


  /* -----------------------------------------------
     CATEGORIES
  ------------------------------------------------ */

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

    gap: 9px;
  }


  .category-card {
    min-height: 110px;
  }


  /* -----------------------------------------------
     BUSINESS
  ------------------------------------------------ */

  .business-cover {
    height: 180px;
  }


  .business-name {
    font-size: 16px;
  }


  /* -----------------------------------------------
     FOOTER
  ------------------------------------------------ */

  .footer-copy {
    font-size: 9px;
  }

}


/* =========================================================
   SMALL MOBILE
   360px - 479px
========================================================= */

@media (max-width: 479px) {

  .container,
  .header-inner {
    width:
      calc(100% - 20px);
  }


  /* -----------------------------------------------
     HEADER
  ------------------------------------------------ */

  .brand-text {
    display: none;
  }


  .brand-logo {
    width: 37px;
    height: 37px;
  }


  .district-button {
    flex: 1;

    max-width: 170px;

    margin-left: auto;
  }


  .district-button strong {
    max-width: 90px;
  }


  /* -----------------------------------------------
     HERO
  ------------------------------------------------ */

  .hero-content {
    width:
      calc(100% - 20px);
  }


  .hero-content h1 {
    font-size:
      clamp(29px, 12vw, 39px);
  }


  .hero-description {
    max-width: 330px;

    line-height: 1.5;
  }


  .main-search-wrapper input {
    font-size: 11px;
  }


  .search-icon {
    width: 35px;
  }


  /* -----------------------------------------------
     SECTION
  ------------------------------------------------ */

  .filter-section,
  .categories-section,
  .business-section,
  .business-cta-section {
    padding:
      34px 0;
  }


  .section-heading,
  .filter-header {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
  }


  .reset-filter-button {
    align-self: flex-start;
  }


  /* -----------------------------------------------
     CATEGORY
  ------------------------------------------------ */

  .category-card {
    min-height: 103px;
  }


  .category-icon {
    width: 39px;
    height: 39px;
  }


  .category-name {
    font-size: 9px;
  }


  /* -----------------------------------------------
     BUSINESS
  ------------------------------------------------ */

  .business-cover {
    height: 170px;
  }


  .business-actions {
    grid-template-columns:
      1fr 1fr;
  }


  /* -----------------------------------------------
     MODAL
  ------------------------------------------------ */

  .modal-overlay {
    padding: 8px;
  }


  .modal-box {
    padding: 19px;

    border-radius: 15px;
  }


  .business-detail-cover {
    height: 175px;

    margin:
      -19px -19px 0;
  }


  .business-detail-header {
    margin-top: -29px;
  }


  .business-detail-logo {
    width: 62px;
    height: 62px;

    border-width: 4px;

    border-radius: 15px;
  }


  .business-detail-title h2 {
    font-size: 17px;
  }


  .business-detail-title p {
    font-size: 9px;
  }

}


/* =========================================================
   EXTRA SMALL DEVICES
   < 360px
========================================================= */

@media (max-width: 359px) {

  .district-button {
    max-width: 145px;
  }


  .district-button strong {
    max-width: 70px;
  }


  .hero-content h1 {
    font-size: 28px;
  }


  .hero-description {
    font-size: 10px;
  }


  .category-card {
    min-height: 96px;
  }


  .category-icon {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }


  .category-name {
    font-size: 8px;
  }


  .business-cover {
    height: 155px;
  }


  .business-actions {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media (
  max-height: 520px
) and (
  orientation: landscape
) {

  .hero-section {
    min-height: 310px;
  }


  .hero-content {
    padding:
      35px 0;
  }


  .hero-content h1 {
    font-size: 35px;
  }


  .hero-description {
    margin-bottom: 15px;
  }


  .modal-box {
    max-height:
      calc(100vh - 16px);
  }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

  .business-card:hover {

    transform: none;

    box-shadow: var(--shadow-sm);

  }


  .category-card:hover {

    transform: none;

  }


  .business-card:hover .business-cover img {

    transform: none;

  }


  .primary-button:hover {

    transform: none;

  }

}


/* =========================================================
   HIGH CONTRAST MODE
========================================================= */

@media (prefers-contrast: more) {

  :root {

    --border: #94a3b8;

  }


  .business-card,
  .category-card,
  .filter-field select,
  .business-action,
  .modal-box {

    border-width: 2px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .business-card,
  .category-card,
  .primary-button,
  .business-cover img {

    transition: none !important;

  }

}