@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   KLETNO — podstrona: Atrakcje i miejsca warte odwiedzenia
   Style TYLKO dla tej podstrony (wspólne: css/style.css)
   ═══════════════════════════════════════════════════════════════ */

/* Wspólne komponenty podstron (nagłówek, okruszki, sekcje, mapa i markery)
   przeniesione do css/style.css — tu zostają tylko style tej podstrony. */

/* ── KARTY ATRAKCJI (image + body) ─────────────────────────── */
.acards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
.acards--2{ grid-template-columns:repeat(2,1fr); }
.acard{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .5s var(--spring), box-shadow .5s var(--spring); }
.acard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.acard__img{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.acard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--spring); }
.acard:hover .acard__img img{ transform:scale(1.05); }
.acard__img::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(9,14,11,.5), transparent 52%); }
.acard__tag{ position:absolute; left:14px; top:14px; z-index:2; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream); background:rgba(19,28,22,.5); backdrop-filter:blur(6px); border:1px solid rgba(251,248,241,.28); border-radius:999px; padding:5px 12px; }
.acard__body{ padding:clamp(20px,2vw,26px); display:flex; flex-direction:column; gap:10px; flex:1; }
.acard__body h3{ font-family:var(--serif); font-weight:500; font-size:1.6rem; color:var(--ink); line-height:1.1; }
.acard__body p{ font-size:13.5px; color:var(--ink-muted); font-weight:300; line-height:1.6; flex:1; }
.acard__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; padding-top:4px; }
.acard__meta span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.acard__meta i{ font-size:15px; color:var(--moss); }
.acard__link{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; color:var(--moss); text-decoration:none; font-weight:500; }
.acard__link i{ transition:transform .45s var(--spring); }
.acard:hover .acard__link i{ transform:translate(3px,-3px); }

/* ── SZCZYTY (lista z wysokością) ──────────────────────────── */
.peaks{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,20px); }
.peak{ display:flex; align-items:center; gap:20px; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px); box-shadow:var(--shadow-sm); transition:transform .5s var(--spring), box-shadow .5s var(--spring); }
.peak:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.peak__alt{ flex:0 0 auto; text-align:center; min-width:74px; }
.peak__alt b{ display:block; font-family:var(--serif); font-size:clamp(1.6rem,2.4vw,2.1rem); color:var(--moss); line-height:1; letter-spacing:-0.01em; }
.peak__alt span{ font-size:11px; color:var(--ink-muted); letter-spacing:.03em; }
.peak__txt h3{ font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--ink); margin-bottom:3px; }
.peak__txt p{ font-size:12.8px; color:var(--ink-muted); font-weight:300; line-height:1.5; }

/* ── TRASY TURYSTYCZNE (opisowo) ───────────────────────────── */
.routes{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,22px); }
.route{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,2.2vw,28px);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--spring), box-shadow .5s var(--spring); }
.route:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.route__top{ display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.route__icon{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:var(--custom); color:var(--moss); border:1px solid var(--line); }
.route__icon i{ font-size:24px; }
.route h3{ font-family:var(--serif); font-weight:500; font-size:1.45rem; color:var(--ink); line-height:1.1; }
.route p{ font-size:13.5px; color:var(--ink-muted); font-weight:300; line-height:1.6; }
.route__badges{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.route__badges span{ font-size:11px; letter-spacing:.04em; color:var(--ink-soft); background:var(--custom); border:1px solid var(--line); border-radius:999px; padding:5px 11px; display:inline-flex; align-items:center; gap:6px; }
.route__badges i{ font-size:13px; color:var(--moss); }

/* ── RESPONSYWNOŚĆ ─────────────────────────────────────────── */
@media (max-width:900px){
  .acards, .acards--2{ grid-template-columns:1fr; }
  .peaks{ grid-template-columns:1fr; }
  .routes{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .peak{ flex-direction:row; gap:14px; }
  .peak__alt{ min-width:62px; }
}