/* galerie.css — pragoclub.com — česká modelová železnice */
/* Prefix: prg-  |  Pipeline classes styled (not renamed): .docket, .label */

/* ─── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --prg-timber:   #3b2a1a;   /* dark walnut */
  --prg-plank:    #6b4c2e;   /* medium oak */
  --prg-sawdust:  #c8a97e;   /* pale wood */
  --prg-linen:    #f5efe4;   /* warm off-white */
  --prg-cream:    #faf6ef;   /* page bg */
  --prg-rust:     #a0451a;   /* locomotive rust accent */
  --prg-rail:     #4a5568;   /* steel rail grey */
  --prg-smoke:    #6b7280;   /* light text / meta */
  --prg-border:   #d9c9b0;   /* warm dividers */
  --prg-green:    #3a5c3a;   /* foliage / signal green */
  --prg-ink:      #1e1610;   /* body text */
  --prg-serif: 'Georgia', 'Times New Roman', serif;
  --prg-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --prg-mono: 'Courier New', monospace;
  --prg-radius: 4px;
  --prg-shadow: 0 2px 8px rgba(59,42,26,.12);
  --prg-rail-side: 200px;   /* side-rail width */
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--prg-cream);
  color: var(--prg-ink);
  font-family: var(--prg-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--prg-rust); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--prg-plank); }

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE — two-column shell: side rail + gallery canvas
   ════════════════════════════════════════════════════════════════ */

/* Outer shell spanning full viewport */
.prg-shell {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}

/* ── Side rail (navigation column) ────────────────────────────── */
.prg-rail {
  width: var(--prg-rail-side);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--prg-timber);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem 2rem;
  gap: 2rem;
  border-right: 3px solid var(--prg-rust);
  scrollbar-width: thin;
  scrollbar-color: var(--prg-plank) var(--prg-timber);
}

.prg-rail-logo {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-decoration: none;
  color: #fff;
}
.prg-rail-logo:hover { text-decoration: none; }

.prg-rail-badge {
  width: 44px;
  height: 44px;
  background: var(--prg-rust);
  border-radius: var(--prg-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--prg-mono);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  flex-shrink: 0;
  margin-bottom: .1rem;
}

.prg-rail-sitename {
  font-family: var(--prg-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.prg-rail-sitename em { font-style: normal; color: var(--prg-sawdust); }

.prg-rail-tagline {
  font-size: .67rem;
  color: var(--prg-sawdust);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Inline text nav list */
.prg-rail-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.prg-rail-nav li a {
  display: block;
  padding: .4rem .6rem;
  color: var(--prg-sawdust);
  font-size: .85rem;
  font-weight: 500;
  border-radius: var(--prg-radius);
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.prg-rail-nav li a:hover,
.prg-rail-nav li a[aria-current="page"] {
  color: #fff;
  border-left-color: var(--prg-rust);
  background: rgba(255,255,255,.08);
  text-decoration: none;
}

/* Scale stamp at bottom of rail */
.prg-rail-stamp {
  margin-top: auto;
  font-family: var(--prg-mono);
  font-size: .65rem;
  color: rgba(200,169,126,.5);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* ── Main canvas (gallery + articles) ─────────────────────────── */
.prg-canvas {
  flex: 1;
  min-width: 0;
  padding: 2rem 1.75rem 4rem;
}

/* ── Gallery mosaic ────────────────────────────────────────────── */
.prg-gallery {
  /* CSS columns masonry */
  column-count: 3;
  column-gap: .75rem;
  margin-bottom: 3rem;
}

.prg-tile {
  break-inside: avoid;
  margin-bottom: .75rem;
  border-radius: var(--prg-radius);
  overflow: hidden;
  position: relative;
  cursor: default;
}

/* Each tile is a CSS gradient placeholder with a set aspect-ratio */
.prg-tile-inner {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--prg-radius);
}

/* Varied heights via aspect-ratio */
.prg-tile--tall   .prg-tile-inner { aspect-ratio: 3/4; }
.prg-tile--wide   .prg-tile-inner { aspect-ratio: 16/9; }
.prg-tile--square .prg-tile-inner { aspect-ratio: 1/1; }
.prg-tile--port   .prg-tile-inner { aspect-ratio: 2/3; }
.prg-tile--pano   .prg-tile-inner { aspect-ratio: 21/9; }

/* Gradient fills — varied by subject colour themes */
.prg-tile--steam .prg-tile-inner {
  background: linear-gradient(145deg, #2e1f0f 0%, #6b3a1f 40%, #9a5c2e 70%, #c8a97e 100%);
}
.prg-tile--track .prg-tile-inner {
  background: linear-gradient(160deg, #1a2030 0%, #2d3a50 45%, #4a5568 75%, #7a8a9a 100%);
}
.prg-tile--patina .prg-tile-inner {
  background: linear-gradient(130deg, #1e0e08 0%, #6b2310 35%, #a0451a 65%, #c8774d 100%);
}
.prg-tile--green .prg-tile-inner {
  background: linear-gradient(150deg, #0f1e0f 0%, #2a4a2a 40%, #3a6a3a 70%, #7aaa7a 100%);
}
.prg-tile--dusk .prg-tile-inner {
  background: linear-gradient(140deg, #1a1020 0%, #4a2a5a 45%, #8a5a8a 75%, #c8a0c8 100%);
}
.prg-tile--winter .prg-tile-inner {
  background: linear-gradient(155deg, #1e2028 0%, #3a4050 45%, #8090a8 75%, #d8e0e8 100%);
}
.prg-tile--ochre .prg-tile-inner {
  background: linear-gradient(135deg, #20150a 0%, #5a3a10 40%, #9a6a20 70%, #d4a040 100%);
}
.prg-tile--night .prg-tile-inner {
  background: linear-gradient(150deg, #080c14 0%, #101828 45%, #1e3050 70%, #2a4878 100%);
}
.prg-tile--sand .prg-tile-inner {
  background: linear-gradient(145deg, #1e1408 0%, #4a3018 40%, #8a6a38 70%, #c8a870 100%);
}

/* Overlay texture (diagonal hatching via repeating gradient) */
.prg-tile-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,.03) 4px,
    rgba(255,255,255,.03) 5px
  );
  pointer-events: none;
  z-index: 1;
}

/* Caption bar at bottom of tile */
.prg-tile-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .55rem .7rem .5rem;
  background: linear-gradient(to top, rgba(20,10,4,.82) 0%, transparent 100%);
  color: rgba(255,255,255,.88);
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .01em;
  z-index: 2;
  pointer-events: none;
}

.prg-tile-cap strong {
  display: block;
  font-weight: 600;
  font-size: .76rem;
  color: #fff;
}

/* Hover lift */
.prg-tile:hover .prg-tile-inner {
  box-shadow: 0 6px 24px rgba(59,42,26,.28);
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.prg-tile .prg-tile-inner {
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Linked tiles */
.prg-tile a.prg-tile-inner {
  cursor: pointer;
}
.prg-tile a.prg-tile-inner:hover { text-decoration: none; }

/* ── Nejnovější články strip ───────────────────────────────────── */
.prg-strip-head {
  font-family: var(--prg-serif);
  font-size: 1rem;
  color: var(--prg-timber);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--prg-border);
  margin-bottom: 1.1rem;
}

/* Pipeline list classes */
ul.docket {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: none;
}
ul.docket li {
  padding: .85rem 0;
  border-bottom: 1px solid var(--prg-border);
  display: flex;
  align-items: baseline;
  gap: .9rem;
}
ul.docket li:last-child {
  border-bottom: none;
}
.label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--prg-rust);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
ul.docket li h3 {
  font-family: var(--prg-serif);
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: .2rem;
}
ul.docket li h3 a { color: var(--prg-timber); }
ul.docket li h3 a:hover { color: var(--prg-rust); }
ul.docket li p {
  font-size: .85rem;
  color: var(--prg-smoke);
  max-width: 70ch;
}

/* ── Colophon (bottom of page, below gallery+strip) ───────────── */
.prg-colophon {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--prg-border);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.prg-colophon p {
  font-size: .78rem;
  color: var(--prg-smoke);
  max-width: 52ch;
  line-height: 1.6;
}
.prg-colophon-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
}
.prg-colophon-links li a {
  font-size: .78rem;
  color: var(--prg-smoke);
  white-space: nowrap;
}
.prg-colophon-links li a:hover { color: var(--prg-rust); }
.prg-colophon-disc {
  font-size: .72rem;
  color: rgba(107,114,128,.6);
  margin-top: .4rem;
}


/* ════════════════════════════════════════════════════════════════
   INNER PAGES — article / about / contact
   Same side-rail + content-column layout but narrower canvas
   ════════════════════════════════════════════════════════════════ */

.prg-inner-shell {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}

/* Reuse .prg-rail for inner pages too */

.prg-inner-canvas {
  flex: 1;
  min-width: 0;
  padding: 2rem 2rem 4rem;
  max-width: 820px;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.prg-crumb {
  font-size: .8rem;
  color: var(--prg-smoke);
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
}
.prg-crumb a { color: var(--prg-smoke); }
.prg-crumb a:hover { color: var(--prg-rust); text-decoration: underline; }
.prg-crumb span { color: var(--prg-border); }

/* ── Article header ─────────────────────────────────────────────── */
.prg-article-hd {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--prg-border);
}
.prg-article-kicker {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--prg-rust);
  font-weight: 700;
  margin-bottom: .5rem;
}
.prg-article-hd h1 {
  font-family: var(--prg-serif);
  font-size: 2rem;
  color: var(--prg-timber);
  line-height: 1.2;
  margin-bottom: .6rem;
}
.prg-article-hd .prg-lede {
  font-size: 1.08rem;
  color: var(--prg-rail);
  max-width: 66ch;
  line-height: 1.6;
}
.prg-article-meta {
  margin-top: .75rem;
  font-size: .78rem;
  color: var(--prg-smoke);
}

/* ── Article body ─────────────────────────────────────────────── */
.prg-article-body h2 {
  font-family: var(--prg-serif);
  font-size: 1.3rem;
  color: var(--prg-timber);
  margin: 2rem 0 .65rem;
  padding-top: .25rem;
  border-top: 1px solid var(--prg-border);
}
.prg-article-body h3 {
  font-family: var(--prg-serif);
  font-size: 1.05rem;
  color: var(--prg-plank);
  margin: 1.5rem 0 .4rem;
}
.prg-article-body p {
  margin-bottom: 1rem;
  max-width: 72ch;
}
.prg-article-body ul,
.prg-article-body ol {
  margin: .5rem 0 1rem 1.5rem;
  max-width: 68ch;
}
.prg-article-body li { margin-bottom: .35rem; }

/* Two-col layout for articles with sidebar */
.prg-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 720px) {
  .prg-layout { grid-template-columns: 1fr; }
}

.prg-sidebar {
  position: sticky;
  top: 1.5rem;
}
.prg-sidebar-box {
  background: var(--prg-linen);
  border: 1px solid var(--prg-border);
  border-top: 3px solid var(--prg-plank);
  border-radius: var(--prg-radius);
  padding: 1rem;
  margin-bottom: 1.1rem;
  font-size: .88rem;
}
.prg-sidebar-box h4 {
  font-family: var(--prg-serif);
  font-size: .78rem;
  color: var(--prg-timber);
  margin-bottom: .6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.prg-sidebar-box ul { list-style: none; }
.prg-sidebar-box ul li { margin-bottom: .4rem; }
.prg-sidebar-box ul li a { color: var(--prg-plank); font-size: .85rem; }
.prg-sidebar-box ul li a:hover { color: var(--prg-rust); }

/* Step list */
.prg-steps {
  list-style: none;
  margin: 1rem 0 1.5rem;
  max-width: 68ch;
  counter-reset: prg-step;
}
.prg-steps li {
  counter-increment: prg-step;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.prg-steps li::before {
  content: counter(prg-step);
  min-width: 2rem;
  height: 2rem;
  background: var(--prg-rust);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* Tip callout */
.prg-tip {
  background: var(--prg-linen);
  border-left: 4px solid var(--prg-green);
  padding: .85rem 1rem;
  border-radius: 0 var(--prg-radius) var(--prg-radius) 0;
  margin: 1.25rem 0;
  font-size: .93rem;
  max-width: 68ch;
}
.prg-tip strong { color: var(--prg-green); }

/* Spec table */
.prg-table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.prg-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
}
.prg-table th {
  background: var(--prg-timber);
  color: var(--prg-linen);
  text-align: left;
  padding: .55rem .85rem;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.prg-table td {
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--prg-border);
  vertical-align: top;
}
.prg-table tr:nth-child(even) td { background: var(--prg-linen); }

/* Photo placeholder (articles) */
.prg-photo-stub {
  background: linear-gradient(135deg, var(--prg-border) 0%, var(--prg-sawdust) 100%);
  border: 1px dashed var(--prg-plank);
  border-radius: var(--prg-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: var(--prg-plank);
  font-size: .82rem;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}
.prg-photo-stub-lg { min-height: 200px; width: 100%; margin: 1.5rem 0; }
.prg-photo-stub-sm { min-height: 130px; width: 100%; margin: 1.2rem 0; }
.prg-photo-stub-icon { font-size: 2rem; line-height: 1; }

/* Contact form */
.prg-form { max-width: 560px; margin: 1.5rem 0; }
.prg-field { margin-bottom: 1.2rem; }
.prg-field label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--prg-timber);
  margin-bottom: .35rem;
}
.prg-field input,
.prg-field textarea {
  width: 100%;
  border: 1px solid var(--prg-border);
  border-radius: var(--prg-radius);
  padding: .6rem .85rem;
  font-size: .95rem;
  font-family: var(--prg-sans);
  background: #fff;
  color: var(--prg-ink);
  transition: border-color .15s, box-shadow .15s;
}
.prg-field input:focus,
.prg-field textarea:focus {
  outline: none;
  border-color: var(--prg-plank);
  box-shadow: 0 0 0 3px rgba(107,76,46,.15);
}
.prg-field textarea { min-height: 140px; resize: vertical; }
.prg-honeypot { display: none; visibility: hidden; }
.prg-submit {
  background: var(--prg-rust);
  color: #fff;
  border: none;
  border-radius: var(--prg-radius);
  padding: .7rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s;
}
.prg-submit:hover { background: var(--prg-plank); }
.prg-notice-ok {
  background: #eaf5ea;
  border: 1px solid #7eba7e;
  border-left: 4px solid var(--prg-green);
  color: #2d4f2d;
  padding: .9rem 1.1rem;
  border-radius: var(--prg-radius);
  margin-bottom: 1.5rem;
  font-size: .95rem;
}
.prg-notice-err {
  background: #fdf0ec;
  border: 1px solid #e0957a;
  border-left: 4px solid var(--prg-rust);
  color: #6b2310;
  padding: .9rem 1.1rem;
  border-radius: var(--prg-radius);
  margin-bottom: 1.5rem;
  font-size: .95rem;
}

/* About / prose pages */
.prg-prose h2 {
  font-family: var(--prg-serif);
  font-size: 1.2rem;
  color: var(--prg-timber);
  margin: 2rem 0 .6rem;
  border-top: 1px solid var(--prg-border);
  padding-top: .6rem;
}
.prg-prose p { max-width: 68ch; margin-bottom: 1rem; }
.prg-prose ul { max-width: 64ch; margin: .5rem 0 1rem 1.4rem; }
.prg-prose ul li { margin-bottom: .4rem; }

/* Inner-page colophon */
.prg-inner-colophon {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--prg-border);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.prg-inner-colophon p {
  font-size: .78rem;
  color: var(--prg-smoke);
  max-width: 52ch;
  line-height: 1.6;
}
.prg-inner-colophon-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
}
.prg-inner-colophon-links li a {
  font-size: .78rem;
  color: var(--prg-smoke);
  white-space: nowrap;
}
.prg-inner-colophon-links li a:hover { color: var(--prg-rust); }
.prg-inner-colophon-disc {
  font-size: .72rem;
  color: rgba(107,114,128,.6);
  margin-top: .4rem;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --prg-rail-side: 160px; }
  .prg-gallery { column-count: 2; }
  .prg-canvas { padding: 1.5rem 1.25rem 3rem; }
  .prg-inner-canvas { padding: 1.5rem 1.25rem 3rem; }
}

@media (max-width: 600px) {
  .prg-shell,
  .prg-inner-shell {
    flex-direction: column;
  }
  .prg-rail {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: .8rem 1rem;
    gap: 1rem;
    border-right: none;
    border-bottom: 3px solid var(--prg-rust);
  }
  .prg-rail-logo {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
  }
  .prg-rail-tagline { display: none; }
  .prg-rail-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .15rem;
  }
  .prg-rail-nav li a {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: .3rem .5rem;
  }
  .prg-rail-nav li a:hover,
  .prg-rail-nav li a[aria-current="page"] {
    border-left-color: transparent;
    border-bottom-color: var(--prg-rust);
    background: rgba(255,255,255,.08);
  }
  .prg-rail-stamp { display: none; }
  .prg-gallery { column-count: 1; }
  .prg-article-hd h1 { font-size: 1.5rem; }
  .prg-inner-canvas { max-width: 100%; }
}