/*
Theme Name: Astra Child
Template: astra
*/

/* =============================================================
   GLOBAL FIX (ASTRA)
   ============================================================= */

.site-content .ast-container {
    display: block !important;
}

/* =============================================================
   CPT LAYOUT VARIJABLE
   ============================================================= */

.single-aktualni-projekti {
    --imag-content-width: 1440px;
    --imag-px: clamp(20px, 4vw, 80px);
}

/* =============================================================
   HERO (wp-block-cover)
   ============================================================= */

.single-aktualni-projekti .wp-block-cover {
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.single-aktualni-projekti .wp-block-cover__image-background {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0;
    border-radius: 0 !important;
}

.single-aktualni-projekti .wp-block-cover__background {
    z-index: 1;
}

.single-aktualni-projekti .wp-block-cover__inner-container {
    position: relative;
    z-index: 3;
}

.single-aktualni-projekti .entry-content {
    padding-top: 0 !important;
}

/* =============================================================
   LAYOUT KLASE — razmaci kao u wireframeu
   ============================================================= */

/*
 * Logika vertikalnog razmaka:
 *
 *  .imag-full (intro, CTA) → 40px top/bottom — colored sections
 *  .imag-nav               → 15px top/bottom — kompaktna navigacija
 *  .imag-section (outer)   → 30px top/bottom — svaka content sekcija
 *  .imag-content (inner)   → 20px top, 0 bottom — prostor ispod section-title
 *
 * Između sekcija: 30px (bottom) + 30px (top) = 60px — kao wireframe.
 * Globalni CSS ima padding: 40px !important pa sve override-amo.
 */

/* ── Intro + CTA: colored, full width ────────────────────────── */
.single-aktualni-projekti .imag-full {
    padding-top:    40px !important;
    padding-bottom: 40px !important;
    padding-left:  var(--imag-px) !important;
    padding-right: var(--imag-px) !important;
}

/* ── Nav: constrained, kompaktan ─────────────────────────────── */
.single-aktualni-projekti .imag-nav {
    max-width: var(--imag-content-width);
    margin-left:  auto !important;
    margin-right: auto !important;
    padding-top:    40px !important;
    padding-bottom: 15px !important;
    padding-left:  var(--imag-px) !important;
    padding-right: var(--imag-px) !important;
}

/* ── Outer sekcije: full width, section-title do ruba ────────── */
.single-aktualni-projekti .imag-section {
    padding-top:    30px !important;
    padding-bottom: 30px !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ── Inner sadržaj: constrained, prostor ispod section-title ─── */
.single-aktualni-projekti .imag-content {
    max-width: var(--imag-content-width);
    width: 100%;
    margin-left:  auto !important;
    margin-right: auto !important;
    padding-top:    40px !important;
    padding-bottom: 0 !important;
    padding-left:  var(--imag-px) !important;
    padding-right: var(--imag-px) !important;
    box-sizing: border-box;
}

/* ── Section title: poništi default h2 margine ───────────────── */
.single-aktualni-projekti .section-title {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
    width: 100%;
}

/* =============================================================
   KOLONE — eksplicitni flex
   (block library CSS možda nije učitan za PHP template)
   ============================================================= */

.single-aktualni-projekti .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 48px;
}

.single-aktualni-projekti .wp-block-columns.are-vertically-aligned-center {
    align-items: center;
}

.single-aktualni-projekti .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Razmak između dva reda kolona unutar iste sekcije (Gradnja) */
.single-aktualni-projekti .imag-content .wp-block-columns + .wp-block-columns {
    margin-top: 40px;
}

/* =============================================================
   NAV KOLONE — gap 0, manji tekst (samo za nav)
   ============================================================= */

.single-aktualni-projekti .imag-nav-columns {
    gap: 0 !important;
    flex-wrap: wrap;
}

.single-aktualni-projekti .imag-nav-columns .wp-block-column h3 {
    margin-bottom: 5px;
}

.single-aktualni-projekti .imag-nav-columns .wp-block-column p {
    margin-top: 0;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Sav tekst unutar content kolona — inherit = default teme */
.single-aktualni-projekti .imag-content p,
.single-aktualni-projekti .imag-content li,
.single-aktualni-projekti .imag-full p,
.single-aktualni-projekti .imag-full li {
    font-size: inherit !important;
    opacity: 1 !important;
}

/* Paragrafii unutar kolona — bez max-width ograničenja */
.single-aktualni-projekti .imag-content .wp-block-column p {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Centrirani paragrafi (podnaslov/opis) — mogu imati max-width */
.single-aktualni-projekti .imag-content > p.has-text-align-center,
.single-aktualni-projekti .imag-content > .wp-block-group > p.has-text-align-center,
.single-aktualni-projekti .imag-full > p.has-text-align-center {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =============================================================
   SLIKE
   ============================================================= */

.single-aktualni-projekti .imag-content figure.wp-block-image {
    margin: 0;
    width: 100%;
}

.single-aktualni-projekti .imag-content figure.wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================
   KARTA (iframe)
   ============================================================= */

.single-aktualni-projekti .wp-block-column iframe {
    width: 100%;
    height: 480px;
    display: block;
    border: 0;
    border-radius: 10px;
}

/* =============================================================
   LISTE
   ============================================================= */

.single-aktualni-projekti ul.wp-block-list {
    padding-left: 18px;
    margin-top: 8px;
}

.single-aktualni-projekti ul.wp-block-list li {
    margin-bottom: 8px;
    font-size: inherit;
}

/* =============================================================
   UNIFORMNI VERTIKALNI RAZMACI
   ============================================================= */

/* svi headingi koji imaju crvenu crtu ispod */
.single-aktualni-projekti .imag-content h3 {
    margin-bottom: 16px !important;
}

/* reset paragraf margina unutar contenta */
.single-aktualni-projekti .imag-content p {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* liste */
.single-aktualni-projekti ul.wp-block-list {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 18px;
}

/* svaki list item isti */
.single-aktualni-projekti ul.wp-block-list li {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.6;
}

/* zadnji item bez dodatnog razmaka */
.single-aktualni-projekti ul.wp-block-list li:last-child {
    margin-bottom: 0 !important;
}

/* paragraph unutar li NE SMIJE dodavati extra spacing */
.single-aktualni-projekti ul.wp-block-list li p {
    margin: 0 !important;
    padding: 0 !important;
}

.single-aktualni-projekti .imag-content h3 {
    margin-bottom: 16px !important;
}

.single-aktualni-projekti .imag-content h4 {
    margin-bottom: 16px !important;
}

/* =============================================================
   GUMBI
   ============================================================= */

.single-aktualni-projekti .wp-block-buttons.is-content-justification-center {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 40px;
}

/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 768px) {

    .single-aktualni-projekti .imag-full,
    .single-aktualni-projekti .imag-nav,
    .single-aktualni-projekti .imag-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Stack sadržajne kolone */
    .single-aktualni-projekti .imag-content .wp-block-columns,
    .single-aktualni-projekti .imag-content .wp-block-columns.are-vertically-aligned-center {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Nav: 2x2 grid */
    .single-aktualni-projekti .imag-nav-columns {
        flex-wrap: wrap !important;
    }
    .single-aktualni-projekti .imag-nav-columns .wp-block-column {
        flex: 1 1 45%;
        min-width: 45%;
    }

    .single-aktualni-projekti .imag-content .wp-block-columns + .wp-block-columns {
        margin-top: 24px;
    }

    .single-aktualni-projekti .wp-block-column iframe {
        height: 280px;
    }

    .single-aktualni-projekti h1 { font-size: 28px; }
    .single-aktualni-projekti h2 { font-size: 22px; }
}

@media (max-width: 480px) {

    .single-aktualni-projekti .imag-full,
    .single-aktualni-projekti .imag-nav,
    .single-aktualni-projekti .imag-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .single-aktualni-projekti .imag-nav-columns .wp-block-column {
        flex: 1 1 100%;
    }
}