/* ==========================================================================
   Klima S Sistem
   pages.css

   Stilovi specifični za stranice:
   - Home
   - Services
   - Pricing
   - Contact
   ========================================================================== */



/* ==========================================================================
   HOME PAGE
   ========================================================================== */


/* Hero naslovna strana */

.home-hero {

    background:

        linear-gradient(
            rgba(8,56,95,.75),
            rgba(8,56,95,.75)
        ),

        url("../images/hero/hero-home.jpg");

    background-size:cover;

    background-position:center;

}



/* Brojevi / statistika */

.stats {

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:2rem;

}



.stats__item {

    text-align:center;

}



.stats__number {

    display:block;

    font-size:2.5rem;

    font-weight:var(--font-weight-bold);

    color:var(--color-primary);

}



.stats__label {

    color:var(--color-gray-500);

}



/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */


.services-intro {

    max-width:800px;

    margin-inline:auto;

    text-align:center;

}



/* detalji usluge */

.service-detail {

    display:grid;

    grid-template-columns:

        1fr 1fr;

    gap:3rem;

    align-items:center;

}



.service-detail__image img {

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

}



.service-detail__content h2 {

    margin-bottom:1rem;

}





/* ==========================================================================
   PRICING PAGE
   ========================================================================== */


.pricing-note {

    margin-top:3rem;

    padding:1.5rem;

    background:var(--color-gray-100);

    border-radius:var(--radius-md);

    color:var(--color-gray-700);

}



.pricing-highlight {

    border:2px solid var(--color-primary);

    position:relative;

}



.pricing-highlight::before {

    content:"Preporučeno";

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);

    padding:.35rem 1rem;

    border-radius:999px;

    background:var(--color-primary);

    color:var(--color-white);

    font-size:.85rem;

    font-weight:600;

}





/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */


.contact-page {

    display:grid;

    grid-template-columns:

        1fr 1fr;

    gap:3rem;

}



.contact-info {

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}



.contact-map {

    min-height:400px;

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-md);

}





/* ==========================================================================
   FAQ
   ========================================================================== */


.faq {

    max-width:900px;

    margin-inline:auto;

}



.faq__item {

    padding:1.5rem 0;

    border-bottom:1px solid var(--color-gray-200);

}



.faq__question {

    font-weight:var(--font-weight-semibold);

    color:var(--color-gray-900);

}



.faq__answer {

    margin-top:.75rem;

    color:var(--color-gray-500);

}