/* =============================================================
   SVIGRAD — custom additions (loaded after style.css)
   Keep bespoke component styles here so the compiled Tailwind
   file stays untouched.
   ============================================================= */

/* --- Project filter: two-tier hierarchy (type = primary, location = secondary) --- */
.project-filter {
   max-width: 64rem;
   margin-inline: auto;
}

/* Tier rows */
.filter-tier {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
}

/* ---------- PRIMARY: type of work ---------- */
.filter-pill {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.72rem 1.4rem;
   border-radius: 0.375rem;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1;
   color: #222222;
   background: #ffffff;
   border: 1px solid var(--color-gray-200, #e6e8e7);
   cursor: pointer;
   transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
   white-space: nowrap;
}

.filter-pill:hover {
   border-color: #1E6FA8;
   color: #1E6FA8;
}

.filter-pill.is-active {
   background: #1E6FA8;
   color: #ffffff;
   border-color: #1E6FA8;
   box-shadow: 0 10px 22px -8px rgba(30, 111, 168, .55);
}

.filter-pill:focus-visible {
   outline: 2px solid #1E6FA8;
   outline-offset: 2px;
}

/* ---------- DIVIDER between tiers ---------- */
.filter-divider {
   width: 100%;
   max-width: 22rem;
   height: 1px;
   margin: 1.5rem auto;
   background: linear-gradient(90deg, transparent, rgba(34, 34, 34, .14), transparent);
}

/* ---------- SECONDARY: location ---------- */
.filter-secondary {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 0.35rem;
}

.filter-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   margin-right: 0.45rem;
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #9aa19d;
   white-space: nowrap;
}

.filter-eyebrow svg {
   width: 0.95rem;
   height: 0.95rem;
   stroke: #9aa19d;
}

.filter-chip {
   display: inline-flex;
   align-items: center;
   padding: 0.42rem 0.85rem;
   border-radius: 0.375rem;
   font-size: 0.9rem;
   font-weight: 500;
   line-height: 1;
   color: #6B726E;
   background: transparent;
   border: 1px solid transparent;
   cursor: pointer;
   transition: color .15s ease, background-color .15s ease;
   white-space: nowrap;
}

.filter-chip:hover {
   color: #1E6FA8;
   background: rgba(220, 234, 244, .45);
}

.filter-chip.is-active {
   color: #1E6FA8;
   background: #DCEAF4;
   font-weight: 600;
}

.filter-chip:focus-visible {
   outline: 2px solid #1E6FA8;
   outline-offset: 2px;
}

/* O nama location tags: default = hover state, hover = active state */
.filter-chip--preset {
   color: #1E6FA8;
   background: rgba(220, 234, 244, .45);
}

.filter-chip--preset:hover {
   background: #DCEAF4;
   font-weight: 600;
}

/* --- Contact form AJAX response + field errors --- */
.contact-form__response {
   padding: 0.85rem 1.1rem;
   border-radius: 0.375rem;
   margin-bottom: 1.25rem;
   font-size: 0.95rem;
   line-height: 1.55;
   border: 1px solid transparent;
}
.contact-form__response.hidden { display: none; }
.contact-form__response--success {
   background: #f0fdf4;
   border-color: #bbf7d0;
   color: #166534;
}
.contact-form__response--error {
   background: #fef2f2;
   border-color: #fecaca;
   color: #991b1b;
}
.contact-form__error {
   font-size: 0.85rem;
   color: #dc2626;
   margin-top: 0.35rem;
   display: block;
}
.contact-form__error.hidden { display: none; }

/* --- Honeypot anti-spam field (never visible to humans) --- */
.svigrad-hp-field {
   position: absolute;
   left: -9999px;
   opacity: 0;
   height: 0;
   width: 0;
   pointer-events: none;
}

/* --- Google recenzije gumb (dno sekcije recenzija) --- */
.testimonials-cta {
   margin-top: 2.75rem;
   text-align: center;
}
.gbtn {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.85rem 1.6rem;
   border-radius: 0.375rem;
   background: #ffffff;
   color: #222222;
   font-weight: 600;
   font-size: 1rem;
   line-height: 1;
   border: 1px solid #d8e3ec;
   box-shadow: 0 1px 3px rgba(34, 34, 34, .06);
   transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
   text-decoration: none;
}
.gbtn:hover {
   color: #1E6FA8;
   border-color: #1E6FA8;
   box-shadow: 0 12px 24px -12px rgba(30, 111, 168, .45);
   transform: translateY(-1px);
}
.gbtn:focus-visible {
   outline: 2px solid #1E6FA8;
   outline-offset: 2px;
}
.gbtn__star  { width: 1.15rem; height: 1.15rem; color: #1E6FA8; flex-shrink: 0; }
.gbtn__arrow { width: 1rem;    height: 1rem;    flex-shrink: 0; }

/* --- Process step numbers: soft ghost numerals (were invisible white on light bg) --- */
.process-step__number {
   color: #B7CFE1;
}

/* --- Consistent vertical rhythm across all content sections ---
   Original export used oversized, uneven paddings (py-28/40, py-32/48 = up
   to 192px) which made sections feel disconnected. Normalize to one scale. */
.section {
   padding-block: 4.5rem;
}

.section-header {
   margin-bottom: 3rem;
}

@media (min-width: 768px) {
   .section {
      padding-block: 6.5rem;
   }

   .section-header {
      margin-bottom: 4rem;
   }
}

/* --- Testimonials --- */
.section--testimonials {
   background: #EDF4F9;
}

.testimonial-card {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   height: 100%;
   padding: 2rem;
   background: #ffffff;
   border: 1px solid #e3ebf1;
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(34, 34, 34, .06);
   transition: box-shadow .25s ease, transform .25s ease;
}

.testimonial-card:hover {
   box-shadow: 0 20px 38px -18px rgba(30, 111, 168, .3);
   transform: translateY(-3px);
}

.testimonial-quote__mark {
   display: block;
   height: 1.4rem;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 3.5rem;
   line-height: 0.9;
   color: #CFE2F0;
}

.testimonial-stars {
   display: inline-flex;
   gap: 0.18rem;
   color: #1E6FA8;
}

.testimonial-stars svg {
   width: 1.15rem;
   height: 1.15rem;
}

.testimonial-text {
   color: #2c302e;
   font-size: 1.0625rem;
   line-height: 1.7;
}

.testimonial-author {
   margin-top: auto;
   padding-top: 0.25rem;
}

.testimonial-author__name {
   font-weight: 600;
   color: #222222;
}

.testimonial-author__meta {
   font-size: 0.85rem;
   color: #6B726E;
}

.testimonial-author__meta strong {
   color: #1E6FA8;
   font-weight: 600;
}