/* ulice.css

   Redesign spójny z pozostałymi podstronami mieszkańców.

*/



.page-root.ulice-page {

  --ul-navy: #0d3566;

  --ul-navy-dark: #08284e;

  --ul-blue: #2f79c8;

  --ul-blue-soft: #eef5fc;

  --ul-line: #ccd9ea;

  --ul-line-soft: #e6edf5;

  --ul-orange: #e99912;

  --ul-orange-soft: #fff8e9;

  --ul-text: #102f58;

  --ul-muted: #66798e;

  --ul-radius: 12px;



  max-width: 1200px;

  margin-inline: auto;

  padding: 34px 28px 48px;

  color: var(--ul-text);

}



.ulice-page,

.ulice-page *,

.ulice-page *::before,

.ulice-page *::after {

  box-sizing: border-box;

}



.ulice-page a {

  color: var(--ul-navy);

}



.ulice-page a:focus-visible,

.ulice-page button:focus-visible,

.ulice-page input:focus-visible,

.ulice-page summary:focus-visible {

  outline: 3px solid rgba(233, 153, 18, .38);

  outline-offset: 2px;

}



.u-sr-only {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



/* HERO */

.ulice-hero {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);

  align-items: center;

  gap: 28px;

  margin-bottom: 20px;

}



.ulice-title {

  margin: 0 !important;

  text-align: left !important;

  color: var(--ul-navy) !important;

  font-size: clamp(2rem, 3.2vw, 3rem);

  line-height: 1.08;

  letter-spacing: -0.02em;

}



.ulice-title-accent {

  display: block;

  width: 66px;

  height: 3px;

  margin-top: 16px;

  border-radius: 999px;

  background: var(--ul-orange);

}



.ulice-lead {

  max-width: 650px;

  margin: 25px 0 0;

  font-size: 1rem;

  line-height: 1.55;

}



.ulice-hero__graphic {

  justify-self: end;

  width: min(100%, 390px);

}



.ulice-hero__img {

  display: block;

  width: 100%;

  height: auto;

}



/* INFO */

.ulice-info {

  display: grid;

  grid-template-columns: 48px minmax(0, 1fr);

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

  padding: 15px 18px;

  border: 1px solid #f0c66d;

  border-radius: var(--ul-radius);

  background: var(--ul-orange-soft);

}



.ulice-info__icon {

  display: block;

  width: 42px;

  height: 42px;

  object-fit: contain;

}



.ulice-info p {

  margin: 0;

  line-height: 1.45;

}



.ulice-info a {

  font-weight: 700;

}



/* TYTUŁY SEKCJI */

.ulice-section-title {

  margin: 0;

  color: var(--ul-navy);

  font-size: 1.25rem;

  line-height: 1.25;

}



/* KONTAKTY */

.ulice-contacts {

  margin-bottom: 18px;

}



.ulice-contacts__grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

  margin-top: 12px;

}



.ulice-contact-card {

  display: grid;

  grid-template-columns: 58px minmax(0, 1fr);

  gap: 14px;

  min-width: 0;

  padding: 17px 18px;

  border: 1px solid var(--ul-line);

  border-radius: var(--ul-radius);

  background: #fff;

  box-shadow: 0 5px 16px rgba(13, 53, 102, .025);

}



.ulice-contact-card__icon {

  display: grid;

  place-items: center;

  width: 54px;

  height: 54px;

  border-radius: 50%;

  background: var(--ul-blue-soft);

}



.ulice-contact-card__icon img {

  display: block;

  width: 46px;

  height: 46px;

  object-fit: contain;

}



.ulice-contact-card h3 {

  margin: 0 0 8px;

  color: var(--ul-navy);

  font-size: 1rem;

  line-height: 1.25;

}



.ulice-contact-line {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  width: fit-content;

  max-width: 100%;

  margin: 5px 0 0;

  color: var(--ul-text);

  font-size: .88rem;

  line-height: 1.35;

  text-decoration: none;

  overflow-wrap: anywhere;

}



a.ulice-contact-line:hover {

  color: var(--ul-blue);

}



.ulice-mini-icon {

  display: inline-grid;

  place-items: center;

  flex: 0 0 16px;

  width: 16px;

  height: 16px;

  margin-top: 1px;

}



.ulice-mini-icon svg {

  display: block;

  width: 15px;

  height: 15px;

  fill: none;

  stroke: var(--ul-navy);

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;

}



/* KATALOG */

.ulice-directory {

  margin-top: 8px;

}



.ulice-directory__head {

  display: grid;

  grid-template-columns: minmax(180px, auto) minmax(320px, 520px);

  align-items: end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 12px;

}



.ulice-search {

  position: relative;

}



.ulice-search__icon {

  position: absolute;

  left: 15px;

  top: 50%;

  display: grid;

  place-items: center;

  width: 20px;

  height: 20px;

  transform: translateY(-50%);

  color: var(--ul-navy);

  pointer-events: none;

}



.ulice-search__icon svg {

  width: 19px;

  height: 19px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

}



.ulice-search__input {

  width: 100%;

  min-height: 46px;

  padding: 9px 46px;

  border: 1px solid var(--ul-line);

  border-radius: 10px;

  background: #fff;

  color: var(--ul-text);

  font: inherit;

  appearance: none;

}



.ulice-search__input::placeholder {

  color: #7a899c;

}



.ulice-search__input::-webkit-search-cancel-button {

  display: none;

}



.ulice-search__clear {

  position: absolute;

  right: 4px;

  top: 50%;

  width: 38px;

  height: 38px;

  padding: 0;

  transform: translateY(-50%);

  border: 0;

  border-radius: 8px;

  background: transparent;

  color: var(--ul-muted);

  font-size: 1.45rem;

  cursor: pointer;

}



/* Jedna czytelna lista zamiast osobnych dużych kafli */

.ulice-estates {

  overflow: hidden;

  border: 1px solid var(--ul-line);

  border-radius: var(--ul-radius);

  background: #fff;

}



.ulice-estate {

  border: 0;

  border-bottom: 1px solid var(--ul-line-soft);

  background: #fff;

}



.ulice-estate:last-child {

  border-bottom: 0;

}



.ulice-estate[hidden] {

  display: none !important;

}



.ulice-estate__summary {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  min-height: 60px;

  padding: 9px 16px;

  list-style: none;

  color: var(--ul-navy);

  font-weight: 700;

  cursor: pointer;

  user-select: none;

}



.ulice-estate__summary::-webkit-details-marker {

  display: none;

}



.ulice-estate__heading {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}



.ulice-estate__heading img {

  display: block;

  flex: 0 0 36px;

  width: 36px;

  height: 36px;

  object-fit: contain;

}



.ulice-estate__chevron {

  flex: 0 0 10px;

  width: 10px;

  height: 10px;

  margin-right: 4px;

  border-right: 2px solid var(--ul-navy);

  border-bottom: 2px solid var(--ul-navy);

  transform: rotate(45deg);

  transition: transform .18s ease;

}



.ulice-estate[open] .ulice-estate__chevron {

  transform: rotate(225deg);

}



.ulice-estate__content {

  padding: 0 18px 13px 64px;

}



.ulice-streets {

  display: flex;

  flex-wrap: wrap;

  gap: 6px 16px;

  margin: 0;

  padding: 0;

  list-style: none;

}



.ulice-streets li {

  position: relative;

  padding-left: 11px;

  color: var(--ul-text);

  font-size: .9rem;

}



.ulice-streets li::before {

  content: '';

  position: absolute;

  left: 0;

  top: .7em;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--ul-orange);

  transform: translateY(-50%);

}



.ulice-streets li[hidden] {

  display: none !important;

}



.ulice-streets li.is-match {

  padding: 1px 5px 1px 15px;

  border-radius: 5px;

  background: var(--ul-orange-soft);

  font-weight: 700;

}



.ulice-no-results {

  margin: 12px 0 0;

  padding: 14px 16px;

  border: 1px solid #f0c66d;

  border-radius: 10px;

  background: var(--ul-orange-soft);

  color: #6b4300;

  font-weight: 700;

}



/* DOLNA INFORMACJA */

.ulice-notice {

  display: grid;

  grid-template-columns: 48px minmax(0, 1fr);

  align-items: center;

  gap: 14px;

  width: min(100%, 650px);

  margin-top: 14px;

  padding: 15px 18px;

  border: 1px solid #f0c66d;

  border-radius: var(--ul-radius);

  background: var(--ul-orange-soft);

}



.ulice-notice__icon {

  display: block;

  width: 44px;

  height: 44px;

  object-fit: contain;

}



.ulice-notice p {

  margin: 0;

  line-height: 1.4;

  font-size: .91rem;

}



.ulice-footer-art {

  margin-top: -28px;

  pointer-events: none;

}



.ulice-footer-art img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 150px;

  object-fit: contain;

  object-position: center bottom;

}



/* TABLET */

@media (max-width: 1024px) {

  .page-root.ulice-page {

    padding-inline: 20px;

  }



  .ulice-hero {

    grid-template-columns: minmax(0, 1fr) 330px;

  }



  .ulice-hero__graphic {

    width: min(100%, 330px);

  }



  .ulice-contacts__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .ulice-contact-card:last-child {

    grid-column: 1 / -1;

  }

}



/* MOBILE */

@media (max-width: 768px) {

  .page-root.ulice-page {

    padding: 22px 14px 34px;

  }



  .ulice-hero {

    display: block;

    margin-bottom: 16px;

  }



  .ulice-title {

    font-size: clamp(1.75rem, 8vw, 2.25rem);

  }



  .ulice-title-accent {

    width: 44px;

    margin-top: 11px;

  }



  .ulice-lead {

    margin-top: 18px;

    font-size: .95rem;

  }



  .ulice-hero__graphic {

    width: min(86vw, 330px);

    margin: 12px auto 0;

  }



  .ulice-info {

    grid-template-columns: 36px minmax(0, 1fr);

    align-items: start;

    gap: 10px;

    padding: 13px 12px;

  }



  .ulice-info__icon {

    width: 34px;

    height: 34px;

  }



  .ulice-info p {

    font-size: .86rem;

  }



  .ulice-section-title {

    font-size: 1.08rem;

  }



  .ulice-contacts__grid {

    grid-template-columns: 1fr;

    gap: 10px;

  }



  .ulice-contact-card,

  .ulice-contact-card:last-child {

    grid-column: auto;

  }



  .ulice-contact-card {

    grid-template-columns: 46px minmax(0, 1fr);

    gap: 11px;

    padding: 13px 12px;

  }



  .ulice-contact-card__icon {

    width: 44px;

    height: 44px;

  }



  .ulice-contact-card__icon img {

    width: 37px;

    height: 37px;

  }



  .ulice-contact-card h3 {

    font-size: .93rem;

  }



  .ulice-contact-line {

    font-size: .81rem;

  }



  .ulice-directory__head {

    display: block;

  }



  .ulice-directory__head .ulice-section-title {

    margin-bottom: 9px;

  }



  .ulice-search__input {

    min-height: 44px;

  }



  .ulice-estate__summary {

    min-height: 54px;

    padding: 8px 11px;

    font-size: .86rem;

  }



  .ulice-estate__heading {

    gap: 9px;

  }



  .ulice-estate__heading img {

    flex-basis: 31px;

    width: 31px;

    height: 31px;

  }



  .ulice-estate__content {

    padding: 1px 12px 11px 51px;

  }



  .ulice-streets {

    display: grid;

    grid-template-columns: 1fr;

    gap: 5px;

  }



  .ulice-streets li {

    font-size: .84rem;

  }



  .ulice-notice {

    grid-template-columns: 38px minmax(0, 1fr);

    gap: 10px;

    width: 100%;

    padding: 12px;

  }



  .ulice-notice__icon {

    width: 36px;

    height: 36px;

  }



  .ulice-notice p {

    font-size: .84rem;

  }



  .ulice-footer-art {

    margin-top: 8px;

  }



  .ulice-footer-art img {

    max-height: 105px;

  }

}



/* WYDRUK A4 */


/* Telefon i e-mail: aktywne tylko na telefonach */
.ulice-page a.responsive-contact.is-static {
  color: var(--ul-text);
  text-decoration: none;
  cursor: text;
}

.ulice-page a.responsive-contact.is-static:hover {
  color: var(--ul-text);
}

@media print {

  @page {

    size: A4 portrait;

    margin: 8mm 10mm;

  }



  .header,

  .main-nav,

  .menu,

  .menu-toggle,

  .footer,

  .wcag-trigger,

  .wcag-panel,

  .manage-cookies,

  .ulice-hero__graphic,

  .ulice-footer-art {

    display: none !important;

  }



  .page-root.ulice-page {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    font-size: 9pt !important;

  }



  .ulice-hero {

    display: block !important;

    margin: 0 0 3mm !important;

    padding: 0 0 2.5mm !important;

    border-bottom: 1px solid var(--ul-navy) !important;

  }



  .ulice-title {

    font-size: 15pt !important;

  }



  .ulice-title-accent {

    display: none !important;

  }



  .ulice-lead {

    margin: 1.5mm 0 0 !important;

    font-size: 8.3pt !important;

  }



  .ulice-info {

    margin-bottom: 2.5mm !important;

    padding: 2mm 2.5mm !important;

  }



  .ulice-contacts__grid {

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 2.5mm !important;

  }



  .ulice-contact-card {

    grid-template-columns: 38px minmax(0, 1fr) !important;

    gap: 2mm !important;

    padding: 2.5mm !important;

    box-shadow: none !important;

    break-inside: avoid !important;

  }



  .ulice-contact-card__icon {

    width: 36px !important;

    height: 36px !important;

  }



  .ulice-contact-card__icon img {

    width: 31px !important;

    height: 31px !important;

  }



  .ulice-contact-card h3 {

    font-size: 8.7pt !important;

  }



  .ulice-contact-line {

    font-size: 7.5pt !important;

  }



  .ulice-directory {

    margin-top: 3mm !important;

  }



  .ulice-search {

    display: none !important;

  }



  .ulice-estates {

    border-radius: 0 !important;

  }



  .ulice-estate__summary {

    min-height: 0 !important;

    padding: 1.5mm 2mm !important;

    font-size: 8.2pt !important;

  }



  .ulice-estate__heading img {

    width: 24px !important;

    height: 24px !important;

    flex-basis: 24px !important;

  }



  .ulice-estate__content {

    padding: 0 2mm 1.5mm 9mm !important;

  }



  .ulice-streets {

    gap: .7mm 3mm !important;

  }



  .ulice-streets li {

    font-size: 7.4pt !important;

  }



  .ulice-notice {

    margin-top: 2.5mm !important;

    padding: 2mm !important;

    break-inside: avoid !important;

  }



  .ulice-page a[href]::after {

    content: none !important;

  }

}



@media (prefers-reduced-motion: reduce) {

  .ulice-estate__chevron {

    transition: none;

  }

}



/* =========================================================

   ULICE V2

   większe hero, ciaśniejsze kontakty, zwinięte osiedla,

   poprawiona dolna grafika

   ========================================================= */



/* HERO: większa grafika, nadal w rytmie pozostałych podstron */

.ulice-page .ulice-hero {

  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);

  gap: 34px;

}



.ulice-page .ulice-hero__graphic {

  width: min(100%, 470px);

}



.ulice-page .ulice-hero__img {

  width: 100%;

  height: auto;

  object-fit: contain;

}



/* KARTY KONTAKTOWE: mniej pustego miejsca pionowo */

.ulice-page .ulice-contact-card {

  grid-template-columns: 52px minmax(0, 1fr);

  gap: 12px;

  align-items: start;

  padding: 14px 16px;

  min-height: 0;

}



.ulice-page .ulice-contact-card__icon {

  width: 48px;

  height: 48px;

}



.ulice-page .ulice-contact-card__icon img {

  width: 41px;

  height: 41px;

}



.ulice-page .ulice-contact-card h3 {

  margin: 0 0 5px;

  line-height: 1.2;

}



.ulice-page .ulice-contact-line {

  margin-top: 3px;

  line-height: 1.25;

}



.ulice-page .ulice-contact-card__body {

  align-self: start;

}



/* Lista osiedli: nagłówek nieco ciaśniejszy, osiedla startują zwinięte w HTML */

.ulice-page .ulice-estate__summary {

  min-height: 56px;

  padding-top: 8px;

  padding-bottom: 8px;

}



/* DOLNA CZĘŚĆ:

   komunikat na pełną szerokość, grafika niżej jako szeroki dekoracyjny pas */

.ulice-page .ulice-notice {

  width: 100%;

  max-width: none;

  margin-top: 14px;

  padding: 12px 16px;

}



.ulice-page .ulice-footer-art {

  width: 100%;

  margin-top: 6px;

  overflow: hidden;

}



.ulice-page .ulice-footer-art img {

  display: block;

  width: 100%;

  height: 118px;

  max-height: none;

  object-fit: contain;

  object-position: center bottom;

}



/* Tablet */

@media (max-width: 1024px) {

  .ulice-page .ulice-hero {

    grid-template-columns: minmax(0, 1fr) 380px;

  }



  .ulice-page .ulice-hero__graphic {

    width: min(100%, 380px);

  }



  .ulice-page .ulice-contact-card {

    padding: 13px 14px;

  }



  .ulice-page .ulice-footer-art img {

    height: 105px;

  }

}



/* Mobile */

@media (max-width: 768px) {

  .ulice-page .ulice-hero__graphic {

    width: min(92vw, 360px);

    margin: 14px auto 0;

  }



  .ulice-page .ulice-contact-card {

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 10px;

    padding: 11px 12px;

  }



  .ulice-page .ulice-contact-card__icon {

    width: 40px;

    height: 40px;

  }



  .ulice-page .ulice-contact-card__icon img {

    width: 34px;

    height: 34px;

  }



  .ulice-page .ulice-contact-line {

    margin-top: 2px;

    line-height: 1.22;

  }



  .ulice-page .ulice-estate__summary {

    min-height: 52px;

  }



  .ulice-page .ulice-footer-art {

    margin-top: 4px;

  }



  .ulice-page .ulice-footer-art img {

    height: 82px;

  }

}



/* W druku dolna dekoracja nadal ukryta przez wcześniejsze reguły. */