/* Mobile audit: a readable document around deliberately full-screen scenes.
   These overrides load last and leave the laptop presentation untouched. */
@media screen and (max-width:760px) {
  :root { --gutter:20px;--header:64px; }

  .topbar {
    height:var(--header);
    padding-inline:var(--gutter);
    opacity:1!important;
    pointer-events:auto!important;
    background:rgba(var(--bg),.94);
    backdrop-filter:blur(18px);
  }
  .topbar .logo { font-size:27px; }
  .topbar-center img { width:78px;height:34px; }
  .topbar-controls { gap:0;min-height:44px; }
  .chapter-trigger { min-width:44px;min-height:44px;padding:10px;gap:0; }
  .icon-button { width:44px;min-width:44px;height:44px;min-height:44px; }
  .chapter-menu {
    top:calc(var(--header) + 6px);
    right:var(--gutter);
    width:calc(100% - var(--gutter)*2);
    max-height:calc(100dvh - var(--header) - 20px);
    padding:10px;
    border-radius:16px;
  }
  .chapter-menu a { min-height:44px;padding:12px 10px;font-size:14px;line-height:1.45;gap:12px; }
  .chapter-menu a > span { font-size:12px; }
  body[data-active-chapter="uvod"] .topbar {
    background:#071e18a8;
    backdrop-filter:blur(16px);
    border-color:#f1f4e51c;
  }
  body[data-active-chapter="uvod"] .topbar-center img { width:78px;height:34px; }
  body[data-active-chapter="uvod"] .topbar-controls { height:44px;padding:0 2px; }
  body[data-active-chapter="nalazi"] .topbar,
  body[data-active-chapter="seo"] .topbar { opacity:1!important;pointer-events:auto!important; }

  .section-pad { padding:calc(var(--header) + 20px) var(--gutter) 40px; }
  .section-label { margin-bottom:24px;gap:12px; }
  .section-label > span:first-child { max-width:100%;font-size:13px;line-height:1.35;padding:7px 10px; }
  .section-heading { margin-bottom:26px; }
  .section-heading > p { margin-top:18px;max-width:100%;font-size:14px;line-height:1.55; }
  .text-button,.button-primary { font-size:14px;line-height:1.45;min-height:44px; }
  .round-button { width:44px;height:44px;min-width:44px;min-height:44px; }
  .evidence-fab { display:none; }

  /* The first impression remains cinematic, with type sized for a phone. */
  #uvod.hero-cinema { height:115dvh; }
  #uvod .hero-cinema-pin { height:100dvh; }
  #uvod .hero-cinema-title { left:var(--gutter);right:var(--gutter);top:29dvh; }
  #uvod.hero-cinema h1 { font-size:clamp(38px,10.8vw,46px);line-height:1.12;letter-spacing:-.065em; }
  #uvod .hero-cinema-footer { left:var(--gutter);right:var(--gutter);bottom:max(20px,env(safe-area-inset-bottom));gap:16px; }
  #uvod .hero-cinema-footer > a { font-size:14px;line-height:1.5;max-width:145px;gap:14px;min-height:44px; }
  #uvod .hero-cinema-footer > span { font-size:14px;line-height:1.5;max-width:145px; }
  #uvod .hero-video-toggle { width:44px;height:44px;right:var(--gutter);bottom:94px; }

  /* Every finding stays readable, including its qualification and proof link. */
  #nalazi .diagnosis-pin { height:100dvh;min-height:0;padding:calc(var(--header) + 16px) var(--gutter) 14px; }
  #nalazi .diagnosis-intro { padding:0 0 20px; }
  #nalazi .diagnosis-intro h2 { font-size:clamp(36px,10.5vw,46px);line-height:1.1; }
  #nalazi .diagnosis-eyebrow { font-size:17px;line-height:1.45;margin-bottom:20px; }
  #nalazi .diagnosis-fact { gap:18px;padding:10px 2px 18px 0; }
  #nalazi .diagnosis-value { font-size:clamp(96px,27vw,112px);line-height:1; }
  #nalazi .diagnosis-stat-caption { margin-top:12px;font-size:13px;line-height:1.45;padding:8px 11px;gap:6px; }
  #nalazi .diagnosis-count { font-size:13px;line-height:1.45;padding:8px 10px;margin-bottom:14px; }
  #nalazi .diagnosis-copy h3 { font-size:30px;line-height:1.15;margin-bottom:15px; }
  #nalazi .diagnosis-copy > p,
  #nalazi .diagnosis-copy .diagnosis-note { font-size:14px;line-height:1.55; }
  #nalazi .diagnosis-copy .diagnosis-note { margin-top:12px; }
  #nalazi .diagnosis-copy .text-button { margin-top:8px;min-height:44px;font-size:14px; }
  #nalazi .diagnosis-controls { gap:10px;padding-top:4px; }
  #nalazi .diagnosis-controls button { min-height:54px;padding:9px 0;font-size:11px;line-height:1.4; }
  #nalazi .diagnosis-controls button > span { font-size:10px;margin-bottom:4px; }

  /* See the evidence before reading the detailed observations. */
  #mobile .mobile-layout { display:grid;grid-template-columns:minmax(0,1fr);gap:0; }
  #mobile .mobile-copy { display:contents; }
  #mobile .mobile-copy.reveal { opacity:1;transform:none; }
  #mobile .mobile-copy > h2 { order:0;font-size:clamp(36px,10.5vw,44px);line-height:1.1; }
  #mobile .lead-copy { order:1;max-width:100%;font-size:14px;line-height:1.55;margin:18px 0 0; }
  #mobile .phone-stage { order:2;margin:26px 0 30px; }
  #mobile .screen-label { margin-bottom:14px;font-size:13px;line-height:1.4; }
  #mobile .phone-frame,
  #mobile .phone-stage:hover .phone-frame {
    width:min(210px,23.1dvh);
    max-height:50dvh;
    height:auto;
    aspect-ratio:375 / 812;
    border-radius:23px;
    box-shadow:0 20px 48px #0004,0 0 0 4px #e4ead40a;
    transform:none;
  }
  #mobile .phone-frame img { border-radius:22px; }
  #mobile .phone-pin { width:28px;height:28px;font-size:12px;box-shadow:0 0 0 3px #ead8af33; }
  #mobile .phone-stage .text-button { margin-top:14px;min-height:44px;font-size:14px; }
  #mobile .annotation-list { order:3; }
  #mobile .annotation { grid-template-columns:28px minmax(0,1fr);gap:12px;margin:0;padding:20px 0;border-top:1px solid rgba(var(--line),.35); }
  #mobile .annotation-number { display:grid;place-items:center;align-self:start;width:26px;height:26px;padding:0;border:1px solid rgba(var(--accent),.4);border-radius:50%;font-size:11px;line-height:1; }
  #mobile .annotation h3 { font-size:18px;line-height:1.35;margin:0 0 9px; }
  #mobile .annotation p { font-size:14px;line-height:1.55;max-width:100%; }

  /* Three recommendations plus evidence form a single, complete mobile frame. */
  #dizajn.review-design {
    height:100dvh;
    min-height:0;
    max-height:100dvh;
    padding:calc(var(--header) + 16px) var(--gutter) 16px;
    overflow:clip;
  }
  #dizajn.review-design > .section-label { margin-bottom:18px; }
  #dizajn.review-design > .section-heading { display:block;margin-bottom:18px; }
  #dizajn.review-design .section-heading h2 { font-size:clamp(32px,9.7vw,40px);line-height:1.08; }
  #dizajn.review-design .section-heading > p { margin-top:14px;font-size:14px;line-height:1.5; }
  #dizajn .review-design-layout { display:flex;flex-direction:column;align-items:stretch;gap:16px;flex:1;min-height:0; }
  #dizajn.review-design .design-principles { flex:none;align-self:stretch; }
  #dizajn.review-design .design-principles > div { grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:12px 0; }
  #dizajn.review-design .design-principles > div > span { width:27px;height:27px;font-size:11px; }
  #dizajn.review-design .design-principles h3 { font-size:22px;line-height:1.2; }
  #dizajn.review-design .design-principles p { font-size:14px;line-height:1.45;max-width:100%; }
  #dizajn.review-design .gallery { display:flex;align-self:stretch;flex:1;height:auto;min-height:106px;max-height:240px;padding:12px;gap:0;border-radius:16px; }
  #dizajn.review-design .gallery-toolbar { display:flex;align-items:center;gap:10px;margin:0 0 10px; }
  #dizajn.review-design .gallery-toolbar > div:first-child { display:block;min-width:0; }
  #dizajn.review-design .gallery-toolbar .eyebrow { font-size:13px;line-height:1.35; }
  #dizajn.review-design .gallery-toolbar h3 { font-size:14px;line-height:1.35;margin-top:3px; }
  #dizajn.review-design .gallery-controls { display:flex;flex:none;gap:4px; }
  #dizajn.review-design .gallery-controls .round-button { width:44px;height:44px;min-width:44px;min-height:44px; }
  #dizajn.review-design .gallery-image-button,
  #dizajn.review-design .gallery-image-button.is-mobile { display:flex;flex:1;min-height:44px;height:auto;max-height:165px;grid-column:auto;grid-row:auto;justify-content:center;background:rgba(var(--ink),.055); }
  #dizajn.review-design .gallery-image-button img { display:block; }
  #dizajn.review-design .gallery-image-button > span { position:absolute;right:8px;bottom:8px;font-size:13px;line-height:1.4;padding:8px 10px;min-height:36px;border:1px solid #ffffff90;background:#f4f2ebee;border-radius:999px; }

  /* Measurement and the ending use a compact document rhythm. */
  #merenje .section-heading { margin-bottom:28px; }
  #merenje .section-heading h2 { font-size:clamp(36px,10.7vw,44px);line-height:1.1; }
  #merenje .measurement-list { margin-top:0; }
  #merenje .measurement-list > div { grid-template-columns:25px minmax(0,1fr);gap:9px 12px;padding:22px 0; }
  #merenje .measurement-list > div > span { padding-top:5px;font-size:12px; }
  #merenje .measurement-list h3 { font-size:24px;line-height:1.2; }
  #merenje .measurement-list p,
  #merenje .measurement-list small { font-size:14px;line-height:1.55; }
  #merenje .measurement-bottom { display:block;margin-top:28px;padding-top:22px;border-top:1px solid rgba(var(--line),.5); }
  #merenje .measurement-bottom strong { font-size:27px;line-height:1.25; }
  #merenje .measurement-bottom p { margin-top:17px;font-size:14px;line-height:1.55;max-width:100%; }
  #sledece.final-section { min-height:100dvh;padding-top:calc(var(--header) + 20px);padding-bottom:26px; }
  #sledece > h2 { font-size:clamp(35px,10.6vw,46px);line-height:1.12; }
  #sledece .final-bottom { display:block;margin:28px 0 28px; }
  #sledece .final-bottom p { font-size:14px;line-height:1.55;margin-bottom:22px; }
  #sledece .button-primary { width:100%;justify-content:space-between;gap:16px;min-height:50px;padding:14px 16px; }
  #sledece .final-wordmark { display:flex;align-items:center;flex-wrap:wrap;column-gap:24px;row-gap:15px;font-size:52px;line-height:1.1;letter-spacing:-4px;margin-top:32px; }
  #sledece .final-client-logo { width:92px;height:42px;object-fit:contain;margin:0; }
  #sledece .final-wordmark > span { margin-left:-23px; }
  #sledece .final-wordmark small { flex-basis:100%;margin:0;font-size:14px;line-height:1.5;letter-spacing:0; }
  #sledece .presentation-footer { gap:10px 16px;padding-top:20px;font-size:11px;line-height:1.45;letter-spacing:.02em;align-items:center; }
  #sledece .presentation-footer a { display:inline-flex;align-items:center;min-height:44px;font-size:14px; }

  /* Dialog controls retain real touch targets even at 320 px. */
  .dialog-shell { padding:20px; }
  .dialog-header { gap:12px; }
  .dialog-header .eyebrow { font-size:12px;line-height:1.4;padding:6px 9px; }
  .dialog-header h2 { font-size:28px;line-height:1.15;margin-top:14px; }
  .dialog-close { width:44px;height:44px;min-width:44px;min-height:44px; }
  .dialog-intro { margin:20px 0;font-size:14px;line-height:1.55; }
  .evidence-tabs { gap:6px;justify-content:space-between; }
  .evidence-tabs > button { min-width:44px;min-height:44px;font-size:14px;line-height:1.45;padding:12px 8px; }
  .search-wrap { margin:18px 0;padding:12px;gap:10px; }
  .search-wrap input { font-size:16px;min-height:24px; }
  .evidence-item p,.image-dialog > p { font-size:14px;line-height:1.55; }
  .evidence-item a { display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1.45;overflow-wrap:anywhere; }
}

@media screen and (max-width:760px) and (max-height:740px) {
  #uvod .hero-cinema-title { top:30dvh; }
  #uvod .hero-cinema-footer { bottom:18px; }
  #nalazi .diagnosis-pin { padding-top:calc(var(--header) + 12px);padding-bottom:10px; }
  #nalazi .diagnosis-fact { padding-top:6px;gap:15px; }
  #nalazi .diagnosis-value { font-size:96px; }
  #nalazi .diagnosis-copy h3 { font-size:27px;line-height:1.15; }
  #nalazi .diagnosis-stat-caption { margin-top:8px; }
  #nalazi .diagnosis-count { margin-bottom:12px; }
  #mobile .phone-stage { margin:22px 0 24px; }

  #dizajn.review-design { padding-top:calc(var(--header) + 12px);padding-bottom:12px; }
  #dizajn.review-design > .section-label { margin-bottom:12px; }
  #dizajn.review-design > .section-heading { margin-bottom:12px; }
  #dizajn.review-design .section-heading h2 { font-size:30px;line-height:1.08; }
  #dizajn.review-design .section-heading > p { display:none; }
  #dizajn .review-design-layout { gap:12px;justify-content:space-between; }
  #dizajn.review-design .design-principles > div { grid-template-columns:26px minmax(0,1fr);column-gap:10px;row-gap:3px;padding:9px 0; }
  #dizajn.review-design .design-principles > div > span { width:25px;height:25px; }
  #dizajn.review-design .design-principles h3 { font-size:20px;line-height:1.2; }
  #dizajn.review-design .design-principles p { font-size:14px;line-height:1.4; }
  #dizajn.review-design .gallery { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;flex:none;height:64px;min-height:64px;max-height:64px;padding:9px 10px; }
  #dizajn.review-design .gallery-toolbar { display:contents; }
  #dizajn.review-design .gallery-toolbar > div:first-child { display:none; }
  #dizajn.review-design .gallery-controls { grid-column:2;grid-row:1; }
  #dizajn.review-design .gallery-image-button,
  #dizajn.review-design .gallery-image-button.is-mobile { grid-column:1;grid-row:1;flex:none;height:44px;min-height:44px;max-height:44px;justify-content:flex-start;background:none; }
  #dizajn.review-design .gallery-image-button img { display:none; }
  #dizajn.review-design .gallery-image-button > span { position:static;min-height:44px;display:inline-flex;align-items:center;font-size:14px;line-height:1.4;padding:0;border:0;box-shadow:none;background:none; }
}

@media screen and (max-width:360px) {
  :root { --gutter:18px; }
  .topbar-center img,
  body[data-active-chapter="uvod"] .topbar-center img { width:70px;height:32px; }
  #nalazi .diagnosis-stat-caption { padding-inline:9px;font-size:12px; }
  #nalazi .diagnosis-count { font-size:12px; }
  #nalazi .diagnosis-controls { gap:8px; }
  #nalazi .diagnosis-controls button { font-size:10px; }
  #dizajn.review-design .design-principles p { line-height:1.4; }
  .dialog-shell { padding:18px; }
  .evidence-tabs > button { padding-inline:6px; }
}