/* Map fills the viewport under the navbar */

.page-title {
  font-family: Farro, serif;
  font-weight: 600;
  text-align: center;
  font-size: 34px;
  color: #3e8f8a;
}
.page-text {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 0;
  display: block;
}

.spots-map-wrap {
  background:#fff;
  padding: 40px 15px 60px !important;
}
#spotsMap {
  width: 100%;
  height: clamp(60vh, 78vh, 86vh);
  max-height: 600px;
  border-radius: 14px;
  box-shadow: var(--box-shadow, 0 6px 20px rgba(0,0,0,.08));
}

/* Popup card */
.spot-popup {
  min-width: 220px;
  max-width: 280px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
.spot-popup .title { font-weight:700; margin:0 0 4px; color:#0f172a; }
.spot-popup .sub { color:#55637a; font-size:.85rem; }
.spot-popup img {
  display:block; width:100%; height:140px; object-fit:cover; border-radius:10px; margin:8px 0 6px;
}

/* Keep the page spacing consistent with other sections */
.spots-header { margin-bottom: 12px; }

/* Popup layout */
.spot-popup { min-width: 240px; max-width: 320px; font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui); }
.spot-popup .title { font-weight: 800; margin: 0 0 6px; color: #0f172a; }
.spot-popup .sub   { color:#55637a; font-size:.85rem; margin-bottom: 6px; }

/* 602x531 aspect without cropping (image letterboxed) */
.spot-popup .img-wrap{
  aspect-ratio: 602 / 531;
  width: 100%;
  background: #0f344f;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  margin: 8px 0 8px;
}
.spot-popup .img-wrap img{
  width: 100%; height: 100%;
  object-fit: contain;  /* no crop */
  display: block;
}

/* Attribute meters (1–5) */
.spot-popup .meters { display:grid; gap:6px; margin-top: 8px; }
.spot-popup .meter { display:flex; align-items:center; gap:8px; font-size:.9rem; }
.spot-popup .meter-label { min-width: 145px; color:#1a2734; font-weight:600; }
.spot-popup .dots { display:flex; gap:4px; }
.spot-popup .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,0,0,.15);
}
.spot-popup .dot.on{ background: linear-gradient(135deg, var(--primary-color,#007AFF), var(--secondary-color,#00C6FF)); }

/* Simple, real image with rounded corners (no crop, no stripe) */
.spot-popup .media {
  border-radius: 12px;
  overflow: hidden;            /* clips the image to rounded corners */
  margin: 8px 0 8px;
}

.spot-popup .media img.spot-img {
  display: block;
  width: 100%;
  height: auto;                /* keep original aspect ratio */
  border-radius: 12px;         /* in case overflow gets altered by Leaflet skin */
}

.spot-popup .local {
  color:#55637a; font-size:.85rem; margin:4px 0 6px;
}
.spot-popup .popup-foot {
  margin-top:8px; font-size:.85rem; color:#3179b0;
  display:flex; align-items:center; gap:6px;
}
.spot-popup .local-name{
  font-size: .85rem;
  color: #378b86;     /* soft green */
  margin: 2px 0 6px;  /* a little breathing room under the title */
  font-weight: 400;
}

/* Kompaktowy popup */
.spot-popup { max-width: 350px; }            /* ciaśniejszy */
.spot-popup .title {
  margin: 0 0 4px;
  font-family: Farro, serif;
  font-size: 18px;
  font-weight: 500;
}

.spot-popup .local-name{
  font-size:.9rem; color:#378b86; margin:2px 0 8px; font-weight:400;
}

/* Obraz: rzeczywiste proporcje, max-wys. 200px */
.spot-popup .media{ border-radius:12px; overflow:hidden; margin:6px 0 8px; }
.spot-popup .media img.spot-img{
  display:block; width:100%; height:auto; max-height:200px; object-fit:contain;
}

/* Atrybuty 1–5: mniejsze i jaśniejsze */
.spot-popup .meters{ display:grid; gap:4px; margin-top:6px; }
.spot-popup .meter{ display:flex; align-items:center; gap:6px; font-size:.85rem; color:#6b7280; }
.spot-popup .meter-label{ min-width:130px; font-weight:400; }
.spot-popup .dots{ display:flex; gap:3px; }
.spot-popup .dot{ width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.15); }
.spot-popup .dot.on{ background:linear-gradient(135deg, var(--primary-color,#007AFF), var(--secondary-color,#00C6FF)); }

/* Mała stopka (np. Card Spot) */
.spot-popup .popup-foot{
  margin-top:6px; font-size:.85rem; color:#3179b0;
  display:flex; align-items:center; gap:6px;
}

.catalogue-wrapper {
    display: block;
}

@media (max-width: 479px) {
  .catalogue-wrapper {
    margin: 30px 5px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .catalogue-wrapper {
    margin: 30px 20px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .catalogue-wrapper {
    margin: 30px 50px;
  }
}
@media (min-width: 1200px)  {
  .catalogue-wrapper {
    margin: 50px;
  }
}

.catalog-controls {
   margin-bottom: 40px !important;
}

.catalogue-wrapper th {
  color: #3e8f8a;
  font-family: Farro, serif;
  font-weight: 400;
  font-size: 15px;
}

#catalogTable th:nth-child(n+3),
#catalogTable td:nth-child(n+3) {
  text-align: center;
}

.catalogue-wrapper label.form-label {
  color: #3179b0;
  font-family: Farro, serif;
  font-size: 18px;
  font-weight: 500;
}
.catalogue-wrapper .page-text {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 0 60px;
  display: block;
}

.spots-map-title-wrapper {
  margin: 0 auto;
}

/* --- sortable header carets --- */
.catalogue-wrapper th.sortable {
  position: relative;
  user-select: none;
  padding-right: 14px;
}
.catalogue-wrapper th.sortable::after {
  content: '▴▾';
    opacity: 0.55;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.catalogue-wrapper th.sortable.sorted-asc::after {
  content: '▴';
  opacity: 0.8;
  font-size: 14px;
}
.catalogue-wrapper th.sortable.sorted-desc::after {
  content: '▾';
  opacity: 0.8;
  font-size: 14px;
}

/*!* right-align numeric columns *!*/
/*#catalogTable td:nth-child(3),*/
/*#catalogTable td:nth-child(4),*/
/*#catalogTable td:nth-child(5),*/
/*#catalogTable td:nth-child(6) {*/
/*  text-align: right;*/
/*}*/

/* GRID: 1 → 2 → 3 → 4 columns */
.ch-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 576px){ .ch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .ch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .ch-grid { grid-template-columns: repeat(4, 1fr); } } /* max 4 */

/* Card */
.ch-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--box-shadow, 0 6px 20px rgba(0,0,0,.08));
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* MEDIA: fixed 312×275 ratio, bullet-proof */
.ch-card-media {
  position: relative;
  width: 100%;
  background: #0f344f;
  flex: 0 0 auto;
}

/* ratio box: height = (275/312)*width ≈ 88.141% */
.ch-card-media::before {
  content: "";
  display: block;
  padding-top: calc(275 / 312 * 100%);
}

/* fill and crop the box */
.ch-card-media > img {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* badges and title overlay already use absolute positioning — keep as is */

/* Spot count badge (top-right) */
.ch-spot-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.55); color:#fff;
  font-size: 13px; padding: 6px 8px; border-radius: 12px;
  display: inline-flex; align-items:center; gap:6px;
}
.ch-spot-badge svg { width: 14px; height: 14px; }

/* Title overlay (bottom) */
.ch-title-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(62,143,138,.85) 80%);
  color: #fff; padding: 10px 12px;
}
.ch-title {
  margin: 0;
  font-family: Farro, serif; font-weight: 500; font-size: 20px;
}

.ch-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

 /* Description: 3-line clamp (collapsible) */
.ch-desc {
  color:#4b5563; font-size:.95rem; line-height:1.35; margin:0;
}
.ch-desc-wrap{
  --lines: 3;
  --lh: 1.35em;
  position: relative;
  overflow: hidden;
  max-height: calc(var(--lines) * var(--lh));   /* collapsed by default */
  transition: max-height .25s ease;
}
.ch-desc-wrap::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.2em;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 75%);
}
/* Expanded state */
.ch-desc-wrap.expanded{
  max-height: 1000vh;  /* animate to a large value */
}
.ch-desc-wrap.expanded::after{ display:none; }
/* collapsed state = 3 lines + soft fade */
.ch-desc-wrap.collapsed{
  max-height: calc(var(--lines) * var(--lh));
}
.ch-desc-wrap.collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.2em;
  pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 75%);
}
/* Hide fade when the content fits */
.ch-desc-wrap.no-fade::after { display: none; }

/* “więcej/mniej” button styling */
.ch-more-btn{
  color:#3179b0 !important;
  text-decoration: none !important;
  padding: 2px 6px;
  margin-top: 6px;
}
.ch-more-btn:hover,
.ch-more-btn:focus{
  color:#3179b0 !important;
  text-decoration: none !important;
}

  /* Progress row */
  .ch-progress-row { display:flex; align-items:center; gap:8px; margin-top: auto; padding-top: 8px;}
  .ch-progress { width: 140px; height: 6px; background:#e5e7eb; border-radius: 6px; overflow: hidden; }
  .ch-progress-bar { height: 100%; background: linear-gradient(135deg, #007AFF, #00C6FF); }
  .ch-progress-info { color:#6b7280; font-size: .9rem; }

  /* Keep page spacing consistent */
  .catalogue-wrapper { display:block; }

  .ch-spot-badge, .ch-di-badge, .ch-draws-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(2px);
}
.ch-draws-badge { top: 40px; }

.ch-di-badge svg, .ch-draws-badge svg {
  width: 16px; height: 16px;
}

.ch-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.spot-link {
  color: inherit;
  text-decoration: none !important;
}
.spot-link:hover,
.spot-link:focus {
  text-decoration: none;
}

#catalogTable a {
  text-decoration: none !important;
  color: #000 !important;
}