/* ==========================================================================
   pages/projekt-ue.css: bloki wyłącznie strony projekt-ue.html (prefiks .projekt-ue-*)
   Strona informacyjna PROW 2014-2020, bez hero ze zdjęciem (architektura.md §4.10).
   ========================================================================== */

/* 1. Nagłówek strony (typograficzny, jak .page-head) */
.projekt-ue-head{padding-block:clamp(2.5rem, 1.5rem + 4vw, 6rem) var(--section)}
.projekt-ue-head .breadcrumbs{margin-bottom:var(--s-6);color:var(--ink-2)}
.projekt-ue-head .eyebrow{margin-bottom:var(--s-4)}
.projekt-ue-head__title{font-size:clamp(2rem, 1.35rem + 2.9vw, 4rem);line-height:1.05;max-width:30ch;padding-bottom:.08em}
.projekt-ue-head__lead{margin-top:var(--s-5)}

/* 2. Tablica informacyjna operacji
   Tło białe NIEZALEŻNIE od motywu: zasady identyfikacji wizualnej PROW wymagają logotypów
   w oryginalnych kolorach na białym tle. Stąd lokalne tokeny tablicy (bez zmiany w dark mode):
   tekst w indygo z logo (--on-accent nie zmienia się w trybie ciemnym). */
.projekt-ue-board{
  --projekt-ue-board-bg:white;
  --projekt-ue-board-ink:var(--on-accent);
  --projekt-ue-board-muted:color-mix(in srgb, var(--projekt-ue-board-ink) 78%, white);
  --projekt-ue-board-line:color-mix(in srgb, var(--projekt-ue-board-ink) 16%, white);
  --logo-h:60px;
  margin:var(--s-8) 0 0;
  background:var(--projekt-ue-board-bg);
  color:var(--projekt-ue-board-ink);
  border:1px solid var(--line);
  padding:clamp(1.25rem, .8rem + 2.4vw, 3.5rem);
}
.projekt-ue-board__logos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-5) var(--s-4);justify-items:center;align-items:center;
  list-style:none;margin:0;padding:0 0 clamp(1.25rem, .8rem + 2vw, 3rem);
  border-bottom:1px solid var(--projekt-ue-board-line);
}
.projekt-ue-board__logos li{display:flex;align-items:center;justify-content:center;min-width:0}
/* Równa wysokość wszystkich znaków (flaga UE nie mniejsza niż pozostałe), bez przycinania, bez powiększania ponad 125 px oryginału. */
.projekt-ue-board__logos img{display:block;height:var(--logo-h);width:auto;max-width:100%;object-fit:contain}
@media (min-width:480px){ .projekt-ue-board{--logo-h:80px} }
@media (min-width:768px){
  .projekt-ue-board{--logo-h:92px}
  .projekt-ue-board__logos{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--s-5)}
}
@media (min-width:1024px){ .projekt-ue-board{--logo-h:112px} }
@media (min-width:1280px){ .projekt-ue-board{--logo-h:125px} .projekt-ue-board__logos{justify-content:space-around} }

.projekt-ue-board__text{
  display:grid;gap:var(--s-2);justify-items:center;text-align:center;
  padding-top:clamp(1.5rem, 1rem + 2vw, 3rem);
  color:var(--projekt-ue-board-muted);
}
.projekt-ue-board__text p{max-width:60ch;margin:0}
.projekt-ue-board__motto{color:var(--projekt-ue-board-ink);font-weight:600;font-size:var(--t-h4);line-height:1.35;margin-bottom:var(--s-4) !important}
.projekt-ue-board__name{color:var(--projekt-ue-board-ink);font-size:var(--t-h3);font-stretch:var(--w-wide);font-weight:500;line-height:1.2;letter-spacing:-.01em;text-wrap:balance;margin-block:var(--s-1) var(--s-3) !important}
.projekt-ue-board__goal{color:var(--projekt-ue-board-ink);font-weight:600;font-size:var(--t-lead);line-height:1.45;text-wrap:balance;margin-block:var(--s-1) var(--s-3) !important}
.projekt-ue-board__text p:last-child{line-height:1.7}

/* 3. Operacja w skrócie: pola faktów */
.projekt-ue-facts__list{display:grid;gap:var(--s-6) var(--gap);margin:var(--s-8) 0 0}
.projekt-ue-facts__item{display:grid;gap:var(--s-2);align-content:start;padding-top:var(--s-4);border-top:1px solid var(--line)}
.projekt-ue-facts__item dt{font-size:var(--t-small);font-weight:600;color:var(--ink-2)}
.projekt-ue-facts__item dd{margin:0;font-size:var(--t-h4);font-weight:500;line-height:1.4;color:var(--ink);max-width:48ch;text-wrap:pretty}
@media (min-width:768px){
  .projekt-ue-facts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projekt-ue-facts__item--wide{grid-column:span 2}
  .projekt-ue-facts__item--wide dd{font-size:var(--t-h3);font-stretch:var(--w-wide);font-weight:420;line-height:1.2;letter-spacing:-.01em;max-width:34ch}
}
@media (min-width:1024px){ .projekt-ue-facts__list{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 4. Pawilon dziś */
.projekt-ue-pavilion__body{display:grid;gap:var(--s-5);justify-items:start}
.projekt-ue-pavilion__body .icon-list{width:100%;margin-block:var(--s-2)}
.projekt-ue-pavilion__price{display:grid;gap:var(--s-2)}
.projekt-ue-pavilion__price .t-small{color:var(--ink-2);max-width:40ch}
@media (min-width:1024px){ .projekt-ue-pavilion .split__body{grid-column:8 / -1} .projekt-ue-pavilion .split__media{grid-column:1 / span 6} }

/* 5. Zobacz też: domyślny rytm .tiles--2 */
.projekt-ue-more .tiles{margin-top:var(--s-2)}

/* 6. Mocne CTA na koniec */
.projekt-ue-cta__grid{display:grid;gap:var(--s-7) var(--gap)}
.projekt-ue-cta__body{display:grid;gap:var(--s-5);justify-items:start}
.projekt-ue-cta__body .t-h2{max-width:18ch}
.projekt-ue-cta__actions{margin-top:var(--s-2)}
.projekt-ue-cta__lines{padding-top:var(--s-5);border-top:1px solid var(--line)}
@media (min-width:1024px){
  .projekt-ue-cta__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
  .projekt-ue-cta__body{grid-column:1 / span 7}
  .projekt-ue-cta__lines{grid-column:9 / -1;padding-top:0;padding-left:var(--s-6);border-top:0;border-left:1px solid var(--line)}
}