/* =====================================================================
   navrh-a.css — Varianta A „Sklad na první pohled“ (návrh na schůzku)
   Načítá se po style.css, mění tokeny a přidává komponenty návrhu.
   Barvy z loga e-shopu STAVCAMI (černá + červená #C93F2D).
   Podpisový prvek: CENOVKA — štítek s cenou jako cedulky na fotkách zboží.
   ===================================================================== */
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("/fonts/archivo-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("/fonts/archivo-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
  --color-brand:       #1c1c1c;
  --color-brand-dark:  #000000;
  --color-accent:      #b8352a;   /* červená z loga, ztmavená kvůli kontrastu bílého textu */
  --color-accent-dark: #962a21;
  --color-red:         #c93f2d;   /* původní červená loga — jen dekor (cenovka, linka) */
  --color-text:        #1c1c1c;
  --color-text-muted:  #555b61;
  --color-bg-alt:      #f3f3f1;
  --color-bg-dark:     #1c1c1c;
  --color-border:      #dedede;
  --font-base: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Archivo", "Barlow", system-ui, sans-serif;
  --radius-sm: 4px; --radius-md: 6px;
  --header-h: 76px;
}
body { font-size: 1.0625rem; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; hyphens: manual; }
h1 { font-size: clamp(2rem, 4.6vw + 0.4rem, 3.5rem); line-height: 1.05; }
h3 { font-size: var(--text-lg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: var(--space-2) var(--space-3); z-index: 200; }
.skip-link:focus { left: var(--space-3); }
.placeholder { border: 2px dashed var(--color-border); padding: var(--space-3); color: var(--color-text-muted); border-radius: var(--radius-md); }

/* logo — typografické provizorium podle loga e-shopu */
.logo { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--color-text); line-height: 1; }
.logo__znak { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em; }
.logo__cami { color: var(--color-red); }
.logo__pod { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }

.horni-pruh { background: var(--color-brand); color: #fff; font-size: var(--text-sm); }
.horni-pruh__in { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); flex-wrap: wrap; }

/* tlačítka */
.btn--velke { min-height: 64px; padding-inline: var(--space-5); font-size: var(--text-lg); line-height: 1.15; text-align: left; }
.btn--velke small { font-weight: 400; font-size: var(--text-sm); opacity: .9; }
.btn--outline { color: var(--color-brand); }

/* nadpis sekce: červená linka vlevo — z písmen CAMI */
.nadpis { position: relative; padding-left: var(--space-4); }
.nadpis::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 6px; background: var(--color-red); }

/* ---- CENOVKA (podpisový prvek) ---- */
.cenovka { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; background: #fff; color: var(--color-text);
  border: 2px solid var(--color-text); padding: 2px 12px 3px; border-radius: 3px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--color-red); white-space: nowrap; }

/* hero */
.hero { padding-block: var(--space-6) var(--space-7); background: linear-gradient(var(--color-bg-alt) 0 70%, #fff 70%); }
.hero__grid { display: grid; gap: var(--space-6); align-items: center; }
.stitek { display: inline-block; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: var(--text-sm); color: var(--color-accent); margin-bottom: var(--space-3); }
.hero__perex { font-size: var(--text-lg); max-width: 34rem; color: #33383d; }
.hero__akce { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-5); }
.fakta { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.fakta strong { display: block; font-family: var(--font-head); font-size: var(--text-lg); }
.hero__fotky { position: relative; }
.hero__velka { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.hero__mala { position: absolute; width: 42%; left: -6%; bottom: -12%; border: 6px solid #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-2); overflow: hidden; }
.hero__mala img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }
@media (max-width: 899px) { .hero__mala { display: none; } }

/* karty sortimentu */
.karty { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.karta { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.karta:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.karta__foto { position: relative; }
.karta__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: saturate(.95) contrast(1.02); }
.karta__foto .cenovka { position: absolute; right: var(--space-3); bottom: calc(-1 * var(--space-3)); }
.karta__telo { padding: var(--space-4); }
.karta__telo p { margin: 0; color: var(--color-text-muted); }

/* ceník */
.cenik__mrizka { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cenik__sloupec { background: #fff; border-radius: var(--radius-md); padding: var(--space-4); border: 1px solid var(--color-border); }
.cenik { list-style: none; margin: 0; padding: 0; }
.cenik li { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px dashed var(--color-border); }
.cenik li:last-child { border-bottom: 0; }
.cena { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* aplikace — okno na rozměr */
.app { display: grid; gap: var(--space-5); }
.app__form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; background: var(--color-bg-alt); padding: var(--space-4); border-radius: var(--radius-md); }
.app__form .field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 8rem; }
.app__form label { font-weight: 600; }
.app__form input { min-height: 48px; font: inherit; font-size: var(--text-lg); padding: 0 var(--space-3); border: 2px solid #b9b9b9; border-radius: var(--radius-sm); width: 100%; }
.app__form input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.app__pozn { font-weight: 600; }
.app__vysledek ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.app__vysledek li { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.app__vysledek li.presne { border-color: var(--color-text); border-width: 2px; }
.app__vysledek .rozmer { font-family: var(--font-head); font-weight: 800; font-size: var(--text-lg); }
.app__vysledek .typ { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
.app__vysledek p { margin-top: var(--space-3); }
@media (min-width: 900px) { .app { grid-template-columns: 1fr 1.2fr; } .app__vysledek { grid-column: 1 / -1; } }

/* výkup */
.vykup { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .vykup { grid-template-columns: 1fr 1fr; } }
.tel-velky { font-family: var(--font-head); font-weight: 800; font-size: var(--text-xl); white-space: nowrap; color: var(--color-text); }
.podminky { padding-left: 1.2em; }
.stitky { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stitky li { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); }

/* o nás */
.o-nas { display: grid; gap: var(--space-6); align-items: center; }
.o-nas__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; }
@media (min-width: 900px) { .o-nas { grid-template-columns: 1fr 1fr; } }

/* kontakt */
.section--tmava { background: var(--color-bg-dark); color: #fff; }
.section--tmava a { color: #fff; }
.section--tmava .btn--outline { color: #fff; border-color: #fff; }
.kontakt { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .kontakt { grid-template-columns: 1fr 1fr; } }
.kontakt__adresa { font-size: var(--text-xl); }
.doba { border-collapse: collapse; margin-top: var(--space-4); }
.doba th, .doba td { text-align: left; padding: var(--space-1) var(--space-4) var(--space-1) 0; font-weight: 400; }
.doba td { font-weight: 600; font-variant-numeric: tabular-nums; }
.doba__svatky { font-size: var(--text-sm); opacity: .85; }
.kontakt__karty { display: grid; gap: var(--space-3); align-content: start; }
.tel-karta { display: block; text-decoration: none; background: #fff; color: var(--color-text) !important; border-radius: var(--radius-md); padding: var(--space-4); border-left: 6px solid var(--color-red); transition: transform var(--dur-fast) var(--ease-out); }
.tel-karta:hover { transform: translateX(3px); }
.tel-karta span { display: block; color: var(--color-text-muted); }
.tel-karta strong { display: block; font-family: var(--font-head); font-size: var(--text-2xl); }
.tel-karta small { color: var(--color-text-muted); }
.kontakt__pozn { opacity: .85; }

/* rozcestník návrhů */
.rozcestnik { padding-block: var(--space-7); }
.rozcestnik h1 { margin-top: var(--space-6); }
.rozcestnik__mrizka { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: var(--space-5); }
.rozcestnik__karta { display: block; padding: var(--space-5); border: 2px solid var(--color-text); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); box-shadow: 4px 4px 0 var(--color-red); }
.rozcestnik__karta strong { display: block; font-family: var(--font-head); font-size: var(--text-xl); margin-bottom: var(--space-2); }
.rozcestnik__karta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-red); }

@media (max-width: 899px) { .header .nav__list .btn { width: 100%; } }