/* =============================================================================
   HOME — coded mosaic that replaces the Creative Elements layout.
   8 clickable category tiles. Desktop: 2-col grid, some tiles span both cols.
   Mobile: single column (mobile-specific images via <picture>).
   Loaded only on the home (index) by ikarasport_customassets.
   ========================================================================== */
.ik-home{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  /* Full-bleed: force the whole mosaic to the viewport width regardless of any
     wrapper max-width/flex sizing, so every tile reaches both screen edges. */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
}
.ik-home__tile{
  display:block;
  position:relative;
  overflow:hidden;
  line-height:0;
  background:#0c0a09;
}
.ik-home__tile--full{ grid-column:1 / -1; }
/* Full-bleed: break out of the grid's max-width + padding so the banner
   spans the whole viewport edge-to-edge (subscribe CTA). */
.ik-home__tile--bleed{
  grid-column:1 / -1;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.ik-home__tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Mobile: single column, tiles stack; the <picture> swaps to mobile artwork. */
@media (max-width:768px){
  .ik-home{ grid-template-columns:1fr; gap:0; padding:0; }
  .ik-home__tile{ grid-column:1 / -1; }
}

/* =============================================================================
   Home content blocks recoded off Creative Elements (brand text, reassurance
   bar, Instagram divider). Rendered after the tile mosaic in hookDisplayHome.
   ========================================================================== */
.ik-about{
  max-width:1000px;
  margin:0 auto;
  padding:8rem 1.25rem 6rem;
  text-align:center;
}
/* Brand font (BebasNeue, like the rest of the site) but with the home's own
   responsive sizing — selector carries 2 classes to win over ce-kit's
   `body[class] h2` (which would otherwise force a fixed 60px). */
.ik-about .ik-about__h{
  font-family:'BebasNeue', sans-serif;
  font-size:clamp(1.9rem, 5vw, 3.4rem);
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#0c0a09;
  margin:0 0 1.3rem;
  line-height:1.05;
}
.ik-about__p{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.75;
  color:#444;
  margin:0;
}

/* Reassurance bar — full-bleed, dark, 4 equal columns. */
.ik-feats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#0c0a09;
  color:#fff;
}
.ik-feats__item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(170px, 24vw, 250px);
  padding:2.5rem 1.5rem;
  text-align:center;
  font-size:clamp(1rem, 1.5vw, 1.4rem);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.45;
  text-transform:uppercase;
  border-left:1px solid rgba(255,255,255,.1);
}
.ik-feats__item:first-child{ border-left:0; }

/* Instagram divider — centered label flanked by hairlines. */
.ik-ig{
  text-align:center;
  padding:5.5rem 1rem;
}
.ik-ig__link{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  color:inherit;
  text-decoration:none;
  font-size:clamp(1.05rem, 2.2vw, 1.6rem);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ik-ig__link::before,
.ik-ig__link::after{
  content:"";
  display:inline-block;
  width:64px;
  height:1px;
  background:currentColor;
  opacity:.35;
}

@media (max-width:768px){
  /* Single column => no paired tiles => no height-mismatch strips, so show each
     mobile image at its OWN natural aspect, full-width: height:auto + aspect-ratio
     :auto override the desktop width/height attrs that would otherwise letterbox
     the mobile art into a 2:1 box and crop it (e.g. the ÚNETE banner). */
  .ik-home__tile img{ height:auto; }
  .ik-about{ padding:4rem 1.1rem 3rem; }
  .ik-feats{ grid-template-columns:1fr 1fr; }
  .ik-feats__item:nth-child(odd){ border-left:0; }
  .ik-feats__item:nth-child(3),
  .ik-feats__item:nth-child(4){ border-top:1px solid rgba(255,255,255,.1); }
  .ik-ig__link{ gap:.6rem; }
  .ik-ig__link::before,
  .ik-ig__link::after{ width:36px; }
}