/* ============================================================
   JAKIVA studio — GEO web · pages.css
   Sdílené komponenty vnitřních stránek (služby, práce, huby,
   faq, studio, kontakt). Staví na tokenech ze style.css.
   ============================================================ */

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: 12.5px; color: var(--muted); padding: var(--s6) 0 0; letter-spacing: .01em; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li::after { content: "/"; color: var(--faint); }
.crumbs li:last-child::after { content: none; }
.crumbs a { color: var(--muted); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ---------- inner page header ---------- */
.page-head { padding: var(--s7) 0 var(--s7); border-bottom: 1px solid var(--line); }
.page-head .eyebrow { margin-bottom: var(--s4); }
.page-head h1 { font-family: var(--display); font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.0; }
.page-head h1 em { font-style: italic; color: var(--accent); }
.page-head .lede { margin-top: var(--s5); max-width: 60ch; }

/* ---------- readable prose (GEO: čitelný text bez JS) ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; margin: var(--s8) 0 var(--s4); }
.prose h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -.01em; margin: var(--s6) 0 var(--s3); }
.prose p { color: var(--muted); font-size: 17px; line-height: 1.72; margin-bottom: var(--s4); }
.prose p:first-of-type { color: var(--text); font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.6; }
.prose ul { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0 0 var(--s5) 0; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: var(--s5); margin-bottom: var(--s3); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 1px; background: var(--accent); }
.prose a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; transition: color .2s; }
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }

/* dvousloupcový layout: próza + boční meta panel */
.detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: clamp(40px, 6vw, 88px); align-items: start; }
.detail-aside { position: sticky; top: 88px; }
.aside-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s6); }
.aside-card .ak { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s3); }
.aside-card .av { color: var(--text); font-size: 15.5px; line-height: 1.55; margin-bottom: var(--s5); }
.aside-card .av:last-child { margin-bottom: 0; }
.aside-card .av a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); }
@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .detail-aside { position: static; top: auto; }
}

/* ---------- service / audience card grid ---------- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  display: flex; flex-direction: column; gap: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: clamp(24px, 3vw, 40px); text-decoration: none; color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { border-color: var(--muted); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card .cn { font-family: var(--display); font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }
.card h3, .card .ct { font-family: var(--display); font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.08; }
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.card .more { margin-top: auto; padding-top: var(--s4); color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: .03em; }
.card .more::after { content: " →"; }
@media (max-width: 760px) { .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; } }

/* ---------- pro koho — rozcestník (homepage + hub) ---------- */
.audience { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.aud-tile {
  position: relative; overflow: hidden; border-radius: var(--r-md); min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 3.4vw, 48px); text-decoration: none; color: #FBF8F1; background: #211D17;
  isolation: isolate;
}
.aud-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease), filter .6s var(--ease); }
.aud-tile::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(18,14,10,.86) 0%, rgba(18,14,10,.30) 56%, rgba(18,14,10,.08) 100%); }
.aud-tile:hover img { transform: scale(1.04); filter: brightness(.96); }
.aud-tile .ak { font-size: clamp(12px, 1.05vw, 15px); letter-spacing: .12em; text-transform: uppercase; color: #D6BE96; font-weight: 600; margin-bottom: var(--s3); white-space: nowrap; }
.aud-tile h2, .aud-tile h3, .aud-tile .at { font-family: var(--display); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; color: #FBF8F1; }
.aud-tile p { color: rgba(251,248,241,.82); font-size: 15.5px; line-height: 1.55; margin-top: var(--s3); max-width: 40ch; }
.aud-tile .more { margin-top: var(--s5); color: #D6BE96; font-weight: 600; font-size: 16px; letter-spacing: .03em; }
.aud-tile .more::after { content: " →"; font-size: 1.25em; }
@media (max-width: 760px) { .audience { grid-template-columns: 1fr; } .aud-tile { min-height: 280px; } }

/* ---------- FAQ (čitelné bez JS přes details/summary) ---------- */
.faq-list { max-width: 860px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: var(--s6) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: -.01em; color: var(--text); transition: color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary .fq-ico { flex: 0 0 auto; width: 24px; height: 24px; position: relative; }
.faq-item summary .fq-ico::before,
.faq-item summary .fq-ico::after { content: ""; position: absolute; background: var(--accent); transition: transform .25s var(--ease); }
.faq-item summary .fq-ico::before { top: 11px; left: 4px; width: 16px; height: 2px; }
.faq-item summary .fq-ico::after { top: 4px; left: 11px; width: 2px; height: 16px; }
.faq-item[open] summary .fq-ico::after { transform: scaleY(0); }
.faq-answer { color: var(--muted); font-size: 16.5px; line-height: 1.72; padding: 0 0 var(--s6); max-width: 70ch; }
.faq-answer.todo { color: var(--faint); font-style: italic; }

/* ---------- CTA band (uzávěr stránek) ---------- */
.cta-band { border-top: 1px solid var(--line); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.cta-inner h2 { font-family: var(--display); font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.06; }
.cta-inner h2 em { font-style: italic; color: var(--accent); }
.cta-actions { display: flex; gap: var(--s4); flex-wrap: wrap; }
.cta-actions .btn { min-width: 210px; justify-content: center; }

/* ---------- inline embed (konfigurátor) ---------- */
.embed { position: relative; width: 100%; aspect-ratio: 16/10; min-height: 540px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); margin: var(--s6) 0; }
.embed.tall { aspect-ratio: auto; min-height: 0; height: 1060px; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.embed-note { font-size: 13px; color: var(--faint); margin-top: calc(-1 * var(--s4)); margin-bottom: var(--s7); }
@media (max-width: 760px) { .embed.tall { aspect-ratio: auto; height: 1320px; } }

/* ---------- generic media ---------- */
.media-full { width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); display: block; margin: var(--s6) 0; }

/* ---------- footer descriptor (GEO) ---------- */
.foot-desc { max-width: 80ch; color: var(--faint); font-size: 13px; line-height: 1.65; margin: 0; }

/* ---------- section helper ---------- */
.section-tight { padding: var(--s8) 0; border-top: 1px solid var(--line); }
.sec-eyebrow { margin-bottom: var(--s4); }
.sec-title { font-family: var(--display); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.06; margin-bottom: var(--s7); }

/* ============================================================
   CASE STUDY (sdílené pro /prace/{slug}/)
   ============================================================ */
.cs-head { padding: var(--s7) 0 var(--s7); }
.cs-head .eyebrow { margin-bottom: var(--s4); }
.cs-head h1 { font-family: var(--display); font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(2.6rem,6vw,4.6rem); line-height: 1.0; max-width: 16ch; }
.cs-stand { color: var(--muted); font-size: clamp(1.1rem,2vw,1.35rem); line-height: 1.5; max-width: none; margin-top: var(--s5); }
.cs-meta { display: flex; flex-direction: column; gap: 0; margin-top: var(--s7); border-top: 1px solid var(--line); max-width: none; }
.cs-meta > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s5); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.cs-meta .mk { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.cs-meta .mv { font-family: var(--display); font-size: 17px; color: var(--text); }

.cs-lead-visual { margin: var(--s7) 0 var(--s9); }
.v-hero { position: relative; aspect-ratio: 16/9; width: 100%; overflow: hidden; border-radius: var(--r-md); background: #211D17; }
.v-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.v-hero video::-webkit-media-controls,
.v-hero video::-webkit-media-controls-enclosure,
.v-hero video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }

.cs-img { width: 100%; display: block; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); }
.cs-visual { margin: 0 auto var(--s9); }
.cs-visual.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* konfigurátor embed v case study */
.cs-embed { margin: 0 0 var(--s9); }
/* panorama / 360° konfigurátor — poměrový */
.cs-embed .frame { position: relative; aspect-ratio: 16/10; min-height: 540px; width: 100%; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
/* vysoký konfigurátor (produkt — obraz + varianty pod sebou) → celý bez scrollu */
.cs-embed.tall .frame { aspect-ratio: auto; min-height: 0; height: 1060px; }
.cs-embed .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cs-embed figcaption { font-size: 13px; color: var(--faint); margin-top: var(--s3); }
@media (max-width: 760px) {
  .cs-embed .frame { aspect-ratio: 3/4; min-height: 460px; }
  .cs-embed.tall .frame { aspect-ratio: auto; height: 1320px; }
}

.cs-gallery { border-top: 1px solid var(--line); padding-top: var(--s7); }
.cs-gallery h2 { font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: var(--s6); }
.cs-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s4); }
.cs-grid .full { grid-column: 1 / -1; }

.cs-foot-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s8) 0; border-top: 1px solid var(--line); margin-top: var(--s9); }
.cs-foot-nav .next { text-align: right; }
.cs-foot-nav .lbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.cs-foot-nav .ttl { font-family: var(--display); font-size: 22px; color: var(--text); text-decoration: none; transition: color .2s; }
.cs-foot-nav .ttl:hover { color: var(--accent); }
@media (max-width:760px){
  .cs-visual.two, .cs-grid { grid-template-columns: 1fr; }
}