/* A visual explanation of the proposed design principles. Evidence opens separately. */
#dizajn.review-design.visual-design {
  height:auto;
  min-height:100dvh;
  max-height:none;
  padding:calc(var(--header) + 24px) var(--gutter) 28px;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:0;
}
#dizajn.visual-design > .section-label { margin:0 0 clamp(20px,4dvh,44px); }
#dizajn.visual-design > .section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin:0;
}
#dizajn.visual-design .section-heading h2 { font-size:clamp(42px,4.5vw,70px);line-height:1.04; }
#dizajn.visual-design .section-heading > p { display:block;font-size:15px;line-height:1.5;margin:0 0 5px;max-width:210px; }
#dizajn.visual-design .review-design-layout {
  display:block;
  flex:1;
  width:100%;
  min-height:0;
  margin:clamp(28px,5dvh,65px) 0 clamp(20px,3dvh,36px);
}
#dizajn.visual-design .design-principles {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,70px);
  width:100%;
  height:100%;
  margin:0;
  align-self:stretch;
}
#dizajn.visual-design .design-principles > .design-principle {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:20px;
  padding:0;
  border:0;
  min-width:0;
}
#dizajn.visual-design .design-principle-demo {
  width:100%;
  height:clamp(105px,18dvh,200px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  color:rgb(var(--ink));
}
#dizajn.visual-design .design-principle-demo > svg { width:auto;height:100%;max-width:100%;overflow:visible; }
.design-demo-surface { fill:rgba(var(--ink),.025);stroke:rgba(var(--ink),.2);stroke-width:1; }
.design-demo-heading { fill:none;stroke:rgb(var(--ink));stroke-width:4;stroke-linecap:round; }
.design-demo-line { fill:none;stroke:rgba(var(--ink),.35);stroke-width:3;stroke-linecap:round; }
.design-demo-action { fill:#284238; }
.design-demo-arrow { fill:none;stroke:#edeadd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.design-demo-person { fill:none;stroke:rgb(var(--ink));stroke-width:1.7;stroke-linecap:round; }
#dizajn.visual-design .design-principle-copy {
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center;
  gap:11px 12px;
  border-top:1px solid rgba(var(--line),.8);
  padding-top:20px;
  width:100%;
}
#dizajn.visual-design .design-principle-icon { width:22px;height:22px;fill:none;stroke:rgb(var(--accent));stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
#dizajn.visual-design .design-principles h3 { grid-column:2;margin:0;font-size:clamp(20px,1.9vw,29px);line-height:1.2;letter-spacing:-.035em; }
#dizajn.visual-design .design-principles p { grid-column:2;margin:0;max-width:290px;font-size:15px;line-height:1.5; }
#dizajn.visual-design .design-archive-open {
  margin-top:auto;
  align-self:flex-start;
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:18px;
  min-height:44px;
  padding:8px 0;
  font-size:14px;
}
.design-archive-open > svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }

/* Keep the existing gallery and its controls in an explicit evidence viewer. */
.design-evidence-dialog {
  width:min(1100px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:24px;
  border-radius:18px;
  overflow:auto;
  color:#1c302b;
  background:#eeeee8;
  --ink:28,48,43;
  --muted:86,103,96;
  --accent:116,94,48;
  --line:200,205,196;
}
.design-evidence-heading { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px; }
.design-evidence-heading > div > span { display:block;font-size:13px;color:#68766d;line-height:1.5;margin-bottom:5px; }
.design-evidence-heading h2 { font-size:clamp(22px,3vw,34px);line-height:1.15;letter-spacing:-.04em; }
.design-evidence-close { width:44px;height:44px;min-width:44px;color:#20352e;border-color:#c8cdc4; }
.design-evidence-close svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round; }
.design-evidence-dialog .gallery { display:flex;flex-direction:column;gap:16px;margin:0;padding:0; }
.design-evidence-dialog .gallery-toolbar { display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0; }
.design-evidence-dialog .gallery-toolbar > div:first-child { min-width:0; }
.design-evidence-dialog .gallery-toolbar .eyebrow { display:none; }
.design-evidence-dialog .gallery-toolbar h3 { font-size:18px;line-height:1.3;margin:0; }
.design-evidence-dialog .gallery-controls { display:flex;flex:none;align-items:center;gap:8px; }
.design-evidence-dialog .gallery-controls > span { display:block;font-size:13px;white-space:nowrap; }
.design-evidence-dialog .gallery-controls .round-button { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;border-color:#c8cdc4;color:#20352e; }
.design-evidence-dialog .gallery-image-button,
.design-evidence-dialog .gallery-image-button.is-mobile {
  width:100%;height:auto;max-height:min(62dvh,650px);min-height:0;
  display:flex;align-items:flex-start;justify-content:center;
  padding:16px;background:#dee3da;border-radius:10px;
  cursor:default;opacity:1;overflow:auto;overscroll-behavior:contain;
}
.design-evidence-dialog .gallery-image-button img { display:block;width:100%;height:auto;max-height:none;object-fit:contain;box-shadow:none; }
.design-evidence-dialog .gallery-image-button.is-mobile img { width:min(100%,390px);height:auto; }
.design-evidence-dialog .gallery-image-button > span { display:none; }
.design-evidence-dialog .gallery-caption,
.design-evidence-dialog .gallery-dots { display:none; }

@media screen and (min-width:761px) and (max-height:700px) {
  #dizajn.review-design.visual-design { padding-top:calc(var(--header) + 18px);padding-bottom:18px; }
  #dizajn.visual-design > .section-label { margin-bottom:18px; }
  #dizajn.visual-design .section-heading h2 { font-size:clamp(38px,4vw,56px); }
  #dizajn.visual-design .review-design-layout { margin:24px 0 18px; }
  #dizajn.visual-design .design-principle-demo { height:100px; }
  #dizajn.visual-design .design-principle-copy { padding-top:16px;gap:9px 10px; }
}

@media screen and (max-width:760px) {
  #dizajn.review-design.visual-design {
    height:auto;
    min-height:100dvh;
    max-height:none;
    padding:calc(var(--header) + 18px) var(--gutter) max(16px,env(safe-area-inset-bottom));
    overflow:visible;
  }
  #dizajn.visual-design > .section-label { margin-bottom:clamp(20px,3dvh,32px); }
  #dizajn.visual-design > .section-heading { display:block; }
  #dizajn.visual-design .section-heading h2 { font-size:clamp(35px,9.4vw,48px);line-height:1.08; }
  #dizajn.visual-design .section-heading > p { display:block;max-width:none;margin:14px 0 0;font-size:14px;line-height:1.5; }
  #dizajn.visual-design .review-design-layout { display:flex;flex:1;min-height:0;margin:clamp(24px,3.5dvh,40px) 0 20px; }
  #dizajn.visual-design .design-principles { display:flex;flex:1;flex-direction:column;justify-content:space-around;gap:clamp(20px,3dvh,36px);height:auto; }
  #dizajn.visual-design .design-principles > .design-principle {
    display:grid;
    grid-template-columns:clamp(76px,23vw,114px) minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:clamp(10px,1.8dvh,20px) 0 0;
    border-top:1px solid rgba(var(--line),.75);
  }
  #dizajn.visual-design .design-principle-demo { width:100%;height:auto;aspect-ratio:4 / 3; }
  #dizajn.visual-design .design-principle-demo > svg { width:100%;height:100%; }
  #dizajn.visual-design .design-principle-copy { display:grid;grid-template-columns:20px minmax(0,1fr);padding:0;gap:9px 8px;border:0; }
  #dizajn.visual-design .design-principle-icon { width:19px;height:19px; }
  #dizajn.visual-design .design-principles h3 { font-size:clamp(18px,4.5vw,22px);line-height:1.2; }
  #dizajn.visual-design .design-principles p { grid-column:1/-1;font-size:14px;line-height:1.5;max-width:none; }
  #dizajn.visual-design .design-archive-open { margin-top:auto;min-height:44px;font-size:14px; }
  .design-evidence-dialog { padding:18px 14px; }
  .design-evidence-heading { margin-bottom:22px;gap:12px; }
  .design-evidence-heading h2 { font-size:24px; }
  .design-evidence-dialog .gallery-toolbar h3 { font-size:14px; }
  .design-evidence-dialog .gallery-controls { gap:4px; }
  .design-evidence-dialog .gallery-controls > span { display:none; }
  .design-evidence-dialog .gallery-image-button,
  .design-evidence-dialog .gallery-image-button.is-mobile { padding:7px; }
}

@media screen and (max-width:760px) and (max-height:700px) {
  #dizajn.review-design.visual-design { padding-top:calc(var(--header) + 12px);padding-bottom:10px; }
  #dizajn.visual-design > .section-label { margin-bottom:16px; }
  #dizajn.visual-design .section-heading h2 { font-size:32px; }
  #dizajn.visual-design .section-heading > p { display:none; }
  #dizajn.visual-design .review-design-layout { margin:20px 0 12px; }
  #dizajn.visual-design .design-principles { gap:14px; }
  #dizajn.visual-design .design-principles > .design-principle { grid-template-columns:70px minmax(0,1fr);gap:13px;padding-top:12px; }
  #dizajn.visual-design .design-principle-copy { gap:6px; }
  #dizajn.visual-design .design-principles h3 { font-size:18px; }
  #dizajn.visual-design .design-principles p { line-height:1.4; }
}

@media screen and (max-width:360px) and (max-height:700px) {
  #dizajn.visual-design .design-principles > .design-principle { grid-template-columns:50px minmax(0,1fr);gap:12px; }
  #dizajn.visual-design .design-principle-copy { grid-template-columns:minmax(0,1fr); }
  #dizajn.visual-design .design-principle-icon { display:none; }
  #dizajn.visual-design .design-principles h3 { grid-column:1; }
}

@media print {
  #dizajn.review-design.visual-design { height:auto;min-height:0;padding:24px 0; }
  #dizajn.visual-design .design-archive-open { display:none; }
}