/* KUBINKA — shared styles for inner pages (history, bazaar, life, today, gallery, map, about). */

.ph-bg { position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; filter: saturate(.9); }

.sec { padding: clamp(3.5rem,7vw,6rem) 0; }
.sec.alt { background: var(--bg-2); }
.prose-narrow { max-width: 72ch; margin: 0 auto; }
.prose-narrow.center { text-align:center; }
.lead { font-size: 1.12rem; color: var(--ink-soft); }

/* alternating image / text rows */
.frow { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem,4vw,3.5rem); align-items:center; margin-bottom: clamp(2.6rem,5vw,4.5rem); }
.frow:last-child { margin-bottom:0; }
.frow:nth-child(even) .frow-media { order: 2; }
@media (max-width:820px){ .frow{ grid-template-columns:1fr; } .frow:nth-child(even) .frow-media{ order:0; } }
.frow-media { border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow); }
.frow-media img { width:100%; aspect-ratio: 4/3; object-fit:cover; filter: saturate(.92); transition: transform .6s var(--ease); }
.frow-media:hover img { transform: scale(1.04); }
.frow-media figcaption { font-size:.78rem; color: var(--ink-soft); padding:.6rem .2rem 0; font-style:italic; }
.frow-copy .kicker { margin-bottom:.7rem; }
.frow-copy h2 { font-size: clamp(1.6rem,1.2rem+1.6vw,2.4rem); color: var(--ink); margin-bottom: 1rem; }
.frow-copy p { color: var(--ink-soft); margin-bottom: .9rem; }

/* honesty / myth-busting callout */
.callout { border-inline-start: 4px solid var(--ochre); background: var(--bg-2); border-radius: var(--r); padding: 1.2rem 1.4rem; margin-top: 1.2rem; font-size:.95rem; color: var(--ink-soft); }
.callout strong { color: var(--ink); }
.callout.warn { border-color: var(--terra); }

/* cards grid */
.kgrid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
.kgrid.two { grid-template-columns: repeat(2,1fr); }
@media (max-width:820px){ .kgrid, .kgrid.two{ grid-template-columns:1fr; } }
.kcard { background: var(--bg-card); border:1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow); }
.kcard h3 { font-size:1.3rem; color: var(--ink); margin-bottom:.6rem; }
.kcard p { color: var(--ink-soft); font-size:.95rem; }
.kcard .note { font-size:.82rem; font-style:italic; color: var(--stone); margin-top:.7rem; }

/* timeline */
.tl { position:relative; max-width: 880px; margin: 0 auto; }
.tl::before { content:""; position:absolute; inset-block:0; inset-inline-start:50%; width:2px; background: linear-gradient(var(--terra), var(--ochre)); transform: translateX(-50%); }
.tl-item { position:relative; width:50%; padding:1.1rem 2.4rem; }
.tl-item:nth-child(odd){ inset-inline-start:0; text-align:end; }
.tl-item:nth-child(even){ inset-inline-start:50%; }
.tl-item::after { content:""; position:absolute; inset-block-start:1.7rem; width:15px; height:15px; border-radius:50%; background: var(--bg); border:3px solid var(--terra); }
.tl-item:nth-child(odd)::after{ inset-inline-end:-7.5px; } .tl-item:nth-child(even)::after{ inset-inline-start:-7.5px; }
.tl-card { background: var(--bg-card); border-radius: var(--r-lg); padding:1.2rem 1.4rem; box-shadow: var(--shadow); display:inline-block; text-align:start; }
.tl-year { font-family: var(--f-display); font-weight:700; font-size:1.4rem; color: var(--terra); }
.tl-t { font-family: var(--f-display); font-weight:700; color: var(--ink); margin:.2rem 0 .4rem; }
.tl-d { color: var(--ink-soft); font-size:.92rem; }
@media (max-width:720px){
  .tl::before{ inset-inline-start:8px; }
  .tl-item, .tl-item:nth-child(even){ width:100%; inset-inline-start:0; text-align:start; padding-inline-start:2.2rem; padding-inline-end:0; }
  .tl-item:nth-child(odd){ text-align:start; }
  .tl-item::after,.tl-item:nth-child(odd)::after,.tl-item:nth-child(even)::after{ inset-inline-start:1px; }
}

/* gallery */
.gfilters { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-bottom: 2rem; }
.chip { font-family: var(--f-body); font-weight:600; font-size:.84rem; padding:.55em 1.1em; border-radius:999px; border:1.5px solid var(--line); color: var(--ink-soft); background: var(--bg-card); transition:.3s; }
.chip:hover { border-color: var(--ochre); color: var(--ink); }
.chip.is-active { background: var(--terra); border-color: var(--terra); color:#fff; }
.ggrid { columns: 3; column-gap: 1rem; }
@media (max-width:900px){ .ggrid{ columns:2; } } @media (max-width:560px){ .ggrid{ columns:1; } }
figure.shot { break-inside:avoid; margin:0 0 1rem; position:relative; overflow:hidden; border-radius: var(--r-lg); cursor:zoom-in; box-shadow: var(--shadow); background: var(--bg-2); }
figure.shot img { width:100%; display:block; filter: saturate(.92); transition: transform .6s var(--ease); }
figure.shot:hover img { transform: scale(1.05); }
figure.shot figcaption { position:absolute; inset-block-end:0; inset-inline:0; padding:1.6rem .9rem .7rem; font-size:.78rem; color:#fff; background: linear-gradient(transparent, rgba(20,12,6,.88)); opacity:0; transition: opacity .35s; }
figure.shot:hover figcaption { opacity:1; }
.credits-box { max-width:72ch; margin:0 auto; text-align:center; }
.credits-box h2 { font-size:1.5rem; color: var(--ink); margin-bottom:1rem; }
.credits-box p { color: var(--ink-soft); font-size:.92rem; }

/* map */
.placecards { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; margin-bottom: 2.4rem; }
@media (max-width:820px){ .placecards{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .placecards{ grid-template-columns:1fr; } }
.placecard { background: var(--bg-card); border:1px solid var(--line-soft); border-radius: var(--r-lg); padding:1.4rem; box-shadow: var(--shadow); }
.placecard h3 { font-size:1.1rem; color: var(--ink); display:flex; align-items:center; gap:.5rem; }
.placecard h3 .dot { width:.6rem; height:.6rem; border-radius:50%; background: var(--terra); flex:none; }
.placecard p { color: var(--ink-soft); font-size:.9rem; margin-top:.4rem; }
.mapframe { border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow); }
.mapframe iframe { width:100%; height:440px; border:0; display:block; filter: sepia(.15) saturate(.9); }
.map-note { text-align:center; font-size:.84rem; color: var(--ink-soft); font-style:italic; margin-top:1.4rem; }

/* form */
.form { background: var(--bg-card); border:1px solid var(--line-soft); border-radius: var(--r-lg); padding: 2.2rem; box-shadow: var(--shadow); max-width: 640px; }
.form h3 { font-size:1.5rem; color: var(--ink); margin-bottom:.5rem; }
.form > p { color: var(--ink-soft); margin-bottom: 1.2rem; }
.field { margin-bottom:1rem; }
.field input, .field textarea { width:100%; background: var(--bg); border:1.5px solid var(--line); color: var(--ink); padding:.9rem 1rem; border-radius: var(--r); font:inherit; transition: border-color .3s; }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--terra); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.form-note { font-size:.8rem; color: var(--ink-soft); font-style:italic; margin-top:1rem; }

.note-line { text-align:center; font-size:.84rem; color: var(--ink-soft); font-style:italic; margin-top:2rem; }