/* ============================================================
   DODATKI PORTU django-base (kamilajanula.pl)
   styles.css jest kopią 1:1 z Reacta — te reguły uzupełniają
   zachowania, które w SPA wynikały z warunkowego renderowania.
   ============================================================ */

/* Menu mobilne: w React renderowane tylko po otwarciu — tu ukryte domyślnie */
.menu-mobile { display: none; }
.menu-mobile.otwarte { display: flex; }

/* Breadcrumb z django-base — nie należy do designu (ukryty wizualnie, zostaje w DOM) */
nav[aria-label="Breadcrumb"] { display: none; }

/* Błędy formularzy Django */
.blad { display: block; color: var(--blad); font-size: var(--fs-xs); font-weight: 500; margin-top: -0.25rem; }

/* Pusta siatka prac (przed seederem) */
.puste { grid-column: 1 / -1; color: var(--grafit-500); font-size: var(--fs-sm); }

/* CSP-safe: zamiast inline style */
.cta-margin { margin-top: 3rem; }
/* CSP-safe: formularz logout inline (base.html) */
.inline-form { display: inline; }

/* Podstrona pracy (/prace/<slug>/) */
.praca-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.praca-detail-img { width: 100%; height: auto; border-radius: var(--r-kafel); display: block; }
.praca-detail-info .meta { margin: .5rem 0; }
.praca-detail-opis { margin: 1.5rem 0; max-width: var(--miara-tekst); }
.praca-detail-opis p { margin-bottom: 1rem; }
.praca-powiazane { margin-top: 4rem; }
.praca-powiazane .naglowek-sekcji { margin-bottom: 1.5rem; }
@media (max-width: 767px) {
  .praca-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Kafelek: obraz prowadzi na stronę pracy; lupa otwiera podgląd */
.ramka-link { display: block; position: relative; overflow: hidden; }
.ramka-link .kafel-img { transition: transform .4s ease; }
.ramka-link:hover .kafel-img { transform: scale(1.03); }
.ramka-lupa {
  position: absolute; top: .75rem; right: .75rem; z-index: 3;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--kolor-atrament, #1a1a1a);
  background: rgba(255,255,255,.85); color: var(--kolor-atrament, #1a1a1a);
  font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .85; transition: opacity .2s, transform .2s;
}
.ramka-lupa:hover { opacity: 1; transform: scale(1.1); }

/* H1 podtytul (monument-sub) — wydluzony H1 dla SEO, spójny z designem */
.monument .monument-sub {
  display: block;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--kolor-atrament, #1a1a1a);
  margin-top: 0.5rem;
  line-height: 1.2;
}

/* Breadcrumbs (zamiast <p class="etykieta"> na podstronach) */
.breadcrumbs { margin-bottom: 1rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; padding: 0; font-size: var(--fs-etykieta, 0.72rem); font-family: var(--font-body, inherit); letter-spacing: var(--ls-etykieta, 0.14em); }
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs a { color: inherit; }
.breadcrumbs .sep { color: var(--kolor-atrament, #1a1a1a); opacity: 0.45; }
.breadcrumbs li[aria-current="page"] { color: var(--cynober-500, #b03826); }