/* --- Layout --- */
.grid-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* --- Cards --- */
.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: .75rem;
}

/* --- Links --- */
.card a {
  font-weight: 600;
  text-decoration: none;
  color: #222;
}

/* --- Meta text --- */
.card .meta {
  color: #666;
  font-size: .9rem;
  margin-top: .25rem;
}

.card .submeta {
  color: #777;
  font-size: .85rem;
  margin-top: .25rem;
}

/* --- Stars --- */
.stars { display:inline-block; line-height:1; }
.star { font-size: 1rem; }
.star.filled { color: #f5a623; }   /* amber */
.star.empty  { color: #ddd; }

/* --- Tiny action row --- */
.card .actions { margin-top:.5rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.btn-tiny {
  border:1px solid #ccc; background:#fff; padding:.25rem .5rem; border-radius:4px; font-size:.85rem; cursor:pointer;
}
.btn-tiny:hover { background:#f8f8f8; }

/* Pagination */
nav[role="navigation"] .pagination {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 0; list-style: none;
}
nav[role="navigation"] .pagination li a,
nav[role="navigation"] .pagination li span {
  display: inline-block; padding: .35rem .6rem; border: 1px solid #ddd; border-radius: 4px; text-decoration: none;
}
nav[role="navigation"] .pagination li span[aria-current="page"] {
  background: #222; color: #fff; border-color: #222;
}

/* Breadcrumbs */
.pi-breadcrumbs { margin: .5rem 0 1rem; }
.pi-breadcrumbs__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  color: #666;
  font-size: .95rem;
}
.pi-breadcrumbs__item { display: inline-flex; align-items: center; }
.pi-breadcrumbs__link { color: #666; text-decoration: none; }
.pi-breadcrumbs__link:hover { color: #222; text-decoration: underline; }
.pi-breadcrumbs__current { color: #222; }
.pi-breadcrumbs__sep { color: #9a9aa0; }


/* ===== Header / Nav ===== */
.pi-header{ position:relative; z-index:40 }

/* Top bar */
.pi-header__logo{ transition: transform .1s ease }
.pi-header__logo:hover{ transform: translate(-1px,-1px) rotate(-1deg) }

/* Desktop nav links reuse chips/buttons for cohesion */
.pi-nav__link{ text-decoration:none }
.pi-nav__cta{ margin-left:.25rem }

/* Search */
.pi-search{ padding:.6rem 1rem 1rem }
.pi-search__form{
  display:flex; gap:.5rem; align-items:stretch; flex-wrap:wrap;
  background:var(--pi-cream);
  border:3px solid var(--pi-ink); border-radius:16px;
  padding:.6rem; box-shadow:6px 6px 0 0 var(--pi-ink-80);
}
.pi-search__input{
  flex:1 1 260px; min-width:0;
  border:3px solid var(--pi-ink);
  border-radius:12px; padding:.65rem .8rem; font:inherit;
  outline:none; background:#fff;
}
.pi-search__input:focus{ outline:3px dashed var(--pi-ink); outline-offset:3px }
.pi-search__btn{ flex:0 0 auto }
.pi-search__hint{ margin:.35rem 0 0 }

/* Mobile accordion panel */
.pi-nav__panel{ border-top:3px solid var(--pi-ink); background:#fff; padding:.75rem 1rem }
.pi-acc{ border:3px solid var(--pi-ink); border-radius:16px; background:#fff; box-shadow:6px 6px 0 0 var(--pi-ink-80) }
.pi-acc__summary{
  cursor:pointer; list-style:none; padding:.7rem 1rem; margin:0;
  font-weight:800; text-transform:uppercase; font-size:1rem;
}
.pi-acc__summary::-webkit-details-marker{ display:none }
.pi-acc__content{ padding:.75rem 1rem 1rem; display:flex; gap:.5rem; flex-wrap:wrap }
.pi-acc__link{ text-decoration:none }

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

/* Layout tweaks on wide screens */
@media (min-width: 900px){
  .pi-search{ padding: .75rem 1rem 1.25rem }
  .pi-search__form{ flex-wrap:nowrap }
}