/* ==========================================================================
   MILEX d.o.o. — HOMEPAGE (template T1)
   Section order: page head → hero → category grid → services → article
   carousel → partner strip. Shared components live in components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   A full-width 16:9 slot holding three crossfading landscape photographs, with
   a fixed headline block overlaid on their left, sitting on a full-bleed
   decorative band that starts part-way down the image and runs past its lower
   edge. Only the photograph changes — the text never moves or re-animates.
   -------------------------------------------------------------------------- */

.s-hero {
  position: relative;
  isolation: isolate;
  padding-bottom: 154px;
}

.s-hero__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  bottom: 0;
  z-index: 0;
  background: var(--milex-blue-100);
  pointer-events: none;
}

.s-hero > .l-container {
  position: relative;
  z-index: 1;
}

/* The slot owns the size; every slide is stretched into it. */
.s-hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

/* All three slides are stacked in the same box, so the box height never
   depends on which one is showing and the crossfade cannot shift the layout. */
.s-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--t-hero) var(--ease-inout);
}

.s-hero__slide.is-active { opacity: 1; }

/* Left-to-right darkening so the white headline, paragraph and button stay
   readable over the photograph. Transparent by the 68% mark. */
.s-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(28, 28, 46, .88) 0%,
    rgba(28, 28, 46, .72) 28%,
    rgba(28, 28, 46, .35) 48%,
    rgba(28, 28, 46, 0)   68%
  );
}

.s-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 34px;
  padding: 48px var(--gutter);
}

.s-hero__title {
  font-size: var(--fs-h1-hero-fluid);
  color: var(--paper-soft);
  max-width: 560px;
}

.s-hero__lead {
  max-width: 560px;
  font-size: var(--fs-lead);
  color: var(--paper-soft);
}

/* Pagination — bottom right, inset 32px, above the text layer so the dots stay
   clickable where the two overlap. */
.s-hero__dots {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 3;
  display: flex;
  gap: 10px;
}

.s-hero__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, .45);
  transition: background var(--t-fast) var(--ease);
}

/* The dot stays 10px, but the tappable area is 24px — below that it fails the
   minimum target size and is genuinely hard to hit on a phone. */
.s-hero__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
}

.s-hero__dot:hover,
.s-hero__dot.is-active { background: #FFFFFF; }

/* Autoplay pause control. Off-screen visually but present in the accessibility
   tree and in the tab order, and it reveals itself the moment it takes focus —
   an auto-advancing carousel needs a stop that does not require a mouse.
   opacity (not visibility) so it stays focusable. */
.s-hero__pause {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 3;
  padding: 10px 16px;
  background: var(--milex-blue);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-btn);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.s-hero__pause:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.s-hero__pause[hidden] { display: none; }

/* --------------------------------------------------------------------------
   2. Category cards
   -------------------------------------------------------------------------- */

.s-categories { padding-block: var(--space-section); }

.s-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  align-items: stretch;
}

.s-categories__cta {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

/* --------------------------------------------------------------------------
   3. Services — white text card overlapping the photo from the left
   -------------------------------------------------------------------------- */

.s-services { padding-block: var(--space-section-tight); }

.s-services__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}

.s-services__media {
  position: relative;
  grid-column: 4 / -1;
  grid-row: 1;
  margin: 0;
}

/* Light band riding above the photo's top edge — same treatment as the hero. */
.s-services__band {
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  height: 48px;
  background: var(--milex-blue-100);
  pointer-events: none;
}

.s-services__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.s-services__card {
  grid-column: 1 / 6;
  grid-row: 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 64px 56px 64px 45px;
  background: var(--paper);
}

.s-services__body { max-width: 46ch; }

/* --------------------------------------------------------------------------
   4. Article carousel ("Svet zavarivanja")
   -------------------------------------------------------------------------- */

/* Nothing in this section carries a height of its own: the slide ratio comes
   from .c-card--article, so the Swiper wrapper, the section and the decorative
   band all collapse onto the real content height. */
.s-blog {
  position: relative;
  isolation: isolate;
  padding-block: 90px;
}

.s-blog__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;
  bottom: 0;
  z-index: 0;
  background: var(--milex-blue-100);
  pointer-events: none;
}

.s-blog > .l-container {
  position: relative;
  z-index: 1;
}

.s-blog__title { margin-bottom: 48px; }

.s-blog__swiper { overflow: hidden; }

/* No-JS / pre-init fallback: a native horizontal scroller rather than a
   single visible slide. Content stays reachable without JavaScript. */
.s-blog__swiper:not(.swiper-initialized) { overflow-x: auto; }

.s-blog__swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: var(--grid-gap);
}

.s-blog__swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 calc((100% - var(--grid-gap)) / 2);
}

.s-blog__pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* Swiper's own bullet styles are overridden here — the stylesheet is loaded
   ahead of ours precisely so these win. */
.s-blog__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  margin: 0;
  border-radius: 0;
  background: var(--muted);
  opacity: .55;
  transition: background var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.s-blog__pagination .swiper-pagination-bullet:hover { opacity: .85; }

.s-blog__pagination .swiper-pagination-bullet-active {
  background: var(--milex-blue);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Partner logo strip
   -------------------------------------------------------------------------- */

.s-partners {
  padding-block: 90px;
  background: var(--paper);
}

.s-partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px 80px;
}

/* An explicit height (rather than max-height) lets the browser derive the box
   from the width/height attributes before the file arrives — otherwise the
   strip collapses to zero and reflows on load. */
.s-partners__logo {
  height: 64px;
  width: auto;
  filter: grayscale(1);
  opacity: .75;
  transition: filter var(--t-media) var(--ease),
              opacity var(--t-media) var(--ease);
}

.s-partners__item:hover .s-partners__logo,
.s-partners__item:focus-visible .s-partners__logo {
  filter: grayscale(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   6. Homepage responsive rules
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  .s-hero { padding-bottom: 120px; }
  .s-hero__content { gap: 28px; }
  .s-services__card { padding: 52px 44px 52px 36px; }
}

@media (max-width: 1199px) {
  .s-hero__title,
  .s-hero__lead { max-width: 460px; }
  .s-services__card { grid-column: 1 / 7; }
}

/* Two-column category grid; nav has already collapsed at 992. */
@media (max-width: 1119px) {
  .s-categories__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Below 992 the hero grows taller, the gradient turns vertical and the text
   sits over the lower half of the image. The services block stops overlapping. */
@media (max-width: 991px) {
  .s-hero { padding-bottom: 90px; }

  .s-hero__band { top: 62%; }

  /* Height is driven by the text block; the image fills behind it, so a long
     paragraph can never overflow a fixed-ratio box. */
  .s-hero__media {
    aspect-ratio: auto;
    min-height: 480px;
  }

  /* The text block rejoins the flow below 992, so the dots and the pause
     control move to the top of the photograph — at the bottom they would land
     on top of the full-width CTA button. */
  .s-hero__dots {
    top: 24px;
    right: 24px;
    bottom: auto;
  }

  .s-hero__pause {
    top: 24px;
    left: 24px;
    bottom: auto;
  }

  /* The ramp reaches full strength before the text block starts (~30% down,
     driven by the length of the lead paragraph) rather than at the midpoint,
     so every line is readable whatever the photograph does. */
  .s-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(28, 28, 46, 0)   0%,
      rgba(28, 28, 46, .28) 15%,
      rgba(28, 28, 46, .82) 30%,
      rgba(28, 28, 46, .90) 100%
    );
  }

  .s-hero__content {
    position: relative;
    inset: auto;
    justify-content: flex-end;
    padding: 150px var(--gutter) 44px;
    gap: 24px;
  }

  .s-hero__title,
  .s-hero__lead { max-width: none; }

  .s-services__inner { grid-template-columns: 1fr; }

  .s-services__media {
    grid-column: 1;
    grid-row: 1;
    margin-top: 48px;
  }

  .s-services__card {
    grid-column: 1;
    grid-row: 2;
    padding: 40px 0 0;
  }

  .s-blog { padding-block: 72px; }
  .s-blog__title { margin-bottom: 36px; }
  .s-blog__pagination { margin-top: 28px; }
}

@media (max-width: 767px) {
  .s-categories__grid { grid-template-columns: 1fr; }

  .s-categories__cta { margin-top: 44px; }

  .s-hero__media { min-height: 420px; }
  .s-hero__content { padding-top: 110px; }

  .s-services__band { top: -32px; height: 32px; }
  .s-services__media { margin-top: 32px; }

  .s-partners { padding-block: 64px; }
  .s-partners__list { gap: 36px 48px; }
  .s-partners__logo { height: 48px; }
}

@media (max-width: 479px) {
  .s-hero { padding-bottom: 64px; }
  .s-partners__logo { height: 40px; }
}