/*
Theme Name:   MEDICA
Theme URI:    https://medica.com/
Description:  A premium WordPress Child Theme for Astra, customized and branded specifically for MEDICA.
Author:       MEDICA
Author URI:   https://medica.com/
Template:     astra
Version:      1.0.0
Text Domain:  medica
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Custom CSS for MEDICA */

/* ==========================================================================
   MEDICA Grid Works Widget Styling
   ========================================================================== */

.medica-works-widget-wrapper {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 0;
	box-sizing: border-box;
}

/* Header layout */
.medica-works-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 20px;
}

.medica-works-header-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.medica-works-subtitle {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: #6B7280; /* Gray 500 */
	letter-spacing: 0.05em;
}

.medica-works-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #111827; /* Dark gray/black */
	margin: 0;
	line-height: 1.2;
}

/* View All Projects Button */
.medica-works-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 24px;
	border: 1px solid #D1D5DB; /* Gray 300 */
	border-radius: 9999px;
	text-decoration: none !important;
	color: #374151; /* Gray 700 */
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	background-color: transparent;
}

.medica-works-btn span {
	line-height: 1;
}

.medica-btn-arrow {
	transition: transform 0.3s ease;
}

/* Button Hover State */
.medica-works-btn:hover {
	background-color: #001E5B; /* MEDICA brand deep blue */
	border-color: #001E5B;
	color: #FFFFFF;
}

.medica-works-btn:hover .medica-btn-arrow {
	transform: translateX(4px);
}

/* Grid Layout */
.medica-works-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 32px;
	justify-content: flex-start;
	width: 100%;
}

/* Card Styling */
.medica-work-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1 1 270px; /* Responsive basis, grows/shrinks nicely */
	max-width: 308px;
	border-radius: 18px;
	padding: 18px 16px;
	box-sizing: border-box;
	overflow: hidden;
	text-decoration: none !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	background-color: #E5E7EB; /* Light grey fallback background */
}

/* Heights: Asymmetric staggered layout */
/* First card height: 248px */
.medica-first-card {
	height: 248px;
}

/* Subsequent cards height: 315px */
.medica-work-card:not(.medica-first-card) {
	height: 315px;
}

/* Background image with hover transition */
.medica-work-card-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Brand Gradient Overlay: transparent to deep blue (#001E5B) */
.medica-work-card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 30, 91, 0) 41.7%, #001E5B 100%);
	transition: opacity 0.4s ease;
}

/* Content Container */
.medica-work-card-content {
	position: relative;
	z-index: 3;
	width: 100%;
	margin-top: auto; /* Align content to the bottom of the card */
}

/* Card Title Typography */
.medica-work-card-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #FFFFFF;
	margin: 0;
	line-height: 100%;
	letter-spacing: 0%;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Premium Micro-Animations on Hover */
.medica-work-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 36px rgba(0, 30, 91, 0.25);
}

.medica-work-card:hover .medica-work-card-bg {
	transform: scale(1.08);
}

.medica-work-card:hover .medica-work-card-title {
	transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.medica-works-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.medica-works-header-right {
		align-self: flex-start;
	}
	.medica-works-title {
		font-size: 28px;
	}
	.medica-works-grid {
		justify-content: center;
		gap: 20px;
	}
	.medica-work-card {
		max-width: 100%;
		flex: 1 1 100%;
	}
	/* Keep standard height on mobile to look uniform */
	.medica-first-card {
		height: 280px;
	}
	.medica-work-card:not(.medica-first-card) {
		height: 280px;
	}
}

/* ==========================================================================
   MEDICA All Works Portfolio Grid Widget Styling (With Category Filter)
   ========================================================================== */

.medica-all-works-widget-wrapper {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 0;
	box-sizing: border-box;
}

/* Category Filter Bar */
.medica-all-works-filter-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 40px;
	padding-bottom: 8px;
}

.medica-filter-btn {
	background: transparent;
	border: 1px solid transparent;
	padding: 10px 22px;
	border-radius: 9999px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #6B7280; /* Neutral gray */
	cursor: pointer;
	outline: none;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	white-space: nowrap;
}

.medica-filter-btn:hover:not(.active) {
	color: #111827;
	background-color: #F3F4F6;
}

.medica-filter-btn.active {
	background-color: #2B3968; /* Navy blue brand color matching design image */
	color: #FFFFFF;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(43, 57, 104, 0.3);
}

/* Grid Layout */
.medica-all-works-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
	width: 100%;
}

/* All Works Card Styling */
.medica-all-work-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: 410.67px;
	height: 441px;
	border-radius: 18px;
	padding: 18px 16px;
	box-sizing: border-box;
	overflow: hidden;
	text-decoration: none !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	background-color: #1E293B; /* Dark base fallback */
}

/* Background image with subtle hover zoom */
.medica-all-work-card-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Gradient Overlay matching Figma design image */
.medica-all-work-card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0, 30, 91, 0) 35%, #0B193D 100%);
	transition: opacity 0.4s ease;
}

/* Content Container */
.medica-all-work-card-content {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px; /* User spec: gap 10px */
	margin-top: auto;
}

/* Card Title Typography - User Exact Specs */
.medica-all-work-card-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #FFFFFF;
	margin: 0;
	transition: transform 0.3s ease;
}

/* Card Description / Excerpt Typography - User Exact Specs */
.medica-all-work-card-excerpt {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 140%;
	letter-spacing: 0.15px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* Card Hover Micro-Animations */
.medica-all-work-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 36px rgba(0, 30, 91, 0.3);
}

.medica-all-work-card:hover .medica-all-work-card-bg {
	transform: scale(1.08);
}

.medica-all-work-card:hover .medica-all-work-card-title {
	transform: translateY(-2px);
}

/* Responsive adjustments for All Works Grid */
@media (max-width: 768px) {
	.medica-all-works-filter-bar {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 12px;
		-webkit-overflow-scrolling: touch;
	}
	.medica-all-works-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.medica-all-work-card {
		max-width: 100%;
		height: 380px;
	}
}