/* ==========================================================================
   QUBIT.MK — home.css
   Loaded only on the home page template.
   ========================================================================== */

/* ==========================================================================
   7) HOME PAGE — HERO
   ========================================================================== */
.home-hero-static{
  height: var(--hero-img-h);
  background-color: #B1D7FE;

  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: var(--hero-img-w) var(--hero-img-h);

  position: relative;
  margin-top: 0 !important;
}

.home-hero-static .home-hero-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20rem;
  padding-right: 16px;
}

.home-hero-static .home-hero-meta{
  max-width: 400px;
  text-align: left;
}

/* Home: if no hero, push first section down a bit */
.page-template-template-home_page .site-main.no-hero .home-post-section:first-of-type{
  padding-top: 28px;
}

@media (max-width: 1200px){
  .home-hero-static{ background-size: 820px auto; }
}
@media (max-width: 992px){
  .home-hero-static{ background-size: 680px auto; min-height: 520px; }
}
@media (max-width: 768px){
  .home-hero-static{
    background-size: 520px auto;
    min-height: 420px;
    background-position: right bottom;
  }
}
@media (max-width: 767.98px){
  .home-hero-static .home-hero-inner{
    padding-left: 16px;
    padding-top: 18px;
  }
}

/* Max width 1240px for homepage content (if used by template) */
.page-template-template-home_page .container-1440{
  max-width: var(--container-max);
}

/* ==========================================================================
   8) HOME PAGE — GRID (Option B: CSS Grid, NO gaps)
   ========================================================================== */
.page-template-template-home_page .home-post-section .row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0; /* kill Bootstrap negative margins */
}

/* Remove Bootstrap col padding so items touch */
.page-template-template-home_page .home-post-section .row > [class*="col"]{
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

/* Responsive: 2 per row tablet, 1 per row mobile */
@media (max-width: 991.98px){
  .page-template-template-home_page .home-post-section .row{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px){
  .page-template-template-home_page .home-post-section .row{
    grid-template-columns: 1fr;
  }
}

/* Section title underline colors */
.page-template-template-home_page .section-title{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.page-template-template-home_page .section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 110%;
  background: var(--section-accent, var(--qubit-1));
}

/* cycle per section */
.page-template-template-home_page .home-post-section:nth-of-type(1) .section-title{ --section-accent: var(--qubit-1); }
.page-template-template-home_page .home-post-section:nth-of-type(2) .section-title{ --section-accent: var(--qubit-2); }
.page-template-template-home_page .home-post-section:nth-of-type(3) .section-title{ --section-accent: var(--qubit-3); }
.page-template-template-home_page .home-post-section:nth-of-type(4) .section-title{ --section-accent: var(--qubit-4); }
.page-template-template-home_page .home-post-section:nth-of-type(5) .section-title{ --section-accent: var(--qubit-1); }
.page-template-template-home_page .home-post-section:nth-of-type(6) .section-title{ --section-accent: var(--qubit-2); }

/* HOME: "More" button should be black text */
.section-more,
.section-more:visited,
.section-more:hover,
.section-more:active,
.section-more:focus{
  color: #000 !important;
}
.section-more i{
  color: #000 !important;
  --fa-primary-color: #000 !important;
  --fa-secondary-color: #000 !important;
}

/* ==========================================================================
   HOME PAGE — SECTION HEADER / MORE BUTTON
   ========================================================================== */

.page-template-template-home_page .section-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.page-template-template-home_page .section-title{
  margin: 0;
}

.page-template-template-home_page .section-more,
.page-template-template-home_page .section-more.section-more--btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
}

.page-template-template-home_page .section-more i,
.page-template-template-home_page .section-more.section-more--btn i{
  line-height: 1;
}

/* Mobile: show only arrow icon, keep text in HTML for SEO/accessibility */
@media (max-width: 767.98px){
  .page-template-template-home_page .section-head{
    align-items: center;
  }

  .page-template-template-home_page .section-title{
    margin-right: auto;
  }

  .page-template-template-home_page .section-more,
  .page-template-template-home_page .section-more.section-more--btn{
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    gap: 0 !important;
  }

  .page-template-template-home_page .section-more-text{
    display: none !important;
  }

  .page-template-template-home_page .section-more i,
  .page-template-template-home_page .section-more.section-more--btn i{
    display: inline-block !important;
    font-size: 1.25rem;
    line-height: 1;
    margin: 0 !important;
  }
}

/* ==========================================================================
   HOME — PHRASES
   ========================================================================== */
.page-template-template-home_page .home-phrase-wrap{
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 22px 0;
}

.page-template-template-home_page .home-phrase{
  width: 100%;
  background: var(--phrase-bg, #000);
  color: var(--phrase-fg, #fff);

  text-align: center;
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.3;

  padding: 18px 20px;
}