/**
 * BlueMed Card Design System
 * ==============================================================
 * Unified design tokens and structural fixes for all card
 * components across the website.
 *
 * Card inventory:
 *   – Service cards      (.bluemed-svc-card)
 *   – Team cards         (.bluemed-home-team-card, .bluemed-team-page-card)
 *   – Blog cards         (.bluemed-blog-card, .bluemed-blog-featured)
 *   – Pricing cards      (.bluemed-pricing-card)
 *   – Contact cards      (.bluemed-contact-quick-card)
 *   – About cards        (.bluemed-about-service-card)
 *   – Stats cards        (.bluemed-home-stats__card)
 *   – Homepage editorial (.bluemed-home-svc-card, .bluemed-home-blog-editorial__card)
 *
 * @package bluemed-dental
 */

/* ═══════════════════════════════════════════════════════════════
   1.  DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
	/* Radii */
	--bm-card-radius:          24px;
	--bm-card-radius-sm:       18px;

	/* Shadow scale */
	--bm-card-shadow-default:  0 10px 36px rgba(51, 52, 61, 0.04),
	                           0 1px 0 rgba(255, 255, 255, 0.8) inset;
	--bm-card-shadow-hover:    0 20px 60px rgba(21, 61, 138, 0.12),
	                           0 4px 16px rgba(21, 61, 138, 0.06);
	--bm-card-shadow-strong:   0 32px 80px rgba(51, 52, 61, 0.09),
	                           0 6px 20px rgba(21, 61, 138, 0.05);

	/* Motion */
	--bm-card-ease:            cubic-bezier(0.22, 1, 0.36, 1);
	--bm-card-duration:        0.28s;
	--bm-card-img-duration:    0.45s;
	--bm-card-img-zoom:        scale(1.04);
	--bm-card-lift:            -4px;    /* standard hover lift for most cards */
}

/* ═══════════════════════════════════════════════════════════════
   2.  EQUAL-HEIGHT CARD GRIDS
   ═══════════════════════════════════════════════════════════════
   Ensures every card in a multi-column WordPress Query block fills
   the available row height. The card's own flex-column layout
   then pushes the CTA to the bottom.
   ═══════════════════════════════════════════════════════════════ */

/* Blog article grids — index page + related posts on single */
.bluemed-blog-grid-band  .wp-block-post-template,
.bluemed-related-posts   .wp-block-post-template {
	align-items: stretch;
}

/* Blog card flex structure */
.bluemed-blog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bluemed-blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.bluemed-blog-card .wp-block-post-excerpt {
	flex: 1 1 auto;
}

/* "Czytaj artykuł →" always sits at the card bottom */
.bluemed-blog-card__read-more.wp-block-read-more {
	margin-top: auto;
	align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   3.  CONSISTENT IMAGE-ZOOM TRANSITION
   ═══════════════════════════════════════════════════════════════
   Standardises image zoom to 0.45s across all card types.
   ═══════════════════════════════════════════════════════════════ */
.bluemed-blog-card .wp-block-post-featured-image img,
.bluemed-about-service-card .is-style-bluemed-card-photo img,
.bluemed-svc-card .is-style-bluemed-card-photo img,
.bluemed-about-rooms__frame .bluemed-about-rooms__img img {
	transition: transform var(--bm-card-img-duration, 0.45s)
	            var(--bm-card-ease, ease);
}

/* ═══════════════════════════════════════════════════════════════
   4.  TEAM AVATAR CIRCLE — consistent sizing
   ═══════════════════════════════════════════════════════════════
   Forces perfect circles via overflow:hidden + aspect-ratio 1/1.
   Eliminates any border-radius clipping artifact on Safari.
   ═══════════════════════════════════════════════════════════════ */
.bluemed-home-team-card__avatar,
.bluemed-team-page-card .bluemed-home-team-card__avatar {
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
}

.bluemed-home-team-card__avatar img,
.bluemed-team-page-card .bluemed-home-team-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════
   5.  CARD IMAGE ASPECT RATIO — blog cards
   ═══════════════════════════════════════════════════════════════
   Replaces the fixed 220 px height with a fluid 16:10 ratio so
   every card image is identically proportioned at any viewport.
   ═══════════════════════════════════════════════════════════════ */
.bluemed-blog-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   6.  HOVER LIFT — standardise to -4 px
   ═══════════════════════════════════════════════════════════════
   Pricing and Contact used -3 px; everything else uses -4 px.
   Overriding here keeps the experience consistent without
   touching homepage hero cards that intentionally use -5–7 px.
   ═══════════════════════════════════════════════════════════════ */
.bluemed-pricing-card.is-style-bluemed-card:hover,
.bluemed-contact-quick-card:hover {
	transform: translateY(var(--bm-card-lift, -4px));
}

/* ═══════════════════════════════════════════════════════════════
   7.  TRANSITION DURATION — 0.28 s across core cards
   ═══════════════════════════════════════════════════════════════ */
.bluemed-pricing-card.is-style-bluemed-card,
.bluemed-contact-quick-card {
	transition:
		transform     var(--bm-card-duration, 0.28s) var(--bm-card-ease, ease),
		box-shadow    var(--bm-card-duration, 0.28s) var(--bm-card-ease, ease);
}

/* ═══════════════════════════════════════════════════════════════
   8.  HOVER SHADOW — unified token for overrideable cards
   ═══════════════════════════════════════════════════════════════ */
.bluemed-pricing-card.is-style-bluemed-card:hover,
.bluemed-contact-quick-card:hover,
.bluemed-about-service-card:hover {
	box-shadow: var(--bm-card-shadow-hover);
}

/* ═══════════════════════════════════════════════════════════════
   9.  TOUCH DEVICES — disable hover animations
   ═══════════════════════════════════════════════════════════════ */
@media (hover: none) {
	.bluemed-pricing-card.is-style-bluemed-card:hover,
	.bluemed-contact-quick-card:hover,
	.bluemed-about-service-card:hover {
		transform: none;
		box-shadow: var(--bm-card-shadow-default);
	}
}