/* ==========================================================================
   "Around the bay" — the cross-links band

   Shared by the category listings and the gallery. These links (sayulita.com,
   the webcams, Playa Escondida, the weather) used to sit in a right-hand
   sidebar that squeezed the page's own content into two thirds of the width
   while competing with it. As a band underneath, they read as an afterword.

   The markup comes from templates/aside.php, which posts/view.php also
   includes — hence the resets here rather than edits to the shared partial.
   ========================================================================== */

.sp-more {
  --am-teal:      #427c78;
  --am-teal-deep: #2f5f5c;
  --am-soft:      #5f6f6c;
  --am-line:      #e2eae8;
}

/* The cross-links that used to sit in a right-hand sidebar, squeezing the
   listings into two thirds of the page. They read better as a band under the
   listings, where they are an afterword rather than a competitor. */
.sp-more {
  padding: 64px 0 72px;
  background: #fff;
  border-top: 1px solid var(--am-line);
}

.sp-more-head {
  margin-bottom: 28px;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--am-teal);
}

.sp-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* aside.php ships a stack of Bootstrap .card panels; style.css gives them a
   grey border and a hard shadow. Reset that here rather than editing the
   shared partial, which posts/view.php and the gallery also include. */
.sp-more-grid .card {
  margin: 0;
  border: 1px solid var(--am-line);
  border-radius: 14px;
  box-shadow: none;
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease;
}
.sp-more-grid .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(35, 44, 43, .07), 0 14px 28px rgba(35, 44, 43, .08);
}

.sp-more-grid .card-header {
  padding: 14px 18px 8px;
  border: 0;
  background: transparent;
  font-family: "Amatic SC", cursive;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--am-teal);
  text-align: left;
}

.sp-more-grid .card-body { padding: 0 18px 18px; }
.sp-more-grid .card-title { font-size: .8125rem; color: var(--am-teal); word-break: break-word; }
.sp-more-grid .card-text {
  margin: 8px 0 14px;
  color: var(--am-soft);
  font-size: .875rem;
  line-height: 1.6;
}

.sp-more-grid .btn-primary {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--am-teal);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sp-more-grid .btn-primary:hover { background: var(--am-teal-deep); }


@media (max-width: 980px) {
  .sp-more-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .sp-more-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-more-grid .card { transition: none; }
  .sp-more-grid .card:hover { transform: none; }
}