/* ==========================================================================
   Grano Line, Specifičnosti stranica + brejkpointi
   ========================================================================== */

/* --------------------------------------------------------------------------
   Početna
   -------------------------------------------------------------------------- */

.home-gallery__stage {
  margin-top: var(--sp-8);
  aspect-ratio: 16 / 9;
  background: var(--c-placeholder);
  overflow: hidden;
}

.home-gallery__stage img { width: 100%; height: 100%; object-fit: cover; }

.home-gallery__more { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   O nama
   -------------------------------------------------------------------------- */

.about-figure {
  margin: var(--sp-9) 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.about-figure img { width: 100%; height: 100%; object-fit: cover; }

.why-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-9);
  align-items: center;
}

.why-split__body p + p { margin-top: var(--sp-4); }
.why-split__body { font-size: var(--fs-lead); line-height: var(--lh-relaxed); }

/* --------------------------------------------------------------------------
   Ponuda
   -------------------------------------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: center;
}

.product + .product { margin-top: var(--sp-11); }

.product:nth-child(even) .product__media { order: 2; }

.product__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-placeholder);
}

.product__media img { width: 100%; height: 100%; object-fit: cover; }

.product__title { margin-bottom: var(--sp-4); }

.product__text { line-height: var(--lh-relaxed); }

.product__list { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

.product__list li {
  position: relative;
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-sm);
}

.product__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--c-brand);
}

/* --------------------------------------------------------------------------
   CE oznaka
   -------------------------------------------------------------------------- */

.prose-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-9);
  align-items: start;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
}

.prose-2col p + p { margin-top: var(--sp-4); }

.prose-2col--gap { margin-top: var(--sp-6); }

.section__lead--spaced { margin-top: var(--sp-5); }
.section__lead--form   { margin-bottom: var(--sp-7); }

.ce-figure {
  margin: var(--sp-9) 0 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--c-placeholder);
}

.ce-figure img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-9);
  align-items: start;
}

.contact-aside { display: grid; gap: var(--sp-7); }

.contact-block__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.contact-block a:hover { color: var(--c-brand); }

.contact-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-placeholder);
}

.contact-figure img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Sitemap / pravni tekst
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; font-size: var(--fs-lead); line-height: var(--lh-relaxed); }
.prose h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.prose h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose p + p { margin-top: var(--sp-4); }
.prose ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }

.prose ul li {
  position: relative;
  padding-inline-start: var(--sp-5);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  background: var(--c-brand);
}

.prose a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 4px; }

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}

.sitemap-grid h2 { margin-top: 0; font-size: var(--fs-h3); }

/* ==========================================================================
   Brejkpointi
   ========================================================================== */

/* --- ≤1440px: kontejner već fluidan, samo mreža galerije ------------------ */
/* --- ≤1024px (tablet landscape) ------------------------------------------ */
@media (max-width: 1024px) {
  .detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) 0; }
  .icon-grid__item:nth-child(odd)  { padding-inline-start: 0; }
  .icon-grid__item:nth-child(even) { padding-inline-end: 0; }
  .icon-grid__item:nth-child(3)    { border-left: 0; }

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

  .gallery-grid { column-count: 3; }

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

  .split,
  .why-split,
  .contact-layout,
  .prose-2col { gap: var(--sp-7); }
}

/* --- ≤900px: mobilna navigacija (vidi layout.css) ------------------------- */

/* --- ≤768px (tablet portrait / veliki telefoni) --------------------------- */
@media (max-width: 768px) {
  /* Iskačući panel nema gde da stane na uskom ekranu. Umesto njega, dodir na
     tačku označava i doskroluje odgovarajuću stavku u listi ispod slike. */
  .hotspot { width: 26px; height: 26px; line-height: 26px; }
  .hotspot::before { inset: -6px; }
  .hotspot__panel { display: none; }
  .hotspot-hint { display: none; }
  .detail-list { display: grid; grid-template-columns: minmax(0, 1fr); }

  .split,
  .why-split,
  .product,
  .contact-layout,
  .prose-2col {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .product:nth-child(even) .product__media { order: 0; }
  .product + .product { margin-top: var(--sp-9); }

  .why-split__media { order: -1; }

  .hero { align-items: flex-end; }
  .hero__inner { max-width: none; }

  .feature-card { grid-template-columns: minmax(0, 1fr); }
  .feature-card__media { order: -1; aspect-ratio: 16 / 10; }

  .criteria-grid { grid-template-columns: minmax(0, 1fr); }
  .tile-grid     { grid-template-columns: minmax(0, 1fr); }

  .gallery-grid { column-count: 2; }

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

  .sitemap-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }

  .lightbox__btn--prev { left: var(--sp-3); }
  .lightbox__btn--next { right: var(--sp-3); }

  .cta { padding: var(--sp-8) var(--sp-5); }
}

/* --- ≤560px --------------------------------------------------------------- */
@media (max-width: 560px) {
  .slider--cards .slider__slide,
  .slider--quotes .slider__slide { width: 86vw; }

  .home-gallery__stage { aspect-ratio: 4 / 3; }
  .ce-figure { aspect-ratio: 4 / 3; }

  .btn { width: 100%; }
  .hero__actions .btn { width: auto; }
}

/* --- ≤380px (do 320px) ---------------------------------------------------- */
@media (max-width: 380px) {
  .gallery-grid { column-count: 1; }

  .brand__name { font-size: 1rem; }
  .brand__sub  { font-size: 0.875rem; }

  .criteria-card { flex-direction: column; align-items: flex-start; }

  .footer-social__link { width: 40px; height: 40px; }
}