/*
|--------------------------------------------------------------------------
| M.U.S.I.C. World HQ
| File: assets/css/card-alignment.css
| Version: 1.0
| Last Updated: 2026-04-25
| Notes: Global card/button alignment helper for grid-based card layouts
|--------------------------------------------------------------------------
*/

/*
  Goal:
  Keep buttons aligned across card rows even when one card has more or less text.
  This is especially important in 3-column sections such as:
  - division-card rows
  - plan card rows
  - offer-card rows
  - tile rows
*/

.grid > .card,
.grid > article.card,
.grid > .division-card,
.grid > .plan,
.grid > .offer-card,
.grid > .tile,
.grid > .testimonial,
.grid > .project-card,
.grid > .event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Let the body copy take natural space while CTA stays pinned lower */
.grid > .card p,
.grid > article.card p,
.grid > .division-card p,
.grid > .plan p,
.grid > .offer-card p,
.grid > .tile p,
.grid > .testimonial p,
.grid > .project-card p,
.grid > .event-card p {
  margin-bottom: 1rem;
}

/* Keep lists flexible so buttons can drop to the bottom consistently */
.grid > .plan ul,
.grid > .card ul,
.grid > article.card ul,
.grid > .division-card ul,
.grid > .offer-card ul,
.grid > .tile ul,
.grid > .testimonial ul,
.grid > .project-card ul,
.grid > .event-card ul {
  margin-bottom: 1rem;
}

/* Push the last CTA element to the bottom of the card */
.grid > .card > .btn:last-child,
.grid > article.card > .btn:last-child,
.grid > .division-card > .btn:last-child,
.grid > .plan > .btn:last-child,
.grid > .offer-card > .btn:last-child,
.grid > .tile > .btn:last-child,
.grid > .testimonial > .btn:last-child,
.grid > .project-card > .btn:last-child,
.grid > .event-card > .btn:last-child,
.grid > .card > .section-footer-link:last-child,
.grid > article.card > .section-footer-link:last-child,
.grid > .division-card > .section-footer-link:last-child,
.grid > .plan > .section-footer-link:last-child,
.grid > .offer-card > .section-footer-link:last-child,
.grid > .tile > .section-footer-link:last-child,
.grid > .testimonial > .section-footer-link:last-child,
.grid > .project-card > .section-footer-link:last-child,
.grid > .event-card > .section-footer-link:last-child {
  margin-top: auto;
}

/* If a card contains multiple buttons stacked in a CTA wrapper, pin that wrapper down */
.grid > .card > .cta-actions:last-child,
.grid > article.card > .cta-actions:last-child,
.grid > .division-card > .cta-actions:last-child,
.grid > .plan > .cta-actions:last-child,
.grid > .offer-card > .cta-actions:last-child,
.grid > .tile > .cta-actions:last-child,
.grid > .testimonial > .cta-actions:last-child,
.grid > .project-card > .cta-actions:last-child,
.grid > .event-card > .cta-actions:last-child {
  margin-top: auto;
}

/* Make sure button wrappers do not collapse awkwardly */
.section-footer-link,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Improve visual stability for cards that contain muted text blocks */
.muted {
  display: block;
}

/* On smaller screens, normal stacking still works cleanly */
@media (max-width: 768px) {
  .grid > .card,
  .grid > article.card,
  .grid > .division-card,
  .grid > .plan,
  .grid > .offer-card,
  .grid > .tile,
  .grid > .testimonial,
  .grid > .project-card,
  .grid > .event-card {
    height: auto;
  }
}