/* renovation-webflow-04-hr — nadogradnja povrh vendorovog stylesheeta.
 *
 * Vendorov CSS se NE mijenja. Ovdje su samo dvije stvari kojih u izvornom
 * templateu nema: modul projekata i vidljiva napomena na oglednim obrascima.
 *
 * Sve vrijednosti koriste vendorove design tokene, pa modul projekata nasljeđuje
 * isti razmak, radijus, tipografiju i boje kao i ostatak predloška.
 */

/* --------------------------------------------------------------- projekti --
 * Kartica projekta je kartica usluge dvostruke širine: u mreži usluga stane
 * četiri kartice u red, u mreži projekata dvije. Time projekt vizualno "teži"
 * kao dvije usluge, a nijedan drugi parametar dizajna se ne mijenja.
 */
.project-list {
  grid-column-gap: var(--_sizes---gaps--gap-07);
  grid-row-gap: var(--_sizes---gaps--gap-07);
  grid-template-rows: auto;
  /* minmax(0, 1fr) so a long title cannot push one column wider than the other. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-columns: 1fr;
  display: grid;
}

.single-project {
  grid-column-gap: var(--_sizes---gaps--gap-06);
  grid-row-gap: var(--_sizes---gaps--gap-06);
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

/* Veća kartica podnosi viši kadar; omjer ostaje pejzažni kao kod referenci. */
.single-project .service-thumbnail-wrapper {
  border-radius: var(--_sizes---radius--radius-03);
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.project-thumbnail {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.project-title-wrapper {
  grid-column-gap: var(--_sizes---gaps--gap-07);
  grid-row-gap: var(--_sizes---gaps--gap-07);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  position: relative;
}

/* Naslov projekta smije biti širi od naslova usluge jer kartica ima dvostruku
 * širinu; ostali tipografski parametri su isti kao `.service-title`. */
.project-title {
  max-width: 340px;
  color: var(--_colors---natural-04);
  font-size: var(--font-sizes--body-02);
  line-height: var(--line-height--2xl);
  font-weight: var(--font-weight--semibold);
  letter-spacing: var(--letter-spacing--s);
}

/* Jedini novi element u odnosu na karticu usluge. */
.project-meta {
  margin: 4px 0 0;
  color: var(--_colors---natural-03);
  font-size: var(--font-sizes--body-01);
  line-height: var(--line-height--xl);
  letter-spacing: var(--letter-spacing--s);
}

.project-title-wrapper > .project-meta {
  flex: 1 1 auto;
  text-align: right;
  padding-left: var(--_sizes---gaps--gap-06);
}

/* Below the desktop breakpoint the service grid drops to two columns. A project
 * card must stay visibly larger than a service card, so it goes to one column
 * here rather than shrinking below service width. */
@media screen and (max-width: 991px) {
  .project-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .single-project .service-thumbnail-wrapper {
    height: 380px;
  }
  .project-title {
    max-width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .single-project .service-thumbnail-wrapper {
    height: 280px;
  }
  .project-title-wrapper {
    flex-flow: column;
    align-items: flex-start;
    gap: 6px;
  }
  .project-title-wrapper > .project-meta {
    text-align: left;
    padding-left: 0;
  }
}

/* ---------------------------------------------------- ogledni obrazac ----
 * Obrasci u predlošku ne šalju podatke. Napomena je vidljiva i bez
 * JavaScripta, jer se ispisuje u markupu, a ne nakon interakcije.
 */
.demo-form-notice {
  margin: 12px 0 0;
  color: var(--_colors---natural-03);
  font-size: var(--font-sizes--body-01);
  line-height: var(--line-height--xl);
}

/* --------------------------------------------------------------- tekst usluge --
 * Vendorov predložak nema stranicu usluge s dužim tekstom — kad se u nju upiše
 * stvaran opis, redak ide preko cijele širine i redovi se stisnu jedan uz drugi.
 * Ovdje se postavlja mjera retka i prozračniji razmak, sve preko vendorovih
 * tokena, bez diranja njegovog stylesheeta.
 */
.service-content-wrapper p,
.service-details-wrapper p,
.single-service-content p,
.service-overview p {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.service-content-wrapper p + p,
.service-details-wrapper p + p,
.single-service-content p + p,
.service-overview p + p {
  margin-top: var(--_sizes---gaps--gap-04, 16px);
}
.service-content-wrapper h2,
.service-content-wrapper h3,
.service-details-wrapper h2,
.service-details-wrapper h3 {
  margin-top: var(--_sizes---gaps--gap-06, 32px);
  margin-bottom: var(--_sizes---gaps--gap-03, 12px);
}
/* popis „što je uključeno" — stavke su bile priljubljene jedna uz drugu */
.service-include-list li,
.service-list-item,
.include-list-item { line-height: 1.6; padding-block: 2px; }

/* ---------------------------------------------------------------- galerija reference
   Predložak ima jedno mjesto za sliku po referenci. Ostale fotografije istog posla idu ispod
   teksta u mrežu, da se referenca vidi, a ne samo pročita. */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 32px 0 8px;
}
.project-gallery-item { margin: 0; }
.project-gallery-item img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--_sizes---radius--radius-03, 12px);
}
@media (max-width: 767px) {
  .project-gallery { grid-template-columns: 1fr; gap: 12px; }
  .project-gallery-item img { height: 220px; }
}