/* ==========================================================================
   MASINKO-CLEAN THEME — responsive overrides
   Single source per breakpoint, grouped by component. Every value here is
   measured against the approved baseline, not guessed.
   ========================================================================== */

@media (max-width: 900px) {
    .mk-nav, .mk .mk-header-row .mk-btn { display: none; }
    .mk-header .mk-burger {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 8px; border: none;
        background: transparent; cursor: pointer;
    }
    .mk-header .mk-burger:hover, .mk-header .mk-burger:focus,
    .mk-header .mk-burger:active { background: transparent; color: inherit; }
    .mk-header .mk-burger-icon { width: 26px; height: 2px; background: var(--c-text); position: relative; }
    .mk-header .mk-burger-icon::before, .mk-header .mk-burger-icon::after {
        content: ''; position: absolute; left: 0; width: 26px; height: 2px; background: var(--c-text);
    }
    .mk-header .mk-burger-icon::before { top: -8px; }
    .mk-header .mk-burger-icon::after { top: 8px; }

    .mk-header .mk-mobile-nav {
        display: none;
        background: var(--c-bg-light);
        padding: 0 24px 24px;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
    }
    .mk-header .mk-mobile-nav.mk-open { display: block; }
    .mk-mobile-list { display: flex; flex-direction: column; }
    .mk-mobile-item { border-top: 1px solid rgba(102,102,102,.2); }
    .mk-header .mk-mobile-trigger {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        background: none; border: none; cursor: pointer; text-align: left;
        font-family: var(--font); color: var(--c-text); font-size: 20px; font-weight: var(--fw-semibold);
        padding: 16px 0;
    }
    .mk-header .mk-mobile-trigger:hover, .mk-header .mk-mobile-trigger:focus,
    .mk-header .mk-mobile-trigger:active { background: none; color: var(--c-text); }
    .mk-mobile-trigger-plain { text-decoration: none; display: block; }
    .mk-mobile-chevron { font-size: 13px; transition: transform .15s; flex-shrink: 0; margin-left: 12px; }
    .mk-mobile-item.mk-open .mk-mobile-chevron { transform: rotate(180deg); }
    .mk-mobile-submenu { display: none; padding: 0 0 12px 8px; }
    .mk-mobile-item.mk-open .mk-mobile-submenu { display: block; }
    .mk-mobile-group {
        font-family: var(--font); color: var(--c-accent); font-size: 13px; font-weight: var(--fw-semibold);
        text-transform: uppercase; letter-spacing: .02em; margin: 14px 0 6px;
    }
    .mk-mobile-group:first-child { margin-top: 4px; }
    .mk-mobile-link {
        display: block; font-family: var(--font); color: var(--c-text); font-size: 17px; font-weight: var(--fw-regular);
        text-decoration: none; padding: 9px 0 9px 8px;
    }
    .mk-mobile-nav .mk-btn { display: inline-block; margin-top: 16px; }

    .mk-hero-row { grid-template-columns: minmax(0, 1fr); padding-top: 40px; text-align: center; }
    .mk-h1 { font-size: 43px; }
    .mk-lead { font-size: 18px; max-width: none; }
    .mk-hero-figure {
        margin-top: 24px; padding: 10px;
        background-size: 100%; background-position: center;
    }
    /* Same natural-ratio scaling as desktop (width:auto/height:auto from the
       base rule), plus a height ceiling: the mobile column runs almost the
       full row width, and at the tall 720:1024 ratio that would otherwise
       blow the hero's height up past 1100px on tablet-ish widths just under
       900px. 546px reuses this section's original intended mobile height —
       the old rule reached that height by force (object-fit:fill, distorting
       the image); max-height reaches the same footprint by scaling down
       instead, so nothing stretches. */
    .mk-hero-mascot { width: auto; height: auto; max-width: 100%; max-height: 546px; }
    .mk-phone-badge { width: 109px; height: 105px; left: 0; top: 34px; }
    .mk-phone-badge-number { font-size: 12px; }
    .mk-phone-badge small { font-size: 10px; }

    .mk-call-badge { width: 132px; height: 127px; left: 29px; top: 45px; }
    .mk-call-badge--right { left: auto; right: 29px; }
    .mk-call-badge-number { font-size: 15px; }
    .mk-call-badge-label { font-size: 13px; }

    .mk-h2 { font-size: 32px; }
    .mk-appliance-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .mk-appliance img { width: 300px; height: 300px; max-width: 100%; }
    .mk-appliance-ploca img { height: 150px; }

    .mk-feature, .mk-split, .mk-mega-2col-grid { grid-template-columns: minmax(0, 1fr); }
    .mk-feature { gap: 74px 0; }
    /* .mk-split holds the app-pitch copy (DOM-first, desktop left column)
       and .mk-contact-card (DOM-second, desktop right column). On mobile
       the real site visually reverses this so contact comes first. */
    .mk-split > *:first-child { order: 2; }
    .mk-split > .mk-contact-card { order: 1; }
    .mk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; column-gap: 20px; }
    .mk-feature.mk-reverse .mk-feature-media, .mk-feature.mk-reverse .mk-feature-text { order: initial; }
    .mk-feature-media { border-radius: 0; aspect-ratio: auto; padding: 0; }
    .mk-feature-flush .mk-feature-media img { object-fit: fill; }
    .mk-feature-text { padding-inline: 24px; text-align: left; align-items: flex-start; }
    .mk-feature.mk-reverse .mk-feature-text { padding-inline: 24px; }
    .mk-feature-text .mk-eyebrow { margin-bottom: 20px; }
    .mk-feature-text h3 { font-size: 26px; margin-bottom: 20px; }
    .mk-feature-text p { font-size: 18px; margin-bottom: 35px; }
    .mk-form-row { grid-template-columns: minmax(0, 1fr); }
    .mk-split > div:first-child { text-align: center; }
    .mk-split > div:first-child > p:not(.mk-eyebrow) { text-align: left; }
    .mk-split h3, .mk-contact-card h3 { font-size: 26px; }
    .mk-contact-card { border-radius: 5px; padding: 80px 10px 10px; margin: 0 -24px; }
    .mk-contact-card form { padding: 0 20px 20px; }
    .mk-footer h4 { font-size: 16px; }
}

/* Embedded custom SVG maps (e.g. /lokacije) must never overflow their
   container at narrow widths — an <svg> with only a viewBox (no width/
   height attribute) falls back to intrinsic sizing instead of respecting a
   percentage-width parent. */
#svgContainer, #svgContainer svg { max-width: 100%; width: 100%; height: auto; }

/* At 320-390px the footer's 2-col grid gives the OSTALO column ~126-161px,
   but "info@masinko.hr" at the base 20px is 167px wide — structurally too
   wide regardless of nowrap. 430px+ already gives 181px+, so this step
   stops before then. */
@media (max-width: 400px) {
    .mk-footer .mk-footer-email { font-size: 14px; }
}

/* ---------- Service / installation page — mobile ---------- */
@media (max-width: 767px) {
    .mk-service-header { padding-top: 60px; padding-bottom: 10px; padding-inline: 20px; }
    .mk-service-title { font-size: 33px; }
    .mk-service-divider-line { width: 12%; }

    .mk-service-row { grid-template-columns: minmax(0, 1fr); padding-inline: 10px; }
    /* Sidebar is desktop-only content (duplicate site navigation) — hidden
       on mobile on the live baseline, not stacked below the intro text. */
    .mk-service-sidebar { display: none; }
    /* --service-content-top-mobile: page-specific top inset (default 0,
       verified 0 on hladnjaci/perilice-posuda/susilice-rublja/ugradbene-
       pecnice; perilice-rublja alone measures a genuine extra 10px here
       on the baseline — not unified away, set per-page in services.php). */
    .mk-service-content { padding: var(--service-content-top-mobile, 0) 0 var(--service-content-top-mobile, 0) 20px; }
    .mk-service-content h2 { font-size: 26px; line-height: 1.6; }

    .mk-service-cta { padding-top: 30px; padding-bottom: 0; }
    .mk-service-cta-row { flex-direction: column; align-items: stretch; border-radius: 0; }
    .mk-service-cta-media { order: 1; }
    .mk-service-cta-text { order: 2; padding: 30px 24px 0; }
    .mk-service-cta-title { font-size: 26px; margin-left: 0; margin-bottom: 20px; }
    .mk-service-cta-body { font-size: 20px; margin-bottom: 35px; }
    /* Matches the trailing 20px the button's own Elementor widget wrapper
       contributed on the baseline — invisible on desktop (the row's
       height is dictated by the taller media column regardless), but the
       only source of bottom spacing on mobile, where the CTA section
       itself has no padding-bottom. */
    .mk-service-cta-text .mk-btn { margin-bottom: 20px; }
}

/* ---------- O nama page — mobile ---------- */
@media (max-width: 767px) {
    .mk-onama-map { padding: 40px 10px 58px; }
    .mk-onama-intro { padding-inline: 20px; margin-bottom: 41px; font-size: 20px; line-height: 34px; }
}

/* ---------- Naše usluge page — mobile ---------- */
@media (max-width: 767px) {
    .mk-usluge-intro { padding-inline: 20px; }
    .mk-usluge-grid { grid-template-columns: minmax(0, 1fr); padding: 40px 20px 0; gap: 40px; }
    .mk-usluge-links { padding: 40px 20px 50px; }
}

/* ---------- Information page template — mobile ---------- */
@media (max-width: 767px) {
    .mk-page-header { padding-top: 70px; padding-bottom: 20px; padding-inline: 30px; }
    .mk-page-title { font-size: 33px; }

    .mk-page-form-section { padding-bottom: 50px; }
    .mk-page-form-wrap { padding: 40px 30px 0; }

    .mk-info-split { flex-direction: column; align-items: stretch; padding-inline: 30px; }
    .mk-info-split-media { flex: none; }
    .mk-info-split-media img { width: 100%; max-width: 318px; }
    .mk-info-split-content { padding-left: 0; }
    /* The baseline's icon at this width has font-size/width/height:0 (a
       real, confirmed bug — not a design choice: its text rows visibly
       overlap each other because each widget's own box is shorter than
       its actual content). Approved decision: reproduce the same content,
       order, fonts, sizes, colors and horizontal position, but give each
       row natural height so it's readable — not the overlapping bug. The
       icon circle is hidden (matching the baseline's own invisible-icon
       state at this width) rather than patched with an arbitrary margin. */
    .mk-icon-list { display: flex; flex-direction: column; gap: 16px; }
    .mk-icon-list li { align-items: flex-start; padding-block: 0; }
    .mk-icon-circle { display: none; }
}

/* ---------- FAQ / česta pitanja page — mobile ---------- */
@media (max-width: 767px) {
    .mk-page-header--tight { padding-bottom: 0; }
    .mk-page-subtitle { font-size: 20px; text-align: left; margin-top: 0; }
    .mk-faq-search { display: none; }
    .mk-faq-quicklinks { padding-inline: 30px; padding-top: 17px; }
    .mk-faq-quicklinks a { font-size: 20px; align-items: flex-start; }
    .mk-faq-spacer { height: 99px; }
    .mk-closing-cta { padding-top: 20px; padding-bottom: 50px; padding-inline: 20px; }
    .mk-closing-cta h2 { font-size: 33px; }
}

/* ---------- Generic long-form content page — mobile ---------- */
@media (max-width: 767px) {
    .mk-content-header { padding-top: 60px; padding-bottom: 10px; padding-inline: 20px; }
    .mk-breadcrumb--gap20 { margin-top: 10px; }
    .mk-content-body { padding: 20px 10px 0; }
    .mk-content-body h2 { font-size: 26px; }
    .mk-calc-box { margin-inline: 10px; }
}

/* ---------- Lokacije page — mobile ---------- */
@media (max-width: 767px) {
    .mk-breadcrumb { padding-inline: 20px; text-align: left; margin-top: 17px; }
    .mk-map-section { padding-inline: 10px; padding-top: 20px; }
    .mk-map-section h2 { font-size: 26px; }
    .mk-district-intro ul { padding-left: 30px; }
}

/* ---------- Blog / blog post — mobile ---------- */
@media (max-width: 767px) {
    .mk-blog-header, .mk-blog-body, .mk-blog-cta, .mk-blog-list-header, .mk-blog-list { padding-inline: 10px; }
    .mk-blog-breadcrumb { margin-top: 40px; }
}

/* ---------- Booking shell — mobile ---------- */
@media (max-width: 800px) {
    .mk-booking-shell { grid-template-columns: 1fr; padding: 30px 20px 60px; }
}