/* ==========================================================================
   Sekcije i predlošci
   ========================================================================== */

/* Pojavljivanje pri skrolanju (samo uz JS)
   -------------------------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

.stars {
    display: inline-flex;
    gap: 2px;
    color: var(--c-lime);
}

.section-foot {
    margin-top: var(--s-8);
    text-align: center;
}

/* Naslov sekcije s tekstom ili poveznicom sa strane */
.split-head {
    display: grid;
    gap: var(--s-5);
    margin-bottom: var(--s-8);
}

.split-head .section-head {
    margin-bottom: 0;
}

.split-text > :last-child {
    margin-bottom: 0;
}

.split-text .link-arrow {
    margin-top: var(--s-2);
}

@media (min-width: 900px) {
    .split-head {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-9);
        align-items: end;
    }

    .split-head--end {
        grid-template-columns: 1fr auto;
    }
}

/* Brze poveznice
   -------------------------------------------------------------------------- */
.quick-links {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--s-7) * -1);
}

.quick-links-grid {
    display: grid;
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
}

.quick-link {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5);
    color: var(--c-ink);
    text-decoration: none;
    border-top: 1px solid var(--c-border);
    transition: background var(--t-fast);
}

.quick-link:first-child {
    border-top: 0;
}

.quick-link:hover {
    color: var(--c-ink);
    background: var(--c-green-50);
}

.quick-link .card-icon {
    width: 3rem;
    height: 3rem;
    margin: 0;
}

.quick-link .text {
    flex: 1;
    line-height: 1.35;
}

.quick-link strong {
    display: block;
    font-family: var(--font-display);
}

.quick-link small {
    color: var(--c-text-muted);
}

.quick-link > .icon-arrow {
    color: var(--c-forest);
    transition: transform var(--t-fast);
}

.quick-link:hover > .icon-arrow {
    transform: translateX(3px);
}

@media (min-width: 900px) {
    .quick-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-link {
        padding: var(--s-5) var(--s-6);
        border-top: 0;
        border-left: 1px solid var(--c-border);
    }

    .quick-link:first-child {
        border-left: 0;
    }
}

/* Usluge
   -------------------------------------------------------------------------- */
.card-service {
    position: relative;
}

.card-service .card-icon img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.card-service h3 a {
    color: inherit;
    text-decoration: none;
}

/* Cijela kartica je poveznica na uslugu */
.card-service h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.card-service:hover {
    border-color: var(--c-green-200);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
}

.card-service:hover .link-arrow .icon {
    transform: translateX(3px);
}

.card-links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
}

.card-links a,
.card-links .more {
    display: block;
    padding: var(--s-1) var(--s-3);
    color: var(--c-ink-700);
    text-decoration: none;
    background: var(--c-ink-50);
    border-radius: var(--r-pill);
}

.card-links a:hover {
    color: var(--c-forest-700);
    background: var(--c-green-100);
}

.children-grid {
    margin-top: var(--s-8);
}

.entry-content--intro {
    max-width: var(--container-narrow);
    font-size: var(--fs-md);
}

/* Tim
   -------------------------------------------------------------------------- */
.card-doctor h3 {
    margin-bottom: var(--s-1);
    font-size: var(--fs-md);
}

.s-team .grid--4,
.team-group .grid--4 {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
    .s-team .grid--4,
    .team-group .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tekst i slika
   -------------------------------------------------------------------------- */
.media-grid {
    display: grid;
    gap: var(--s-7);
    align-items: center;
}

.media-figure {
    margin: 0;
}

.media-figure img {
    width: 100%;
    border-radius: var(--r-lg);
}

.media-figure--contain img {
    max-width: 22rem;
    margin-inline: auto;
    border-radius: 0;
}

.media-figure figcaption {
    margin-top: var(--s-4);
    padding-left: var(--s-4);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--c-ink-700);
    border-left: 3px solid var(--c-lime);
}

.media-text .btn {
    margin-top: var(--s-6);
}

@media (min-width: 900px) {
    .media-grid {
        grid-template-columns: 5fr 6fr;
        gap: var(--s-10);
    }

    .media-grid--right {
        grid-template-columns: 6fr 5fr;
    }

    .media-grid--right .media-figure {
        order: 2;
    }
}

/* Brojke
   -------------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
    margin: 0;
}

.stats dt {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 300;
    line-height: 1;
    color: var(--c-forest);
}

.section--forest .stats dt,
.section--ink .stats dt {
    color: var(--c-lime-soft);
}

.stats dd {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-sm);
}

@media (min-width: 900px) {
    .stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Recenzije
   -------------------------------------------------------------------------- */
.rating-box {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.rating-box strong {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 300;
    line-height: 1;
}

.rating-box .stars {
    display: flex;
    color: var(--c-forest);
}

.slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(85%, 26rem);
    gap: var(--s-5);
    overflow-x: auto;
    padding-bottom: var(--s-2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.review {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--s-6);
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    scroll-snap-align: start;
}

.review .stars {
    margin-bottom: var(--s-4);
    color: var(--c-forest);
}

.review blockquote {
    margin: 0 0 var(--s-5);
    font-size: var(--fs-sm);
}

.review figcaption {
    margin-top: auto;
    font-family: var(--font-display);
    font-weight: 700;
}

.slider-nav {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.slider-nav button {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--c-ink);
    background: none;
    border: 1px solid var(--c-ink);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}

.slider-nav button:hover {
    color: var(--c-white);
    background: var(--c-ink);
}

.slider-nav button:disabled {
    opacity: .3;
    pointer-events: none;
}

.slider-nav [data-prev] .icon {
    transform: rotate(180deg);
}

/* Galerija
   -------------------------------------------------------------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}

.gallery a {
    display: block;
    overflow: hidden;
    border-radius: var(--r-md);
}

.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.gallery a:hover img {
    transform: scale(1.05);
}

@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(5, 1fr); } }

.lightbox {
    max-width: min(92vw, 70rem);
    max-height: 92vh;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
}

.lightbox::backdrop {
    background: rgb(35 31 32 / .88);
}

.lightbox img {
    max-height: 88vh;
    border-radius: var(--r-md);
}

.lightbox button {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c-ink);
    background: var(--c-white);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* Accordion (FAQ, cjenik, biografija)
   -------------------------------------------------------------------------- */
.accordion details {
    border-bottom: 1px solid var(--c-border);
}

.accordion details:first-child {
    border-top: 1px solid var(--c-border);
}

.accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary:hover {
    color: var(--c-forest);
}

.accordion summary .icon {
    color: var(--c-forest);
    transition: transform var(--t-fast);
}

.accordion details[open] summary .icon {
    transform: rotate(180deg);
}

.accordion details > .entry-content {
    padding-bottom: var(--s-6);
    font-size: var(--fs-sm);
}

.accordion--price details > .entry-content {
    overflow-x: auto;
}

/* Cjenik: usluga + aktualna cijena + cijena na dan (sidrena) */
.cjenik {
    min-width: 38rem;
}

.cjenik td {
    vertical-align: top;
}

.cjenik td:first-child {
    min-width: 14rem;
}

.cjenik td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cjenik small br {
    display: none;
}

.cjenik tr:first-child td,
.cjenik .bz-head2 td {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-ink-700);
    background: var(--c-ink-50);
    vertical-align: bottom;
}

.cjenik .bz-grp {
    text-align: center;
}

/* Naslov skupine usluga unutar tablice */
.cjenik td[colspan="5"],
.cjenik td[colspan="3"],
.cjenik tr:not(:first-child) td[colspan="2"]:first-child {
    padding-top: var(--s-5);
    font-family: var(--font-display);
    text-align: left;
    white-space: normal;
    color: var(--c-forest-700);
    background: var(--c-green-50);
}

/* Aktualna cijena je glavna: istaknuto zaglavlje i podebljani iznosi */
.cjenik tr:first-child .bz-grp:not(.bz-grp--anchor) {
    color: var(--c-white);
    background: var(--c-forest) var(--grad-brand-deep);
}

.cjenik .bz-head2 td:not(.bz-anchor-col) {
    color: var(--c-forest-700);
    background: var(--c-green-100);
}

.cjenik tr:not(:first-child):not(.bz-head2) td:not(:first-child):not(.bz-anchor-col):not([colspan]) {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-ink);
}

/* Sidrena cijena je sporedna: uža, sitnija i prigušena */
.cjenik .bz-anchor-col {
    width: 5rem;
    max-width: 5rem;
    padding-inline: var(--s-2);
    font-size: .8125rem;
    color: var(--c-ink-500);
    background: var(--c-sand-50);
}

.cjenik tr:first-child .bz-grp--anchor {
    width: 10rem;
    max-width: 10rem;
    padding-inline: var(--s-2);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.3;
    white-space: normal;
    color: var(--c-ink-500);
    background: var(--c-sand-200);
}

.cjenik .bz-head2 .bz-anchor-col {
    font-size: .6875rem;
    font-weight: 500;
    color: var(--c-ink-500);
}

.price-note {
    margin-top: var(--s-7);
    padding: var(--s-5) var(--s-6);
    font-size: var(--fs-xs);
    color: var(--c-ink-700);
    background: var(--c-sand-50);
    border-radius: var(--r-md);
}

.price-note > * + *,
.price-note .bz-cjenik-info > * + * {
    margin-top: var(--s-3);
}

.price-note p:last-child {
    margin-bottom: 0;
}

/* Certifikati
   -------------------------------------------------------------------------- */
.certs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-6);
}

.certs a {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    width: 14rem;
    padding: var(--s-6);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
    color: var(--c-ink);
    text-decoration: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.certs a:hover {
    border-color: var(--c-green-200);
    box-shadow: var(--shadow-1);
}

.certs img {
    width: 7.5rem;
    height: 7.5rem;
    object-fit: contain;
}

/* Misija i vizija
   -------------------------------------------------------------------------- */
.s-values .grid {
    gap: var(--s-8);
}

.value {
    padding-left: var(--s-6);
    border-left: 2px solid var(--c-lime);
}

.value .entry-content {
    font-size: var(--fs-lg);
}

/* Naslov stranice sa slikom
   -------------------------------------------------------------------------- */
.page-head .lead {
    max-width: 44rem;
    margin: var(--s-4) 0 0;
}

.page-head--image .container {
    display: grid;
    gap: var(--s-6);
    align-items: center;
}

.page-head-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-lg);
}

@media (min-width: 900px) {
    .page-head--image .container {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-9);
    }
}

/* Sadržaj s bočnom navigacijom
   -------------------------------------------------------------------------- */
.with-sidebar {
    display: grid;
    gap: var(--s-8);
}

.side-nav {
    padding: var(--s-5);
    background: var(--c-green-50);
    border-radius: var(--r-md);
}

.side-nav h2 {
    margin-bottom: var(--s-3);
    font-size: var(--fs-md);
}

.side-nav h2 a {
    color: inherit;
    text-decoration: none;
}

.side-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.side-nav li a {
    display: block;
    padding: var(--s-2) var(--s-3);
    line-height: 1.4;
    color: var(--c-ink-700);
    text-decoration: none;
    border-left: 2px solid var(--c-green-200);
}

.side-nav li a:hover {
    color: var(--c-forest);
    border-color: var(--c-forest);
}

.side-nav li a[aria-current] {
    font-weight: 700;
    color: var(--c-forest-700);
    background: var(--c-green-100);
    border-color: var(--c-forest);
}

.help-box {
    margin-top: var(--s-5);
    padding: var(--s-6);
    color: var(--c-white);
    background: var(--c-forest) var(--grad-brand-deep);
    border-radius: var(--r-md);
}

.help-box h2 {
    font-size: var(--fs-lg);
    color: var(--c-white);
}

.help-box p {
    font-size: var(--fs-sm);
    color: rgb(255 255 255 / .85);
}

@media (min-width: 1000px) {
    .with-sidebar {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: var(--s-10);
        align-items: start;
    }

    .sidebar {
        position: sticky;
        top: calc(var(--header-h) + var(--s-5));
    }
}

/* Objava
   -------------------------------------------------------------------------- */
.post-image {
    margin-bottom: var(--s-7);
}

.post-image img {
    width: 100%;
    border-radius: var(--r-lg);
}

.pagination {
    margin-top: var(--s-9);
}

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
}

.pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: var(--s-3);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-ink);
    text-decoration: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
}

.pagination .page-numbers:hover {
    border-color: var(--c-forest);
}

.pagination .page-numbers.current {
    color: var(--c-white);
    background: var(--c-forest) var(--grad-brand-deep);
    border-color: var(--c-forest);
}

.search-form {
    display: flex;
    gap: var(--s-3);
    max-width: 36rem;
    margin-bottom: var(--s-8);
}

.search-form label {
    flex: 1;
}

.search-form input[type="search"] {
    width: 100%;
    min-height: 3rem;
    padding: var(--s-3) var(--s-4);
    font: inherit;
    border: 1px solid var(--c-ink-200);
    border-radius: var(--r-pill);
}

.search-form input[type="submit"] {
    min-height: 3rem;
    padding: var(--s-3) var(--s-5);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-white);
    background: var(--c-forest) var(--grad-brand-deep);
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
}

.not-found {
    min-height: 60vh;
    display: grid;
    align-items: center;
}

/* Omotač obrasca na stranici Kontakt */
.form {
    margin-top: var(--s-5);
}