/*
|--------------------------------------------------------------------------
| M.U.S.I.C. World HQ
| File: assets/css/card-alignment.css
| Version: 1.1
| Last Updated: 2026-05-08
| Notes: Global card, CTA, button, image, and mobile alignment helpers.
|        Safe refinement layer. Preserves existing design while tightening
|        reusable card layouts across Music, Academy, Library, Store,
|        Membership, Wellness, TV, Events, and Partner pages.
|--------------------------------------------------------------------------
*/

/*
  Primary purpose:
  Keep reusable cards visually balanced and CTA buttons aligned across rows,
  even when individual cards contain different amounts of text.
*/

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

/* Keep text rhythm consistent inside reusable cards. */
.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,
.grid > .album-card p,
.grid > .product-card p,
.grid > .course-card p,
.grid > .guide-card p,
.grid > .membership-card p,
.grid > .media-card p {
  margin-bottom: 1rem;
}

/* Keep lists clean and prevent CTA crowding. */
.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,
.grid > .album-card ul,
.grid > .product-card ul,
.grid > .course-card ul,
.grid > .guide-card ul,
.grid > .membership-card ul,
.grid > .media-card ul {
  margin-bottom: 1rem;
}

/* Push single final CTA buttons to the bottom of each 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 > .album-card > .btn:last-child,
.grid > .product-card > .btn:last-child,
.grid > .course-card > .btn:last-child,
.grid > .guide-card > .btn:last-child,
.grid > .membership-card > .btn:last-child,
.grid > .media-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,
.grid > .album-card > .section-footer-link:last-child,
.grid > .product-card > .section-footer-link:last-child,
.grid > .course-card > .section-footer-link:last-child,
.grid > .guide-card > .section-footer-link:last-child,
.grid > .membership-card > .section-footer-link:last-child,
.grid > .media-card > .section-footer-link:last-child {
  margin-top: auto;
}

/* Pin CTA wrappers down when a card uses multiple buttons. */
.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,
.grid > .album-card > .cta-actions:last-child,
.grid > .product-card > .cta-actions:last-child,
.grid > .course-card > .cta-actions:last-child,
.grid > .guide-card > .cta-actions:last-child,
.grid > .membership-card > .cta-actions:last-child,
.grid > .media-card > .cta-actions:last-child {
  margin-top: auto;
}

/* Reusable CTA/action wrappers. */
.section-footer-link,
.cta-actions,
.card-actions,
.offer-actions,
.album-actions,
.product-actions,
.membership-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Prevent isolated muted text from collapsing awkwardly in card layouts. */
.muted {
  display: block;
}

/* Stabilize card imagery across the ecosystem without forcing every image into one size. */
.card img,
.tile img,
.division-card img,
.offer-card img,
.album-card img,
.product-card img,
.course-card img,
.guide-card img,
.media-card img {
  border-radius: calc(var(--radius, 20px) * 0.65);
}

/* Utility classes for future reusable page/card engines. */
.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stack-md {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.full-width-action {
  width: 100%;
}

.full-width-action .btn,
.btn.full-width-action {
  width: 100%;
}

/* Mobile tightening: cards stack naturally and buttons become easier to tap. */
@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,
  .grid > .album-card,
  .grid > .product-card,
  .grid > .course-card,
  .grid > .guide-card,
  .grid > .membership-card,
  .grid > .media-card {
    height: auto;
  }

  .section-footer-link,
  .cta-actions,
  .card-actions,
  .offer-actions,
  .album-actions,
  .product-actions,
  .membership-actions,
  .inline-actions {
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .section-footer-link .btn,
  .cta-actions .btn,
  .card-actions .btn,
  .offer-actions .btn,
  .album-actions .btn,
  .product-actions .btn,
  .membership-actions .btn {
    width: 100%;
  }
}