:root{
  --paper:#f5f1e6;
  --ink:#141414;
  --muted:#5a544d;
  --rule:#2a2a2a;
  --hair:#b9b2a7;
  --accent:#7a1f1f;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:#0f0f0f;
  color:var(--ink);
  font:16px/1.65 Georgia,"Times New Roman",serif;
}

.paper{
  max-width:1100px;
  margin:24px auto;
  background:var(--paper);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}

.top{
  padding:18px 18px 10px;
  border-bottom:2px solid var(--rule);
}

.logo{
  display:block;
  text-align:center;
  color:inherit;
  text-decoration:none;
  padding:6px 0 10px;
  border-top:2px solid var(--rule);
  border-bottom:1px solid var(--hair);
}
.logo__kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.logo__title{font-size:44px;letter-spacing:.08em}
.logo__name{font-size:18px;color:var(--muted);letter-spacing:.06em}

.menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  justify-content:center;
  padding:10px 0 0;
}
.menu a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding:4px 6px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.menu a:hover{border-bottom-color:var(--ink)}
.menu a.is-current{border-bottom-color:var(--accent);color:var(--accent)}

.grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  padding:14px 18px 22px;
  grid-template-areas:
    "contact photo"
    "content content";
}
.box--contact{grid-area:contact}
.box--
photo{grid-area:photo}
.content{grid-area:content}

.box{
  border:1px solid var(--hair);
  background:rgba(255,255,255,.25);
}
.box__title{
  padding:10px 10px 8px;
  border-bottom:1px solid var(--hair);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.box__content{padding:10px}

.small{font-size:12px;color:var(--muted)}
.phone{font-size:20px;letter-spacing:.06em}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}

.rule{border:none;border-top:1px solid var(--hair);margin:12px 0}

.input{
  width:100%;
  padding:10px 10px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.55);
  font:inherit;
}
.btn{
  margin-top:8px;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
}
.btn:hover{background:rgba(0,0,0,.06)}

.msg{margin:10px 0 0;font-size:13px}
.msg--ok{color:#0f5a2f}
.msg--bad{color:#8a1d1d}

.photo{
  width:100%;
  height:240px;
  object-fit:cover;
  border:1px solid var(--hair);
  display:block;
  background:rgba(0,0,0,.05);
}

.content{
  border-top:1px solid var(--hair);
  padding-top:14px;
}
.badge{
  display:inline-block;
  font-size:12px;
  padding:3px 8px;
  border:1px solid var(--hair);
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.content__meta{margin-bottom:10px}

/* Treść jak gazeta: 2 kolumny, ale tylko dla prostego tekstu */
.content__body{
  column-count:2;
  column-gap:34px;
  column-rule:1px solid var(--hair);
}
.content__body h1,
.content__body h2,
.content__body h3{column-span:all;line-height:1.15;margin:0 0 10px}
.content__body p{margin:0 0 12px}
.content__body img,
.content__body iframe,
.content__body object,
.content__body embed{
  max-width:100%;
  height:auto;
  break-inside:avoid;
}

/* Linki */
.content__body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(122,31,31,.35)}
.content__body a:hover{border-bottom-color:var(--accent)}

.footer{padding:14px 18px 20px}
.footer__line{height:2px;background:var(--rule);opacity:.9;margin-bottom:10px}
.footer__inner{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;letter-spacing:.06em}

/* Mobile */
@media (max-width: 900px){
  .logo__title{font-size:34px}
  .grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "contact"
      "photo"
      "content";
  }
  .content__body{column-count:1;column-rule:none}
  .photo{height:200px}
}

.cta{
  column-span: all;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.35);
  padding:12px 12px;
  margin:12px 0 6px;
}
.cta h3{margin:0 0 8px}

.offer-grid{
  column-span: all;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:10px 0 16px;
}

.offer-card{
  border:1px solid var(--hair);
  background:rgba(255,255,255,.28);
  padding:10px;
}

.offer-card__img{
  width:100%;
  height:140px;
  object-fit:cover;
  border:1px solid var(--hair);
  display:block;
  margin:0 0 10px;
  background:rgba(0,0,0,.05);
}

.offer-card__title{
  margin:0 0 6px;
  line-height:1.15;
}

.offer-card__text{
  margin:0 0 10px;
  font-size:14px;
  color:var(--ink);
}

.offer-card__cta{
  margin:0;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width: 900px){
  .offer-grid{grid-template-columns:1fr;}
  .offer-card__img{height:180px;}
}

.offer-grid{
  grid-auto-flow: row;
}

/* Ostatni rząd z 2 kaflami – wyśrodkuj */
.offer-grid > .offer-card:nth-last-child(1):nth-child(3n+2){
  grid-column: 2;
}
.video-embed{
  column-span: all;
  border:1px solid var(--hair);
  background:rgba(0,0,0,.08);
  overflow:hidden;
  border-radius:10px;
}

.video-embed iframe{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
}

.bio{
  column-span: all;
  margin-top:14px;
}

.bio h2{ margin:0 0 6px; }
.bio h3{ margin:0 0 12px; color:var(--muted); font-weight:normal; }
.bio__links{ margin-top:12px; }

.video-mini{
  width:100%;
  aspect-ratio: 16 / 9;
  border:1px solid var(--hair);
  border-radius:10px;
  overflow:hidden;
  background:rgba(0,0,0,.08);
}

.video-mini iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

/* Oferta — mobile */
@media (max-width: 900px){
  .offer-grid{
    grid-template-columns: 1fr;
    gap:12px;
    margin:10px 0 14px;
  }

  .offer-card{
    padding:12px;
  }

  .offer-card__img{
    height:180px; /* na telefonie większy kadr */
  }

  .offer-card__title{
    font-size:18px;
  }

  .offer-card__text{
    font-size:14px;
    line-height:1.55;
  }

  .offer-card__cta{
    font-size:12px;
  }
}

/* Opcjonalnie: na większych telefonach (landscape / duże ekrany) 2 kolumny */
@media (min-width: 520px) and (max-width: 900px){
  .offer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.slider{
  column-span: all;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.25);
  padding:10px;
}

.slider__viewport{
  overflow:hidden;
  border:1px solid var(--hair);
  border-radius:12px;
  background:rgba(0,0,0,.06);
}

.slider__track{
  display:flex;
  transform:translate3d(0,0,0);
  transition: transform 280ms ease;
  will-change: transform;
}

.slider__track.is-dragging{
  transition:none;
  cursor:grabbing;
}

.slider__slide{
  min-width:100%;
  margin:0;
}

.slider__img{
  width:100%;
  height: min(520px, 55vh);
  object-fit: cover;
  display:block;
}

.slider__controls{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.slider__btn{
  border:1px solid var(--rule);
  background:transparent;
  color:var(--ink);
  width:44px;
  height:36px;
  border-radius:10px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.slider__btn:hover{ background:rgba(0,0,0,.06); }

.slider__dots{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
  flex:1;
}

.slider__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:transparent;
  cursor:pointer;
}

.slider__dot.is-active{
  background:var(--accent);
  border-color:var(--accent);
}

@media (max-width: 900px){
  .slider__img{ height: 52vh; }
}
.slider__img{
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.10), rgba(0,0,0,.06));
}
.slider__img[src]{
  background: none;
}
.contact-form{ column-span: all; }
.cf__label{ display:block; font-size:12px; color:var(--muted); letter-spacing:.06em; margin:10px 0 6px; }
.cf__input, .cf__textarea{
  width:100%;
  padding:10px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.55);
  font:inherit;
}



.clients-list{
  margin:0;
  padding-left:18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px 34px;
}

.clients-list li{
  margin:0;
  word-break: break-word;
}

@media (max-width: 900px){
  .clients-list{ grid-template-columns: 1fr; }
}

.media-grid{
  column-span: all;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:10px;
}

.media-item{
  border:1px solid var(--hair);
  background:rgba(255,255,255,.28);
  padding:12px;
}

.media-item h2{ margin:0 0 8px; line-height:1.15; }
.media-links{ margin:0; padding-left:18px; }
.media-links li{ margin:0 0 6px; }

.media-item .video-embed{
  margin-top:10px;
  border-radius:12px;
}

@media (max-width: 900px){
  .media-grid{ grid-template-columns: 1fr; }
}

.trick-cards{
  column-span: all;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;

  /* ~20% mniejsze “wizualnie” przez zawężenie sekcji z kartami */
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
}

.trick-cardimg{
  position:relative;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.18);
  cursor:pointer;
  overflow:hidden;

  /* drobne “zmniejszenie” kafla bez rozwalania siatki */
  max-width: 92%;
  margin: 0 auto;

  transition: filter 180ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

/* domyślnie lekko mniej widoczne (żeby zaznaczone “wyskakiwały”) */
.trick-cardimg:not(.is-selected){
  filter: grayscale(70%) contrast(0.95) brightness(0.9);
}

.trick-cardimg img{
  width:100%;
  height:auto;
  display:block;
}

/* overlay “WYBIERAM” */
.trick-cardimg__tag{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scale(0.98);
  padding:8px 12px;
  border-radius:999px;
  border:2px solid #c00;
  color:#c00;
  background: rgba(255,255,255,.85);
  font-weight:800;
  letter-spacing:.08em;
  font-size:12px;

  opacity:0;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events:none;
}

.trick-cardimg.is-selected{
  border:3px solid #c00;
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.trick-cardimg.is-selected .trick-cardimg__tag{
  opacity:1;
  transform: translate(-50%, -50%) scale(1);
}

.trick-cards.is-disabled{
  pointer-events:none;
  opacity:.7;
}

/* mobile: 2 w rzędzie, żeby nie było mikro */
@media (max-width: 900px){
  .trick-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 680px;
  }
}

.box--photo .photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* to jest to ustawienie */
  display: block;
}

.gallery-grid{
  column-span: all;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

.gallery-item{
  display:block;
  border:1px solid var(--hair);
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.05);
}

.gallery-item__img{
  width:100%;
  height: min(320px, 40vh);
  object-fit: cover;
  object-position: center;
  display:block;
}

@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

.golden{ color:#b08a2a; font-weight:700; }
.typewriter{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }