@import url("./fonts/inter.css");

/* Ota Pavel Architekti | Portfolio. Centralizovaný šestisloupcový rastr. */
:root {
  color-scheme: light;
  --paper: #fff;
  --text: #171717;
  --muted: #858585;
  --rule: #e7e7e7;
  --content-width: 960px;
  --gutter: 24px;
  --nav-label-size: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: "Inter", Arial, sans-serif;
  font-optical-sizing: auto;
  font-size: 14px;
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #282828; outline-offset: 5px; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
.page-shell { width: min(calc(100% - 52px), var(--content-width)); margin: 0 auto; }
.site-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 30px;
  padding: 32px 0 64px;
}
.brand { font-size: 28px; font-weight: 600; letter-spacing: -.037em; white-space: nowrap; line-height: 1.25; }
.site-nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.site-nav a { font-size: var(--nav-label-size); letter-spacing: .025em; font-weight: 600; color: #686868; transition: color .18s ease; }
.site-nav a:hover, .site-nav a.active { color: #121212; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.project-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 54px; }
.project-card { min-width: 0; display: block; }
.project-card:nth-child(7n+1) { grid-column: span 4; }
.project-card:nth-child(7n+2) { grid-column: span 2; }
.project-card:nth-child(7n+3),
.project-card:nth-child(7n+4),
.project-card:nth-child(7n+5) { grid-column: span 2; }
.project-card:nth-child(7n+6),
.project-card:nth-child(7n+7) { grid-column: span 3; }
.project-cover { height: 225px; background: #e9e9e9; overflow: hidden; }
.project-card:nth-child(7n+1) .project-cover,
.project-card:nth-child(7n+2) .project-cover { height: 250px; }
.project-card:nth-child(7n+3) .project-cover,
.project-card:nth-child(7n+4) .project-cover,
.project-card:nth-child(7n+5) .project-cover { height: 230px; }
.project-card:nth-child(7n+6) .project-cover,
.project-card:nth-child(7n+7) .project-cover { height: 235px; }
.project-cover img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%);
  transition: filter .38s ease;
}
.project-card:is(:hover, :focus-visible) img { filter: grayscale(0%); }
.project-caption {
  display: block; margin-top: 9px; font-size: 14px; font-weight: 600;
  line-height: 1.35; letter-spacing: -.015em; overflow-wrap: anywhere;
}
.site-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-top: 88px; border-top: 1px solid var(--rule); padding: 22px 0 40px;
  color: var(--muted); font-size: 10px; letter-spacing: .022em;
}
.empty-notice { padding: 50px 0 130px; max-width: 500px; }
.empty-notice h2 { font-weight: 500; font-size: 28px; }
.empty-notice p { color: #666; line-height: 1.65; }
/* Detail projektu */
.back-link { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .065em; color: #7d7d7d; margin-bottom: 35px; }
.back-link:hover { color: #111; }
.project-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 36px; margin-bottom: 28px; }
.project-intro h1 { font-size: clamp(30px, 4.1vw, 50px); font-weight: 500; letter-spacing: -.052em; line-height: 1.1; margin: 0; }
.project-metadata { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 5px; color: #858585; font-size: 12px; }
.project-metadata > span:first-child {
  text-transform: uppercase; font-size: var(--nav-label-size);
  font-weight: 600; letter-spacing: .025em;
}
.detail-hero { width: 100%; height: auto; }
/* Cover, description and mosaic share the same column and page margins. */
.detail-main { display: grid; grid-template-columns: minmax(0,1fr); }
.detail-main > * { min-width: 0; }
.detail-main > .back-link { justify-self: start; }
.project-description {
  width: 100%; margin: 28px 0 0; font-size: 16px; line-height: 1.68;
  hyphens: auto; overflow-wrap: break-word;
}
.project-description:empty { display: none; }
.project-description p {
  margin: 0; text-align: justify; text-align-last: start; text-wrap: pretty;
}
.project-description p + p { margin-top: .85em; }
.detail-main > .project-mosaic {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid; gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
}
.detail-main > .project-mosaic:empty { display: none; }
.project-mosaic figure { margin: 0; min-width: 0; }
.project-mosaic img { display: block; width: 100%; height: auto; }
.mosaic-row {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: inherit;
}
.mosaic-row > figure { flex: var(--image-ratio, 1) 1 0%; }
.project-mosaic button {
  border: 0; padding: 0; display: block; width: 100%;
  background: transparent; cursor: zoom-in;
}
.project-mosaic button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.project-mosaic > figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .detail-main > .project-mosaic { grid-template-columns: 1fr; }
  .mosaic-row { display: grid; grid-template-columns: 1fr; }
  .project-description { margin-top: 24px; }
}
.media-viewer {
  position: fixed; width: 100%; height: 100%; max-width: none; max-height: none;
  padding: 52px 3vw 24px; border: 0; background: white;
}
.media-viewer::backdrop { background: white; }
.media-viewer img { width: 100%; height: 100%; object-fit: contain; }
.media-viewer button {
  position: absolute; top: 10px; right: 3vw; padding: 8px 2px; color: #222;
  border: 0; background: white; font: inherit; cursor: pointer;
}
.bottom-back { margin-top: 65px; }
/* Služby, ateliér a kontakt */
.section-heading { border-bottom: 1px solid var(--rule); padding: 36px 0 32px; margin-bottom: 32px; }
.eyebrow { font-size: 11px; color: var(--muted); letter-spacing: .11em; margin-bottom: 20px; }
.section-heading h1 { font-size: clamp(36px,6vw,70px); font-weight: 500; line-height: 1; letter-spacing: -.06em; margin: 0; }
.services-list { margin: 0; }
.service-line { display: flex; gap: 36px; align-items: baseline; padding: 23px 0; border-bottom: 1px solid var(--rule); }
.service-line .service-number { width: 40px; font-size: 12px; color: var(--muted); }
.service-line h2 { margin: 0; font-weight: 500; font-size: clamp(20px,3.2vw,34px); letter-spacing: -.04em; }
.service-documents-note { color: var(--muted); font-size: 13px; max-width: 490px; padding: 40px 0 0; }
.info-page-text { max-width: 650px; font-size: 18px; line-height: 1.6; padding: 10px 0 30px; }
.info-page-text p + p { color: var(--muted); font-size: 14px; }
@media (max-width: 750px) {
  :root { --gutter: 14px; }
  .page-shell { width: min(calc(100% - 34px), var(--content-width)); }
  .site-header { flex-direction: column; align-items: flex-start; gap: 18px; padding: 23px 0 38px; }
  .brand { font-size: 22px; }
  .site-nav { gap: 18px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px 14px; }
  .project-card:nth-child(n) { grid-column: span 1; }
  .project-card:nth-child(n) .project-cover { height: auto; aspect-ratio: 4 / 3; }
  .project-card:nth-child(7n+1) { grid-column: span 2; }
  .project-card:nth-child(7n+1) .project-cover { aspect-ratio: 2 / 1; }
}
@media (max-width: 460px) {
  .project-grid { grid-template-columns: minmax(0,1fr); gap: 33px; }
  .project-card:nth-child(n) { grid-column: span 1; }
  .project-card:nth-child(n) .project-cover { aspect-ratio: 1.5 / 1; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .project-intro { display: block; }
  .project-metadata { margin-top: 15px; }
  .brand { font-size: 20px; }
}
@media (hover: none) { .project-cover img { filter: none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }

.examples { margin-top: 64px; }
.examples h2 { font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.examples > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 24px; }
.examples figure { margin: 0; }
.examples img { width: 100%; aspect-ratio: 3/2; object-fit: contain; }
.examples figcaption { font-size: 12px; margin-top: 8px; color: #626262; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 550px) { .examples > div { grid-template-columns: 1fr; } }