/* ==========================================================================
   Project Showcase – stylesheet
   ========================================================================== */

/* ── Custom properties ────────────────────────────────────────────────── */
:root {
    --psc-accent:        #0d6efd;
    --psc-accent-dark:   #0a4fcf;
    --psc-card-radius:   .75rem;
    --psc-img-height:    220px;
    --psc-transition:    .22s ease;
    --psc-shadow:        0 4px 18px rgba(0,0,0,.10);
    --psc-shadow-hover:  0 8px 32px rgba(0,0,0,.18);
    --psc-gap:           1.5rem;
    --psc-filter-height: 42px;
}

/* ── Hand-picked utility classes ──────────────────────────────────────────
   The full Bootstrap Utilities API was intentionally left out of the custom
   build (it generates thousands of unused combinations). These are the only
   utility classes the plugin markup actually references. ──────────────── */
.d-flex { display: flex; }
.d-none { display: none !important; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.m-3 { margin: 1rem; }
.me-1 { margin-right: .25rem; }
.ms-auto { margin-left: auto; }
.pt-3 { padding-top: 1rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.small { font-size: .875em; }
.text-center { text-align: center; }
.text-muted { color: #6c757d; }
.text-primary { color: var(--psc-accent); }
.text-body-secondary { color: #666; }
.w-100 { width: 100%; }

/* ── Page title ───────────────────────────────────────────────────────── */
.psc-page-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 1.5rem;
}

/* ── Filter bar ───────────────────────────────────────────────────────────
   Order in the DOM: 1) Country  2) Categories  3) Clear all filters.
   Desktop: side-by-side, Country/Reset fixed width, Categories flexible.
   Mobile:  stacked vertically, each field full width.               ──── */
.psc-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--psc-card-radius);
    box-shadow: var(--psc-shadow);
    background: #fff;
}

.psc-filter-field { min-width: 0; } /* min-width:0 lets flex children truncate/shrink properly */

.psc-filter-reset {
    display: flex;
    flex-direction: column;
}
.psc-filter-reset .btn {
    height: var(--psc-filter-height);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .psc-filters {
        flex-direction: row;
        align-items: flex-end;
    }
    .psc-filter-country { flex: 0 0 240px; }
    .psc-filter-categories { flex: 1 1 auto; }
    .psc-filter-reset { flex: 0 0 180px; }
}

.psc-filters .form-label {
    display: block;
    font-size: .85rem;
}

.psc-filters .form-select {
    height: var(--psc-filter-height);
    box-sizing: border-box;
}

/* ── Result meta ──────────────────────────────────────────────────────── */
.psc-result-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

/* ── Tom Select (category multi-select) ─────────────────────────────────
   Long category names are truncated with an ellipsis — both the selected
   "item" chips and the dropdown "option" rows — which matters most on
   narrow/mobile viewports where horizontal space is tight.           ──── */
.ts-wrapper .ts-control {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-radius: .375rem;
    border-color: #dee2e6;
    padding: 0 .5rem;
    height: var(--psc-filter-height);
    box-sizing: border-box;
    scrollbar-width: thin;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--psc-accent);
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}
.ts-control > .item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 150px;
    background: var(--psc-badge-bg, var(--psc-accent)) !important;
    color: var(--psc-badge-fg, #fff) !important;
    border-radius: 50rem !important;
    padding: .2rem .4rem .2rem .65rem !important;
    font-size: .78rem;
    font-weight: 600;
}
.psc-ts-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* The remove_button plugin's "×" — always fully visible/clickable, never
   clipped by the label's ellipsis truncation above. */
.ts-control > .item .remove {
    flex: 0 0 auto;
    margin-left: .3rem;
    border-left: none !important;
}
/* The hidden text input that renders the "All categories" placeholder —
   keep it from shrinking to zero and from wrapping onto its own line. */
.ts-control > input {
    flex: 1 0 auto;
    min-width: 8rem;
    white-space: nowrap;
}
.ts-dropdown .option {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.psc-ts-group-header {
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #444;
    padding: .55rem .75rem .25rem;
}
.psc-ts-color-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    margin-right: .5rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    /* Extra-tight budget on phones: cap chip width so 2–3 fit per line
       instead of one chip eating the whole row before it gets cut off. */
    .ts-control > .item { max-width: 46vw; }
}

/* ── Card grid ────────────────────────────────────────────────────────────
   1 col on mobile, 2 on tablets, 3 from ~992px up — comfortably covering
   the ca. 1024×768–1280×960 desktop range requested.                 ──── */
.psc-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--psc-gap);
}
@media (min-width: 576px) {
    .psc-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .psc-card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Project card ─────────────────────────────────────────────────────────
   Content order (top → bottom): image, country · city, title, teaser,
   category badges, "Explore the Good Practice →" link.               ──── */
.psc-card {
    display: flex;
    flex-direction: column;
    background: #f7f8fa;
    border: 1px solid #e9edf2;
    border-radius: var(--psc-card-radius);
    box-shadow: var(--psc-shadow);
    transition: transform var(--psc-transition), box-shadow var(--psc-transition), background var(--psc-transition);
    cursor: pointer;
    overflow: hidden;
    height: 100%;
}
.psc-card:hover,
.psc-card:focus-visible {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: var(--psc-shadow-hover);
    outline: none;
}

/* 1. Image / placeholder */
.psc-card-img-wrap {
    position: relative;
    height: var(--psc-img-height);
    overflow: hidden;
    background: #e9ecef;
    flex-shrink: 0;
}
.psc-card-img-wrap img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    transition: transform .4s ease;
}
.psc-card:hover .psc-card-img-wrap img {
    transform: scale(1.06);
}

.psc-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem 1.3rem;
    flex: 1 1 auto;
}

/* 2. Country · City */
.psc-card-location {
    order: 1;
    font-size: .78rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0 0 .4rem;
    padding: 0;
    text-transform: capitalize;
}
.psc-card-location svg { flex-shrink: 0; }

/* 3. Title */
.psc-card-title {
    order: 2;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.3;
}

/* 4. Teaser */
.psc-card-desc {
    order: 3;
    font-size: .875rem;
    line-height: 1.2rem;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 .85rem;
}

/* 5. Category badges */
.psc-card-cats {
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin-bottom: 1rem;
}
.psc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 200px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
    padding: .15em .75em;
    border: 1px solid var(--psc-badge-border, transparent);
    border-radius: 50rem;
    background: var(--psc-badge-bg, rgba(13,110,253,.1));
    color: var(--psc-badge-fg, var(--psc-accent-dark));
}
/* Modal category badges reuse .psc-badge but sit on the light meta strip,
   so give them a slightly stronger fill for contrast. */
.psc-badge-modal {
    background: var(--psc-badge-bg, var(--psc-accent));
    color: var(--psc-badge-fg, #fff);
    margin-right: .3rem;
}

@media (max-width: 575.98px) {
    /* Badges now stack vertically (see .psc-card-cats), so a narrow-viewport
       width cap is no longer needed — the 200px min-width fits comfortably
       even on small phones since cards are full-width there. */
}

/* 6. CTA link — shared rounded, solid-color button style used for both
   "Explore the Good Practice" (card) and "Further Information" (modal). */
.psc-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.3rem;
    border-radius: 50rem;
    background: #134591;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    transition: background var(--psc-transition);
}
.psc-cta-btn:hover,
.psc-cta-btn:focus-visible {
    background: #6C9BE0;
    color: #fff;
    text-decoration: none;
}
.psc-cta-btn svg { transition: transform var(--psc-transition); }
.psc-card:hover .psc-card-cta.psc-cta-btn svg {
    transform: translateX(3px);
}

.psc-card-cta {
    order: 5;
    margin-top: auto;
    align-self: flex-start;
}

/* ── Empty / error state ───────────────────────────────────────────────── */
.psc-empty { opacity: .7; }
.psc-error {
    grid-column: 1 / -1;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

/* ── Card skeleton loader ─────────────────────────────────────────────── */
.psc-skeleton {
    border-radius: var(--psc-card-radius);
    overflow: hidden;
    box-shadow: var(--psc-shadow);
    background: #fff;
}
.psc-skeleton .skeleton-img {
    height: var(--psc-img-height);
    background: #e2e5ea;
    animation: psc-shimmer 1.4s infinite;
}
.psc-skeleton .skeleton-body { padding: 1.1rem 1.2rem; }
.psc-skeleton .skeleton-line {
    height: .85rem;
    background: #e2e5ea;
    border-radius: 4px;
    margin-bottom: .6rem;
    animation: psc-shimmer 1.4s infinite;
}
.psc-skeleton .skeleton-line.short { width: 55%; }
.psc-skeleton .skeleton-line.xshort { width: 35%; }

@keyframes psc-shimmer {
    0%   { background-color: #e2e5ea; }
    50%  { background-color: #ced2da; }
    100% { background-color: #e2e5ea; }
}

/* ── Details view ─────────────────────────────────────────────────────── */
.psc-details {
    max-width: 900px;
    margin: 0 auto;
}

/* Modal hero image */
.psc-modal-hero {
    display: block;
    width: 100% !important;
    max-width: none !important;
    max-height: 420px;
    object-fit: cover;
    border-radius: .5rem .5rem 0 0;
}

/* Gallery grid */
.psc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
    margin-top: 1.5rem;
}
.psc-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: .4rem;
    cursor: pointer;
    background: #e9ecef;
    max-height: 150px;
    max-width: 150px;
}
.psc-gallery-item img {
    height: 150px !important;
    object-fit: cover;
    transition: transform .3s ease;
    width: 150px !important;
}
.psc-gallery-item:hover img { transform: scale(1.08); }

.psc-gallery-item-caption {
  display: none;
}

.pswp__custom-caption {
  background: rgba(127, 127, 127, 0.75);
  font-size: 16px;
  color: #fff;
  width: auto;
  max-width: 400px;
  padding: 2px 8px;
  border-radius: 4px;
  position: fixed;
  right: 16px;
  bottom: 16px;
  text-align: right;
}
.pswp__custom-caption a {
  color: #fff;
  text-decoration: underline;
}

/* Lightbox overlay (fallback, currently unused — Tom Select/PhotoSwipe cover
   the gallery — kept in case PhotoSwipe is ever swapped out again) */
.psc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: psc-fade-in .18s ease;
}
.psc-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: .4rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.psc-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    opacity: .8;
    transition: opacity .15s;
}
.psc-lightbox-close:hover { opacity: 1; }
.psc-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 2rem;
    padding: .4rem .75rem;
    border-radius: .4rem;
    cursor: pointer;
    transition: background .15s;
}
.psc-lightbox-nav:hover { background: rgba(255,255,255,.22); }
.psc-lightbox-nav.prev { left: 1rem; }
.psc-lightbox-nav.next { right: 1rem; }
.psc-lightbox-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    text-align: center;
}

@keyframes psc-fade-in {
    from { opacity: 0; } to { opacity: 1; }
}

/* "Copy link" button in the detail view header */
.psc-modal-header-row {
    gap: .75rem;
    flex-wrap: wrap;
}
.psc-modal-header-row h2 {
    flex: 1 1 auto;
    min-width: 0;
}
.psc-copy-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--psc-accent-dark);
    background: rgba(13,110,253,.08);
    border: 1px solid rgba(13,110,253,.25);
    border-radius: 50rem;
    cursor: pointer;
    transition: background var(--psc-transition), color var(--psc-transition);
}
.psc-copy-link:hover {
    background: rgba(13,110,253,.16);
}
.psc-copy-link.copied {
    color: #146c43;
    background: rgba(25,135,84,.12);
    border-color: rgba(25,135,84,.3);
}

/* Modal meta strip */
.psc-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 1rem 0 1.25rem;
    padding: .85rem 1rem;
    background: #f8f9fa;
    border-radius: .5rem;
    font-size: .875rem;
    color: #555;
}
.psc-modal-meta strong { color: #222; text-transform: capitalize; }

/* ── Modal body spinner ───────────────────────────────────────────────── */
.psc-modal-spinner {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

/* ── Pagination active ────────────────────────────────────────────────── */
/* (numbered pagination removed — replaced by the "Load more" button) */

/* ── Responsive tweaks ────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .psc-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .psc-modal-hero { max-height: 240px; }
}