/* ============================================================
   6 · KAKO VSE TO DELUJE — section styles
   Ported 1:1 from prototype Alfred.dc.html (section 6, cream).
   6 cards #FBF6EB, brass border, brass Playfair number + title.
   Grid = repeat(auto-fit, minmax(300px, 1fr)) per prototype — at
   full 1028px content width this yields 3 columns (2 rows × 3);
   README calls it 2-col, prototype CSS is authoritative.
   Depends on shared base for: .wrap, .eyebrow, h2, .lead, reveal.
   ============================================================ */

.tehnika {
  background: var(--cream, #F4EDE0);
  color: var(--navy, #0B1929);
  padding-block: clamp(64px, 9vw, 120px);  /* prototype section rhythm */
}
.tehnika .wrap {
  max-width: 1140px;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* header — prototype spec (scoped, see knjiznica.css note) */
.tehnika .eyebrow {
  font: 600 12px var(--sans, 'Inter', sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass, #B8935A);
  margin: 0;
}
.tehnika .eyebrow::before { content: none; }
.tehnika h2 {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.tehnika .lead {
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--graphite, #2C3440);
  max-width: 60ch;
}

.teh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.teh-card {
  border: 1px solid rgba(184, 147, 90, .4);
  border-radius: var(--radius, 2px);
  padding: clamp(22px, 2.8vw, 30px);
  background: #FBF6EB;
}

.teh-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.teh-num {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--brass, #B8935A);
}
.teh-card h3 {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
  text-wrap: balance;
}
.teh-card p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--graphite, #2C3440);
}