/* ==================================================================
   Home layout — BigMat Clemente Lorenzo (2026-11-15)
   Linked only on the home (templates/_partials/head.tpl), after the combined theme CSS, so it
   wins over custom-bigmat.css without touching the CCC bundle.
   One vertical rhythm for every builder section, one side gutter for every block, service row as a
   real grid, compact departments and brands on phones.
   Builder page id=3: sections are .elementor-top-section inside #wrapper.
   ================================================================== */

body#index {
  --cl-home-gap: 40px;
  --cl-home-title: 22px;
}
@media (min-width: 768px) {
  body#index { --cl-home-gap: 56px; --cl-home-title: 26px; }
}
@media (min-width: 1200px) {
  body#index { --cl-home-gap: 64px; }
}

/* ---------------------------------------------------------- rhythm */
/* Sections had a mix of 24/30/46/48/50 px paddings and margins: the space between two blocks is
   now always the same, and it comes from one place only. */
body#index #wrapper .elementor-top-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body#index #wrapper .elementor-top-section + .elementor-top-section {
  margin-top: var(--cl-home-gap) !important;
}
body#index #wrapper .elementor-top-section:last-child {
  margin-bottom: var(--cl-home-gap) !important;
}

/* ---------------------------------------------------------- gutter */
/* The builder container already keeps 15/20 px from the edge: the module blocks no longer add
   their own 16 px, so banners, cards and grids start on the same line. */
body#index .cl-hp,
body#index .cl-hs-departments {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body#index .cl-hs-store,
body#index .cl-hs-welcome {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------- titles */
body#index .cl-hp__title,
body#index .cl-hs-departments__title,
body#index .cl-hs-store__title,
body#index .brand-section .elementor-widget-heading .elementor-heading-title {
  margin-bottom: 20px;
  font-size: var(--cl-home-title) !important;
  line-height: 1.2;
}
body#index .cl-hs-welcome__title {
  margin-bottom: 16px;
}
body#index .cl-hs-welcome__text {
  margin-bottom: 12px;
}
body#index .cl-hp + .cl-hp {
  margin-top: var(--cl-home-gap);
}
body#index .brand-section .elementor-widget-text-editor {
  margin-bottom: 20px;
}

/* ---------------------------------------------------------- service row */
body#index .service-section .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start !important;
  justify-content: stretch !important;
}
body#index .service-section .elementor-widget-icon-box {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
body#index .service-section .elementor-widget-icon-box > .elementor-widget-container {
  padding: 0 !important;
}
body#index .service-section .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px;
  padding: 0 !important;
  text-align: left !important;
}
body#index .service-section .elementor-icon-box-icon {
  flex: 0 0 auto;
  margin: 0 !important;
}
/* The four icons were set to 60/48/45/40 px in the builder: one size, so the texts line up */
body#index .service-section .elementor-icon-box-icon .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}
body#index .service-section .elementor-icon-box-icon .elementor-icon svg,
body#index .service-section .elementor-icon-box-icon .elementor-icon img {
  width: 44px !important;
  height: 44px !important;
}
body#index .service-section .elementor-icon-box-content {
  flex: 1 1 auto;
  min-width: 0;
}
body#index .service-section .elementor-icon-box-title {
  margin: 2px 0 4px !important;
}
body#index .service-section .elementor-icon-box-description {
  margin: 0 !important;
  line-height: 1.45;
}
@media (min-width: 576px) {
  body#index .service-section .elementor-widget-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
  }
}
@media (min-width: 1200px) {
  body#index .service-section .elementor-widget-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------- departments */
/* With three departments the grid has three columns at every width (no orphan tile, no empty
   half row on desktop); four get four, and an odd last tile on two columns takes the whole row. */
body#index .cl-hs-departments__grid {
  margin-top: 0;
}
body#index .cl-hs-departments__grid:has(> .cl-hs-departments__item:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body#index .cl-hs-departments__grid:has(> .cl-hs-departments__item:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Three wide tiles on desktop: a lower photo keeps the block from filling the screen */
@media (min-width: 768px) {
  body#index .cl-hs-departments__grid:has(> .cl-hs-departments__item:nth-child(3):last-child) .cl-hs-departments__media {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 575px) {
  body#index .cl-hs-departments__grid {
    gap: 10px;
  }
  body#index .cl-hs-departments__grid:has(> .cl-hs-departments__item:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body#index .cl-hs-departments__grid:not(:has(> .cl-hs-departments__item:nth-child(3):last-child)) > .cl-hs-departments__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body#index .cl-hs-departments__grid:not(:has(> .cl-hs-departments__item:nth-child(3):last-child)) > .cl-hs-departments__item:last-child:nth-child(odd) .cl-hs-departments__media {
    aspect-ratio: 16 / 7;
  }
  body#index .cl-hs-departments__name {
    padding: 8px 4px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------- brands */
@media (max-width: 575px) {
  body#index .cl-brands__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  body#index .cl-brand-card__link {
    padding: 10px 6px;
  }
  body#index .cl-brand-card__logo {
    height: 52px;
  }
  body#index .cl-brand-card__name {
    margin-top: 6px;
    font-size: 11px;
  }
  body#index .cl-brandshome__cta {
    margin-top: 20px;
  }
}