/* ============================================================
   WHAT WE CURATE — Explore buttons
   ------------------------------------------------------------
   Adds an "Explore" button under each of the three curated-
   experience columns (#curate .phil-item). Styled independently
   of .btn-secondary (not reused this time), per request: a duller
   version of the same gold used for the "Curated Experiences" /
   "MICE & Incentives" / "Tailor-Made Individual Travel" titles
   (--gold-dk), with text in the section's own dark teal background
   color (--teal-dk) so the label reads as a solid, filled chip —
   and a soft gold glow on hover/focus. All three tokens already
   exist in theme.css (used the same way elsewhere in this codebase);
   the hex values after each var() are just a fallback in case a
   token name ever changes, not a second source of truth.

   .phil-item becomes a column flexbox so each button's
   margin-top: auto pushes it flush with the bottom of its column,
   keeping all three level with each other in a single row even
   when one description wraps to more lines than the others —
   the flex item simply grows an extra gap above its button rather
   than letting the row of buttons drift out of alignment. Columns
   are already visually equal height in the design (the vertical
   dividers run the full height of the row), so this only changes
   each item's *internal* layout — it doesn't touch how
   .philosophy-in arranges the three columns itself, and stays
   correct at whatever breakpoint that switches to, including a
   single stacked column on mobile.
   ============================================================ */

.phil-item {
  display: flex;
  flex-direction: column;
}

.phil-explore-btn {
  margin-top: auto;
  align-self: center;
  display: inline-block;
  padding: 10px 30px;
  background: var(--gold-dk, #B8934A);
  color: var(--teal-dk, #0C3831);
  font-family: var(--sc, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.phil-explore-btn:hover,
.phil-explore-btn:focus-visible {
  background: var(--gold, #C7A257);
  box-shadow: 0 0 14px 2px rgba(212, 168, 75, .55);
  transform: translateY(-1px);
}

@media (max-width: 780px) {
  .phil-explore-btn { margin-top: 20px; }
}