/* 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;
}

/* badges in top-right (like challenges) */
.myg-badges-right{
  justify-content:flex-end;
  left:auto;
  right:10px;
  top:10px;
  gap:8px;
}

/* progress bar row */
.myg-progress-wrap{
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
}

.myg-progress{
  flex:1;
  height:8px;
  border-radius:999px;
  background:#eef1f4;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.05);
}

.myg-progress-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: #45a7d4; /* same vibe as your buttons */
}

.myg-progress-info{
  font-size:12px;
  font-weight:800;
  color:#234c5e;
  white-space:nowrap;
}

.spots-map-wrap .mt-2 {
  text-align: center;
}

.spots-map-wrap a.btn-add-spot {
  margin-top: 20px;
}

.spots-map-title-wrapper .page-title {
  margin-top: 12px;
}

/* ===== My Account: Spots list (row cards) ===== */
    .myspots-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .spot-row-card{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;

      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      border-radius:16px;
      padding:10px 12px;

      box-shadow:0 6px 18px rgba(0,0,0,.05);
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .spot-row-card:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 26px rgba(0,0,0,.08);
      border-color:rgba(49,121,176,.18);
    }

    .spot-row-left{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      flex:1;
    }

    .spot-thumb{
      width:120px;
      height:120px;
      border-radius:14px;
      overflow:hidden;
      background:#f5f6f8;
      border:1px solid rgba(0,0,0,.06);
      flex:0 0 auto;
    }

    .spot-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .spot-thumb-fallback{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#8a97a3;
      font-weight:800;
    }

    .spot-main{
      min-width:0;
      flex:1;
    }

    .spot-title-line{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .spot-title{
      font-family: Farro, serif;
      font-size:15px;
      font-weight:500;
      color:#3179b0;
      text-decoration:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }

    .spot-title:hover{
      text-decoration:underline;
      text-underline-offset:2px;
    }

    .spot-flag{
      width:22px;
      height:16px;
      object-fit:cover;
      border-radius:4px;
      border:1px solid rgba(0,0,0,.08);
      flex:0 0 auto;
    }

    .spot-crumbs{
      margin-top:6px;
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      color:#234c5e;
      font-size:12px;
      opacity:.85;
    }

    .spot-crumbs span{
      background:#f5f6f8;
      border:1px solid rgba(0,0,0,.06);
      padding:4px 8px;
      border-radius:999px;
    }

    .spot-meta{
      margin-top:6px;
      font-size:12px;
      color:#6c757d;
    }

    .spot-row-right{
      flex:0 0 auto;
    }

    /* Right-side pills */
    .spot-row-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    /* Shared pill look */
    .spot-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:#f5f6f8;
      border:1px solid rgba(0,0,0,.06);
      color:#234c5e;
      font-weight:600;
      font-size:12px;
      white-space:nowrap;
      text-decoration:none;
    }

    /* Edit pill hover */
    .spot-pill-edit:hover{
      background:#eef2f7;
      transform: translateY(-1px);
    }

    /* Icon wrapper */
    .spot-pill-ico{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:16px;
      height:16px;
      line-height:1;
      font-size:14px;
    }

    /* Light “user” icon made with CSS (no emoji color issues) */
    .spot-pill-ico-user{
      position:relative;
      width:16px;
      height:16px;
      opacity:.75;
    }

    .spot-pill-ico-user::before{
      content:"";
      position:absolute;
      top:1px;
      left:50%;
      transform:translateX(-50%);
      width:7px;
      height:7px;
      border-radius:999px;
      background: currentColor;
    }

    .spot-pill-ico-user::after{
      content:"";
      position:absolute;
      top:8px;
      left:50%;
      transform:translateX(-50%);
      width:12px;
      height:7px;
      border-radius:999px 999px 6px 6px;
      background: currentColor;
    }

    /* Optional: make visitors count slightly lighter like before */
    .spot-pill-visitors{
      font-weight:500;
    }

  .spot-date-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:#f5f6f8;
      border:1px solid rgba(0,0,0,.06);
      color:#234c5e;
      font-weight:800;
      font-size:12px;
      white-space:nowrap;
    }



    /* checkbox visibility stays controlled by your existing mode classes */
    .spots-select-mode .spot-cb{ display:inline-flex !important; }

    /* Mobile: thumbnail smaller, stack a bit */
    @media (max-width: 576px){
      .spot-thumb{ width:86px; height:86px; border-radius:12px; }
      .spot-row-card{ padding:10px; }
      .spot-title{ font-size:14px; }
    }

  .spots-select-mode .spot-row-card{
    cursor:pointer;
  }

  .spot-row-card.is-selected{
    border-color:rgba(69,167,212,.55);
    box-shadow:0 10px 26px rgba(69,167,212,.14);
  }

  .spot-visitors-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f5f6f8;
    border: 1px solid rgba(0, 0, 0, .06);
    color: #234c5e;
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
  }
  .spot-visitors-ico {
      font-size:14px; line-height:1;
  }

  .spot-date-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:#f5f6f8;
      border:1px solid rgba(0,0,0,.06);
      color:#234c5e;
      font-weight:800;
      font-size:12px;
      white-space:nowrap;
    }

  .explo-split { display:grid; gap:16px; grid-template-columns:1fr; }

  @media (min-width: 992px){
    .explo-split{
      grid-template-columns: 1fr 1fr;  /* ✅ 50% / 50% */
      align-items: stretch;
    }
  }

  .explo-split > .section-card{
    min-width: 0;
  }

  #explomaniacsMap{
    width:100%;
    height:520px;
    border-radius:16px;
  }
  @media (max-width: 576px){
    #explomaniacsMap{ height:360px; }
  }