/**
 * GenerateBlocks Global Styles - Cards
 * ============================================================================
 *
 * This file contains card styles designed for GenerateBlocks Global Styles.
 * These classes can be applied via GenerateBlocks → Settings → Global Styles
 * or directly as CSS classes in GenerateBlocks patterns.
 *
 * BEM Structure:
 * - Blocks: .gbp-card, .gbp-service-card, .gbp-team-card, .gbp-value-card,
 *           .gbp-testimonial-card, .gbp-approach-card, .gbp-event-card
 * - Elements: __title, __text, __meta, __meta-text, __image
 * - Modifiers: --featured, --shadow
 *
 * Global Classes Available:
 * - gbp-card              → Generic card (base styles)
 * - gbp-service-card      → Service/feature cards
 * - gbp-team-card         → Team member cards
 * - gbp-value-card        → Value proposition cards
 * - gbp-testimonial-card  → Client testimonial cards
 * - gbp-approach-card     → Approach/methodology cards
 * - gbp-event-card        → Event announcement cards
 *
 * @package Medici
 * @version 3.0.0
 * @since 2.0.0 Original BEM structure
 * @since 3.0.0 Moved to global-styles directory for GenerateBlocks integration
 */

/* ========================================
   1. GENERIC CARD (Base Block)
   Global Style: gbp-card
   ======================================== */

.gbp-card {
	padding: 2rem;

	/* Colors */
	background: var(--gradient-card);

	/* Box Model */
	border: 1px solid var(--slate-200);
	border-radius: var(--border-radius-md);
	color: var(--text-primary);

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s ease-in-out;

	/* Display & Positioning */
	cursor: pointer;
	box-shadow: var(--shadow-sm);
}

.gbp-card:hover,
.gbp-card:focus {
	transform: translateY(-8px);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-lg);
	will-change: transform;
}

/* Card Title (Element) */
.gbp-card__title {
	color: var(--text-primary);
	transition: all 0.2s ease;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: var(--font-bold);
}

/* Animate title on card hover */
.gbp-card:hover .gbp-card__title {
	color: var(--color-accent);
	transform: translateX(4px);
}

/* Card Text (Element) */
.gbp-card__text {
	color: var(--text-secondary);
	margin-bottom: 1rem;
	font-size: 1rem;
	line-height: var(--leading-normal);
}

/* Card Meta (Element) */
.gbp-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-secondary);
	margin-top: auto;
	font-size: 0.875rem;
}

/* Card Meta Text (Element) */
.gbp-card__meta-text {
	display: inline-flex;
	align-items: center;
	color: var(--base);
	column-gap: 0.5em;
	margin-bottom: 0;
	font-size: 14px;
}

.gbp-card__meta-text .gb-shape svg {
	width: 1.2em;
	height: 1.2em;
	color: var(--accent-3);
	fill: currentcolor;
}

/* Card Modifiers */
.gbp-card--featured {
	background: linear-gradient(135deg, var(--base-3) 0%, var(--accent-2) 100%);
	border: 2px solid var(--accent);
	color: #fff;
}

.gbp-card--shadow {
	box-shadow: var(--shadow-xl);
}

/* ========================================
   2. SERVICE CARD
   Global Style: gbp-service-card
   ======================================== */

.gbp-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2.5rem 2rem;

	/* Colors */
	background: var(--gradient-card);

	/* Box Model */
	border: 1px solid var(--slate-200);
	border-radius: var(--border-radius-lg);
	color: var(--text-primary);

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease-in-out;
	box-shadow: var(--shadow-sm);
}

.gbp-service-card:hover,
.gbp-service-card:focus {
	transform: translateY(-8px);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-xl);
	will-change: transform;
}

/* Service Card Elements */
.gbp-service-card__icon {
	margin-bottom: 1.5rem;
	font-size: 2.5rem;
}

.gbp-service-card__title {
	color: var(--text-primary);
	transition: color 0.2s ease;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	font-weight: var(--font-bold);
}

.gbp-service-card:hover .gbp-service-card__title {
	color: var(--color-accent);
}

.gbp-service-card__text {
	color: var(--text-secondary);
	line-height: var(--leading-normal);
}

/* ========================================
   3. TEAM CARD
   Global Style: gbp-team-card
   ======================================== */

.gbp-team-card {
	padding: 2rem;

	/* Colors */
	background: var(--gradient-card);

	/* Box Model */
	border: 1px solid var(--slate-200);
	border-radius: var(--border-radius-lg);
	color: var(--text-primary);

	/* Display & Positioning */
	text-align: center;

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s ease-in-out;
	box-shadow: var(--shadow-sm);
}

.gbp-team-card:hover,
.gbp-team-card:focus {
	transform: translateY(-8px);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-xl);
	will-change: transform;
}

/* Team Card Elements */
.gbp-team-card__image {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	transition: transform 0.3s ease;
	margin-bottom: 1rem;
	object-fit: cover;
}

.gbp-team-card:hover .gbp-team-card__image {
	transform: scale(1.05);
}

/* Legacy: target img directly for existing HTML */
.gbp-team-card img {
	transition: transform 0.3s ease;
}

.gbp-team-card:hover img {
	transform: scale(1.05);
}

.gbp-team-card__name {
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: var(--font-bold);
}

.gbp-team-card__role {
	color: var(--text-secondary);
	font-size: 0.875rem;
}

/* ========================================
   4. VALUE CARD
   Global Style: gbp-value-card
   ======================================== */

.gbp-value-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;

	/* Colors */
	background: var(--gradient-card);

	/* Box Model */
	border: 1px solid var(--slate-200);
	border-radius: var(--border-radius-lg);
	color: var(--text-primary);

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease-in-out;
	box-shadow: var(--shadow-sm);
}

.gbp-value-card:hover,
.gbp-value-card:focus {
	transform: translateY(-8px);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-xl);
	will-change: transform;
}

/* Value Card Elements */
.gbp-value-card__title,
.gbp-value-card h3 {
	color: var(--text-primary);
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: var(--font-bold);
}

.gbp-value-card__text,
.gbp-value-card p {
	color: var(--text-secondary);
	margin-bottom: 0;
	line-height: var(--leading-normal);
}

/* ========================================
   5. TESTIMONIAL CARD
   Global Style: gbp-testimonial-card
   ======================================== */

.gbp-testimonial-card {
	position: relative;
	padding: 2rem;

	/* Colors */
	background: var(--gradient-card);
	border-radius: var(--border-radius-lg);
	color: var(--text-primary);

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		border-left-color 0.2s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s ease-in-out;

	/* Box Model */
	border-left: 4px solid var(--color-accent);
	box-shadow: var(--shadow-md);
}

.gbp-testimonial-card:hover,
.gbp-testimonial-card:focus {
	transform: translateY(-6px);
	border-left-color: var(--color-accent);
	box-shadow: var(--shadow-xl);
	will-change: transform;
}

.gbp-testimonial-card::before {
	content: '"';
	position: absolute;
	top: 1rem;
	left: 1.5rem;
	color: var(--color-accent);
	opacity: 0.2;
	line-height: 1;
	font-family: Georgia, serif;
	font-size: 3rem;
}

/* Testimonial Card Elements */
.gbp-testimonial-card__quote {
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
	padding-left: 1rem;
	font-style: italic;
	line-height: var(--leading-relaxed);
}

.gbp-testimonial-card__author {
	color: var(--text-primary);
	font-weight: var(--font-semibold);
}

.gbp-testimonial-card__role {
	color: var(--text-secondary);
	font-size: 0.875rem;
}

/* ========================================
   6. APPROACH CARD
   Global Style: gbp-approach-card
   ======================================== */

.gbp-approach-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2.5rem 2rem;

	/* Colors */
	background: var(--gradient-card);

	/* Box Model */
	border: 1px solid var(--slate-200);
	border-radius: var(--border-radius-lg);
	color: var(--text-primary);

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease-in-out;
	box-shadow: var(--shadow-sm);
}

.gbp-approach-card:hover,
.gbp-approach-card:focus {
	transform: translateY(-8px);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-xl);
	will-change: transform;
}

.gbp-approach-card::before {
	content: '✓';
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	color: var(--color-accent);
	line-height: 1;
	font-size: 2rem;
	font-weight: var(--font-bold);
}

/* Approach Card Elements */
.gbp-approach-card__number {
	color: var(--color-accent);
	margin-bottom: 1rem;
	font-size: 2rem;
	font-weight: var(--font-bold);
}

.gbp-approach-card__title {
	color: var(--text-primary);
	margin-bottom: 1rem;
	font-size: 1.25rem;
	font-weight: var(--font-bold);
}

.gbp-approach-card__text {
	color: var(--text-secondary);
	line-height: var(--leading-normal);
}

/* ========================================
   7. EVENT CARD
   Global Style: gbp-event-card
   ======================================== */

.gbp-event-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;

	/* Box Model */
	border-radius: var(--border-radius-md);
	color: inherit;

	/* Stacked Transitions */
	transition:
		background-color 0.2s ease,
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease-in-out;

	/* Colors */
	background-color: var(--accent-3);

	/* Other */
	text-decoration: none;
}

.gbp-event-card:hover,
.gbp-event-card:focus {
	transform: translate3d(0, -6px, 0);
	box-shadow: 0 10px 30px rgb(0, 0, 0, 0.2);
	will-change: transform;
}

/* Event Card Elements */
.gbp-event-card__date {
	color: var(--color-accent);
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: var(--font-semibold);
}

.gbp-event-card__title {
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: var(--font-bold);
}

.gbp-event-card__location {
	color: var(--text-secondary);
	font-size: 0.875rem;
}

/* ========================================
   8. DARK THEME OVERRIDES
   ======================================== */

/* Dark Theme - All Cards */
[data-theme='dark'] .gbp-card,
[data-theme='dark'] .gbp-service-card,
[data-theme='dark'] .gbp-team-card,
[data-theme='dark'] .gbp-value-card,
[data-theme='dark'] .gbp-approach-card,
[data-theme='dark'] .gbp-event-card {
	background: var(--gradient-card);
	border: 1px solid var(--slate-700) !important;
	border-left-color: var(--adv-accent);
	color: var(--text-primary);
}

/* Dark Theme - Hover States */
[data-theme='dark'] .gbp-card:hover,
[data-theme='dark'] .gbp-service-card:hover,
[data-theme='dark'] .gbp-team-card:hover,
[data-theme='dark'] .gbp-value-card:hover,
[data-theme='dark'] .gbp-approach-card:hover,
[data-theme='dark'] .gbp-event-card:hover,
[data-theme='dark'] .gbp-card:focus,
[data-theme='dark'] .gbp-service-card:focus,
[data-theme='dark'] .gbp-team-card:focus,
[data-theme='dark'] .gbp-value-card:focus,
[data-theme='dark'] .gbp-approach-card:focus,
[data-theme='dark'] .gbp-event-card:focus {
	border-color: var(--adv-gold) !important;
	border-left-color: var(--contrast);
}

/* Dark Theme - Testimonial Cards */
[data-theme='dark'] .gbp-testimonial-card {
	background: var(--gradient-card);
	color: var(--text-primary);
	border-left-color: var(--adv-accent);
}

[data-theme='dark'] .gbp-testimonial-card:hover,
[data-theme='dark'] .gbp-testimonial-card:focus {
	border-color: var(--adv-gold);
	border-left-color: var(--contrast);
}

/* Dark Theme - Card Text Elements */
[data-theme='dark'] .gbp-card__text,
[data-theme='dark'] .gbp-service-card__text,
[data-theme='dark'] .gbp-value-card__text,
[data-theme='dark'] .gbp-value-card p,
[data-theme='dark'] .gbp-approach-card__text,
[data-theme='dark'] .gbp-testimonial-card__quote,
[data-theme='dark'] .gbp-card p,
[data-theme='dark'] .gbp-service-card p,
[data-theme='dark'] .gbp-approach-card p {
	color: var(--color-text-lighter);
}

/* Dark Theme - Card Headings */
[data-theme='dark'] .gbp-card__title,
[data-theme='dark'] .gbp-service-card__title,
[data-theme='dark'] .gbp-team-card__name,
[data-theme='dark'] .gbp-value-card__title,
[data-theme='dark'] .gbp-value-card h3,
[data-theme='dark'] .gbp-approach-card__title,
[data-theme='dark'] .gbp-event-card__title,
[data-theme='dark'] .gbp-card h3,
[data-theme='dark'] .gbp-service-card h3,
[data-theme='dark'] .gbp-team-card h3,
[data-theme='dark'] .gbp-approach-card h3 {
	color: var(--text-primary);
}

/* ========================================
   9. BACKWARDS COMPATIBILITY
   Legacy class names for existing HTML templates
   TODO: Remove in v2.0.0 - Use BEM classes (.gbp-card__*)
   ======================================== */

/* Card Meta Text - Legacy */
.gbp-cardmeta-text {
	display: inline-flex;
	align-items: center;
	color: var(--base);
	column-gap: 0.5em;
	margin-bottom: 0;
	font-size: 14px;
}

.gbp-cardmeta-text .gb-shape svg {
	width: 1.2em;
	height: 1.2em;
	color: var(--accent-3);
	fill: currentcolor;
}

/* Event Card - Legacy (without prefix) */
.event-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;
	border-radius: var(--border-radius-md);
	color: inherit;
	transition:
		background-color 0.2s ease,
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease-in-out;
	background-color: var(--accent-3);
	text-decoration: none;
}

.event-card:hover,
.event-card:focus {
	transform: translate3d(0, -6px, 0);
	box-shadow: 0 10px 30px rgb(0, 0, 0, 0.2);
	will-change: transform;
}