/* ==========================================================================
   Portál občana — prototyp (aplikační vrstva nad design systémem gov.cz)
   Pouze layout a app-specifické prvky. Barvy, mezery, typografie a rádiusy
   výhradně přes tokeny design systému — žádné vlastní hodnoty.
   ========================================================================== */

:root {
  --po-aside-width: 20rem;
  --po-header-height: 5.5rem;
}

/* ---------- utility ---------- */

.po-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.po-skip {
  position: absolute;
  top: var(--spacing-s);
  left: var(--spacing-s);
  z-index: 20;
  padding: var(--spacing-s) var(--spacing-m);
  background-color: var(--background-block-primary);
  border-radius: var(--corner-radius-s);
  transform: translateY(-200%);
}

.po-skip:focus-visible {
  transform: translateY(0);
}

.po-container {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--spacing-l);
}

.po-icon {
  flex: 0 0 auto;
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

/* ---------- hlavička ---------- */

.po-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--component-nav-background);
  border-bottom: 1px solid var(--border-subtlest);
}

.po-header__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  min-height: var(--po-header-height);
}

.po-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-s-nudge);
  color: var(--component-nav-text-primary);
  text-decoration: none;
}

.po-logo:hover {
  text-decoration: none;
}

.po-logo__mark {
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.8125rem;
}

.po-logo__text {
  font-size: var(--font-size-headline-s);
  line-height: 125%;
  font-weight: 400;
}

.po-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-l);
  margin-left: auto;
}

.po-nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.po-nav__list > li {
  margin: 0;
  position: static;
}

.po-nav__list > li::before {
  content: none;
}

.po-nav__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  padding: var(--spacing-s-nudge) 0;
  border-bottom: 0.1875rem solid transparent;
  color: var(--component-nav-text-link);
  font-size: var(--font-size-headline-s);
  text-decoration: none;
}

.po-nav__link:hover {
  text-decoration: none;
}

.po-nav__link .po-icon {
  width: var(--icon-size-2xl);
  height: var(--icon-size-2xl);
}

.po-nav__link[aria-current="page"] {
  border-bottom-color: var(--border-primary);
  font-weight: 500;
}

.po-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: var(--height-m-nudge);
  height: var(--height-m-nudge);
  padding: 0 var(--spacing-xs);
  border-radius: var(--corner-radius-l);
  background-color: var(--background-secondary);
  color: var(--text-black-fixed);
  font-size: var(--font-size-body-s);
  font-weight: 700;
}

.po-nav__divider {
  width: 1px;
  height: var(--height-xl);
  background-color: var(--border-subtle);
}

.po-nav__more {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  padding: var(--spacing-s-nudge) 0;
  border: 0;
  background: none;
  color: var(--component-nav-text-link);
  font-family: var(--font-family);
  font-size: var(--font-size-headline-s);
  cursor: pointer;
}

/* ---------- layout stránky ---------- */

.po-main {
  padding: var(--spacing-2xl) 0 var(--spacing-8xl);
}

.po-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--po-aside-width);
  gap: var(--spacing-l);
  align-items: start;
}

.po-panel {
  padding: var(--spacing-xl);
  border-radius: var(--corner-radius-m);
  background-color: var(--background-block-primary);
}

/* ---------- vyhledávání ---------- */

.po-search {
  display: flex;
  gap: var(--spacing-s);
  align-items: stretch;
  max-width: 28rem;
}

.po-search__field {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--height-component-m);
  padding: 0 var(--spacing-s-nudge);
  border: 1px solid var(--border-subtle);
  border-radius: var(--corner-radius-s);
  background-color: var(--background-block-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body-m);
}

.po-search__field::placeholder {
  color: var(--text-placeholder);
}

.po-search__field:focus-visible,
.po-search__submit:focus-visible {
  outline: 0.125rem solid var(--status-focus);
  outline-offset: 0.125rem;
}

.po-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--height-component-m);
  height: var(--height-component-m);
  border: 0;
  border-radius: var(--corner-radius-s);
  background-color: var(--button-solid-primary);
  color: var(--icon-on-bold-white);
  cursor: pointer;
}

.po-search__submit:hover {
  background-color: var(--button-solid-primary-hover);
}

.po-search__submit:active {
  background-color: var(--button-solid-primary-active);
}

.po-panel__divider {
  margin: var(--spacing-l) 0;
}

/* ---------- filtry ---------- */

.po-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

.po-filters__scroller {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: var(--spacing-s-nudge);
  scrollbar-color: var(--border-subtle) transparent;
}

.po-filters__scroller::-webkit-scrollbar {
  height: var(--height-s);
}

.po-filters__scroller::-webkit-scrollbar-track {
  background: transparent;
}

.po-filters__scroller::-webkit-scrollbar-thumb {
  border-radius: var(--corner-radius-s);
  background-color: var(--border-subtle);
}

.po-filters__list {
  display: flex;
  gap: var(--spacing-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.po-filters__list > li {
  margin: 0;
  position: static;
}

.po-filters__list > li::before {
  content: none;
}

.po-filters .gov-chip .element {
  white-space: nowrap;
}

.po-filters__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--height-component-m);
  height: var(--height-component-m);
  border: 0;
  border-radius: var(--corner-radius-s);
  background: none;
  color: var(--icon-on-subtle);
  cursor: pointer;
}

.po-filters__toggle:hover {
  background-color: var(--button-outlined-primary-hover);
}

/* ---------- seznam služeb ---------- */

.po-services {
  margin: var(--spacing-l) 0 0;
  padding: 0;
  list-style: none;
}

.po-services > li {
  position: static;
  margin: 0;
  padding: var(--spacing-l) 0;
  border-top: 1px solid var(--border-subtlest);
}

.po-services > li::before {
  content: none;
}

.po-service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-m) var(--spacing-l);
}

.po-service__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: var(--icon-size-5xl);
  height: var(--icon-size-5xl);
  color: var(--icon-on-subtle);
}

.po-service__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--font-size-headline-s);
  line-height: 150%;
  font-weight: 500;
}

.po-service__title a {
  text-decoration: none;
}

.po-service__title a:hover {
  text-decoration: underline;
}

.po-service__actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-m);
  color: var(--icon-on-subtle);
}

.po-service__actions a {
  display: inline-flex;
  color: var(--icon-on-subtle);
}

.po-service__body {
  grid-column: 2;
  grid-row: 2;
}

.po-service__body > p + p {
  margin-top: var(--spacing-m);
}

.po-service__body .po-icon--inline {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  margin-left: var(--spacing-2xs);
  vertical-align: -0.0625rem;
}

/* ---------- stránkování ---------- */

.po-pagination {
  margin-top: var(--spacing-xl);
}

.po-pagination .gov-pagination__list {
  gap: var(--spacing-xs);
  list-style: none;
}

.po-page {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: var(--height-2xl);
  height: var(--height-2xl);
  padding: 0 var(--spacing-s);
  border: 0;
  border-radius: var(--corner-radius-s);
  background: none;
  color: var(--text-primary-color);
  font-family: var(--font-family);
  font-size: var(--font-size-body-m);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.po-page:hover {
  background-color: var(--button-outlined-primary-hover);
  text-decoration: none;
}

.gov-pagination__item.is-active .po-page {
  background-color: var(--background-primary-subtle);
}

.po-page[aria-disabled="true"] {
  color: var(--text-disabled);
  pointer-events: none;
}

/* ---------- často se ptáte ---------- */

.po-faq {
  margin-top: var(--spacing-8xl);
}

.po-faq__title {
  margin-bottom: var(--spacing-xl);
}

.po-faq .gov-accordion-item summary {
  background-color: transparent;
}

/* ---------- pravý sloupec ---------- */

.po-aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
}

.po-widget {
  padding: var(--spacing-s);
  border-radius: var(--corner-radius-m);
  background-color: var(--background-primary-subtle);
}

.po-widget__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-s-nudge);
  padding: var(--spacing-s-nudge) var(--spacing-s);
  color: var(--text-primary-color);
  text-decoration: none;
}

.po-widget__head:hover {
  text-decoration: none;
}

.po-widget__title {
  margin-right: auto;
  font-size: var(--font-size-headline-xs);
  line-height: 150%;
  font-weight: 500;
}

.po-widget__body {
  padding: var(--spacing-m);
  border-radius: var(--corner-radius-s);
  background-color: var(--background-block-primary);
}

.po-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-xs) var(--spacing-s);
}

.po-message__dot {
  width: var(--height-s-nudge);
  height: var(--height-s-nudge);
  margin-top: var(--spacing-xs-nudge);
  border-radius: var(--corner-radius-l);
  background-color: var(--background-secondary);
}

.po-message__title {
  font-size: var(--font-size-body-m);
  line-height: 150%;
  font-weight: 700;
  color: var(--text-primary-color);
}

.po-message__date {
  color: var(--text-secondary);
  font-size: var(--font-size-body-s);
  white-space: nowrap;
}

.po-message__text,
.po-message__author {
  grid-column: 2 / span 2;
  color: var(--text-secondary);
  font-size: var(--font-size-body-s);
}

.po-message__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  margin-top: var(--spacing-s);
}

.po-message__author .po-icon {
  width: var(--icon-size-l);
  height: var(--icon-size-l);
  color: var(--icon-neutral);
}

.po-empty {
  padding: var(--spacing-l) var(--spacing-m) var(--spacing-xl);
  text-align: center;
}

.po-empty__badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--height-7xl);
  height: var(--height-7xl);
  margin-bottom: var(--spacing-l);
  border-radius: var(--corner-radius-2xl);
  background-color: var(--background-primary-subtlest);
  color: var(--icon-on-subtle);
}

.po-empty__badge .po-icon {
  width: var(--icon-size-4xl);
  height: var(--icon-size-4xl);
}

.po-empty__title {
  margin-bottom: var(--spacing-s);
  font-size: var(--font-size-headline-s);
  line-height: 150%;
  font-weight: 500;
}

.po-empty__text {
  color: var(--text-secondary);
  font-size: var(--font-size-body-s);
}

/* ---------- patička ---------- */

.po-footer {
  padding: var(--spacing-6xl) 0 var(--spacing-l);
  background-color: var(--component-footer-background);
  color: var(--component-footer-text-primary);
}

.po-footer a {
  color: var(--component-footer-text-link);
}

.po-footer__top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--spacing-xl);
  align-items: start;
}

.po-footer__heading {
  margin-bottom: var(--spacing-l);
  font-size: var(--font-size-headline-s);
  line-height: 150%;
  font-weight: 500;
}

.po-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.po-footer__links > li {
  position: static;
  margin: 0 0 var(--spacing-m);
}

.po-footer__links > li::before {
  content: none;
}

.po-footer__links > li {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

.po-footer__links .po-icon {
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  color: var(--component-footer-text-link);
}

.po-footer__contact {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-2xl);
}

.po-footer__contact .po-icon,
.po-footer__copy .po-icon {
  color: var(--component-footer-text-primary);
}

.po-footer__copy {
  display: inline-flex;
  border: 0;
  background: none;
  color: var(--component-footer-button-default);
  cursor: pointer;
}

.po-social {
  display: flex;
  gap: var(--spacing-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.po-social > li {
  position: static;
  margin: 0;
}

.po-social > li::before {
  content: none;
}

.po-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--height-3xl);
  height: var(--height-3xl);
  border: 1px solid var(--component-footer-separator);
  border-radius: var(--corner-radius-s);
  color: var(--component-footer-button-default);
}

.po-social a:hover {
  color: var(--component-footer-button-hover);
}

.po-social .po-icon {
  width: var(--icon-size-2xl);
  height: var(--icon-size-2xl);
}

.po-up {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--height-3xl);
  height: var(--height-3xl);
  border: 0;
  border-radius: var(--corner-radius-s);
  background-color: var(--background-block-primary);
  color: var(--icon-on-subtle);
  cursor: pointer;
}

.po-footer__mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-7xl);
}

.po-footer__mid p {
  max-width: 34rem;
  color: var(--component-footer-text-secondary);
  font-size: var(--font-size-body-s);
}

.po-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-l);
}

/* zástupné dlaždice místo logotypů – v prototypu nepoužíváme cizí logotypy */
.po-placeholder {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-s) var(--spacing-m);
  border: 1px dashed var(--component-footer-separator);
  border-radius: var(--corner-radius-xs);
  color: var(--component-footer-text-secondary);
  font-size: var(--font-size-body-xs);
  line-height: 130%;
  text-align: center;
  white-space: pre-line;
}

.po-placeholder--store {
  min-width: 8.75rem;
  min-height: var(--height-4xl);
}

.po-stores {
  display: flex;
  gap: var(--spacing-m);
  margin-top: var(--spacing-l);
}

.po-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m) var(--spacing-l);
  justify-content: space-between;
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-l);
  border-top: 1px solid var(--component-footer-separator);
  color: var(--component-footer-text-secondary);
  font-size: var(--font-size-body-s);
}

.po-footer__note {
  margin-top: var(--spacing-3xl);
  color: var(--component-footer-text-secondary);
  font-size: var(--font-size-body-s);
}

.po-footer__bottom > span:first-child {
  flex: 1 1 24rem;
}

/* ---------- responzivita ---------- */

@media (max-width: 63.99em) {
  .po-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .po-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .po-footer__mid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.99em) {
  .po-nav__list,
  .po-nav__divider {
    display: none;
  }

  .po-panel {
    padding: var(--spacing-m);
  }

  .po-service {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .po-service__actions {
    grid-row: auto;
    grid-column: 2;
    flex-direction: row;
    justify-content: flex-end;
  }

  .po-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .po-faq {
    margin-top: var(--spacing-4xl);
  }
}