/* Εργαστήριο Τσιχλάκης — large.css
   Loaded with media="(min-width: 1024px)", so phones never block on it.
   On a PC the page scales up: bigger type, taller doors, a wider column. */

.wrap { max-width: 1180px; }

body { font-size: 1.1875rem; }

/* Header */
.site-header .wrap { padding-block: 18px; }
.wordmark__name { font-size: 1.25rem; }
.wordmark__place { margin-top: 4px; font-size: 0.8rem; }
.site-header .wrap { gap: 12px; }
.btn { min-height: 50px; padding: 0 22px; font-size: 1.125rem; }
.pref { min-width: 50px; min-height: 50px; font-size: 0.9rem; }
.pref svg { width: 22px; height: 22px; }

/* Doors fill most of the screen height instead of a short strip. */
.doors { padding-block: 48px 64px; }

/* Top-aligned so icons and titles line up across the three cards. */
.door {
  min-height: clamp(300px, 40vh, 440px);
  gap: 12px;
  padding: 56px clamp(28px, 2.4vw, 44px) 44px;
}

.door__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  stroke-width: 1.35;
}

/* Sized so the longest title ("Web development", 8.35em wide) stays on one line
   in a third of the column at every width from 1024px up; the vw part covers
   1024-1280px, where the column is still growing. */
.door__title { font-size: min(2.25rem, 3.05vw); }
.door__sub { font-size: 1.2rem; }

/* Panels */
.panel {
  max-width: 780px;
  padding-block: 40px 80px;
}

.back { min-height: 50px; font-size: 0.95rem; }
.panel h1 { margin: 20px 0 28px; font-size: 4rem; }
.list li { padding: 20px 0; font-size: 1.35rem; }
.note { margin: 28px 0 36px; font-size: 1.25rem; }

/* Machines */
.machine { margin-top: 40px; }
.list .machine { margin: 18px 0 6px; }
.machine figcaption { padding: 12px 16px; font-size: 0.85rem; }

/* 3D panel extras */
.subhead { margin-top: 56px; font-size: 2rem; }
.subnote { font-size: 1.25rem; }
.prints__grid { grid-template-columns: repeat(3, 1fr); }
.sites a { padding: 20px 0; font-size: 1.35rem; }
.sites__host { font-size: 0.95rem; }

/* About */
.about { max-width: 720px; padding: 44px 40px 36px; }
.about h2 { margin-bottom: 20px; font-size: 2.25rem; }
.about p { font-size: 1.25rem; }
.about p + p { margin-top: 16px; }

/* Big monitors: everything a notch larger again. */
@media (min-width: 1600px) {
  html { font-size: 112.5%; }
  .wrap { max-width: 1400px; }
}