/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Cache Buster: 2026-06-06-v39 - posts-flex-grid opt-in column modifiers (1/2/3) */

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   0. Design Tokens (components + style.css)
   1. Base Layout Systems
      - Flexbox Grid System (NEW - Standardized)
      - Aspect Ratios
      - Card Flexbox Layout
   2. Card Components
      - Card Buttons & Actions
      - Brand & Client Cards
   3. Breadcrumb Navigation
   4. Taxonomy Archive Pages
      - Masthead Sections
      - Description Sections
      - Archive Sections
   5. Single Pages
      - Single Page Masthead
      - Single Page Content
   6. WordPress Block Alignment
   7. Global Overrides
   ========================================================================== */

/* ==========================================================================
   NOTE: Universal card styles have been moved to Section 7 (Standardized Card System)
   This consolidates all card-related CSS in one place for easier maintenance.
   ========================================================================== */

/* ==========================================================================
   0. DESIGN TOKENS (components + style.css)
   ==========================================================================
   Shared custom properties for components/ CSS. Values mirror Section 7 palette.
   Kadence palette vars (--global-palette*) are used as fallbacks where noted.
   ========================================================================== */

:root {
	/* Brand */
	--primary: var(--global-palette1, #0a60a9);
	--primary-hover: var(--global-palette2, #084a85);
	--primary-dark: #063558;
	--brand-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
	--brand-gradient-hover: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);

	/* Neutrals */
	--shade-white: #ffffff;
	--shade-off-white: #f8f9fa;
	--shade-black: #2b2b2b;
	--neutral: #777777;
	--text-heading: #2b2b2b;
	--text-body: #555555;
	--text-muted: #777777;
	--text-subtle: #7f8083;
	--divider: rgba(0, 0, 0, 0.08);
	--border-light: #e5e5e5;
	--surface-muted: #f4f4f4;

	/* Decorative accent (quote marks, subtle fills) */
	--base: rgba(10, 96, 169, 0.12);

	/* Typography */
	--font-body: inherit;
	--font-size-h1: clamp(2rem, 4vw, 3rem);
	--font-size-h5: 1.125rem;
	--font-size-body: 1rem;
	--font-weight-bold: 700;
	--leading-tight: 1.3;
	--tracking-tight: 0.02em;
	--text-s: 0.875rem;

	/* Radius — Section 7 cards use 0; page/banner cards use --radius-m / --radius-l */
	--radius-s: 4px;
	--radius-m: 21px;
	--radius-l: 21px;

	/* Spacing */
	--space-s: 0.5rem;
	--space-m: 1rem;
	--space-l: 1.5rem;

	/* Motion */
	--duration-base: 0.3s;
	--duration-slower: 0.5s;
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);

	/* Shadows */
	--shadow-s: 0 4px 20px rgba(0, 0, 0, 0.08);
	--shadow-l: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);

	/* Focus */
	--focus-ring-width: 2px;
	--focus-ring-color: var(--primary);
	--focus-ring-offset: 2px;

	/* Layout */
	--grid-gap: 30px;
}

/* ==========================================================================
   1. BASE LAYOUT SYSTEMS
   ========================================================================== */

/* Flexbox Grid System
-------------------------------------------------------------- */
/* Standardized flexbox grid for all archive/listing sections
   Mobile-first approach with variable column support (1, 2, 3, or 4 columns)
   Consistent 30px gap across all breakpoints */

.posts-flex-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

/* Mobile: 1 column (default) */
.posts-flex-grid > * {
	flex: 1 1 100%;
	max-width: 100%;
	min-width: 0; /* Prevent flex items from overflowing */
}

/* Mobile: 2 columns (if specified with .flex-xs-col-2) */
@media (min-width: 0px) {
	.posts-flex-grid.flex-xs-col-2 > * {
		flex: 1 1 calc(50% - 15px);
		max-width: calc(50% - 15px);
	}
}

/* Mobile: enforce 1 column for standard 1/2/3 modifier pair (≤767px) */
@media (max-width: 767px) {
	.posts-flex-grid.flex-sm-col-2 > *,
	.posts-flex-grid.flex-lg-col-3 > * {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Tablet: opt-in columns (768px+) */
@media (min-width: 768px) {
	.posts-flex-grid.flex-sm-col-2 > * {
		flex: 1 1 calc(50% - 15px);
		max-width: calc(50% - 15px);
	}

	.posts-flex-grid.flex-sm-col-3 > * {
		flex: 1 1 calc(33.333% - 20px);
		max-width: calc(33.333% - 20px);
	}
}

/* Desktop: opt-in columns (1025px+) */
@media (min-width: 1025px) {
	.posts-flex-grid.flex-lg-col-2 > * {
		flex: 1 1 calc(50% - 15px);
		max-width: calc(50% - 15px);
	}

	.posts-flex-grid.flex-lg-col-3 > * {
		flex: 1 1 calc(33.333% - 20px);
		max-width: calc(33.333% - 20px);
	}

	.posts-flex-grid.flex-lg-col-4 > * {
		flex: 1 1 calc(25% - 23px);
		max-width: calc(25% - 23px);
	}
}

/* Aspect Ratio System
-------------------------------------------------------------- */
.aspect-ratio-2-3 {
	position: relative;
	overflow: hidden;
}

.aspect-ratio-2-3::before {
	content: "";
	display: block;
	padding-top: 150%; /* 2:3 aspect ratio (3/2 * 100) */
}

.aspect-ratio-2-3 .post-thumbnail-inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aspect-ratio-2-3 .post-thumbnail-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Product-specific aspect ratio override */
.type-product .aspect-ratio-2-3 .post-thumbnail-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
}

.type-product .aspect-ratio-2-3 .post-thumbnail-inner img {
	object-fit: contain !important;
	max-width: 90%;
	height: auto;
	transition: max-width 0.3s ease;
}

.type-product .card-thumbnail-link.aspect-ratio-2-3 {
	background: #ffffff;
}

.type-product .card-thumbnail-link.aspect-ratio-2-3:hover .post-thumbnail-inner img {
	max-width: 95%;
}

/* Project-specific aspect ratio override */
.type-project .card-thumbnail-link.aspect-ratio-2-3,
article.type-project .card-thumbnail-link.aspect-ratio-2-3 {
	position: relative;
	overflow: hidden;
	display: block;
}

.type-project .card-thumbnail-link.aspect-ratio-2-3::before,
article.type-project .card-thumbnail-link.aspect-ratio-2-3::before {
	content: "";
	display: block;
	padding-top: 150%; /* 2:3 aspect ratio (3/2 * 100) */
}

.type-project .card-thumbnail-link.aspect-ratio-2-3 .post-thumbnail-inner,
article.type-project .card-thumbnail-link.aspect-ratio-2-3 .post-thumbnail-inner {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	align-items: unset !important;
	justify-content: unset !important;
}

.type-project .card-thumbnail-link.aspect-ratio-2-3 .post-thumbnail-inner img,
article.type-project .card-thumbnail-link.aspect-ratio-2-3 .post-thumbnail-inner img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* Card Flexbox Layout System
-------------------------------------------------------------- */
/* Flexbox for all card article containers */
.brand-entry,
.client-entry,
.product-category-entry,
.category-entry,
.type-product.entry,
.type-project.entry,
.term-entry,
.loop-entry {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.custom-post-type-list .site-main,
.entry-content .entry-content-wrap {
	padding: 1.5rem !important;
}

/* Flexbox for all card content wrappers */
.brand-entry .entry-content-wrap,
.client-entry .entry-content-wrap,
.product-category-entry .entry-content-wrap,
.category-entry .entry-content-wrap,
.type-product.entry .entry-content-wrap,
.type-project.entry .entry-content-wrap,
.term-entry .entry-content-wrap,
.loop-entry .entry-content-wrap {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Push footer/button to bottom */
.brand-entry .entry-footer,
.client-entry .entry-footer,
.product-category-entry .entry-footer,
.category-entry .entry-footer,
.type-product.entry .entry-footer,
.type-project.entry .entry-footer,
.term-entry .entry-footer,
.loop-entry .entry-footer {
	margin-top: auto;
}


/* ==========================================================================
   2. UTILITY STYLES (Icons, Arrows, etc.)
   ========================================================================== 
   Note: Card-specific styles moved to Section 7 (Standardized Card System)
   ========================================================================== */

/* Arrow Icon Styling - Global Utility
-------------------------------------------------------------- */
/* Icon wrapper for consistent arrow positioning */
.icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	transition: transform 0.3s ease;
}

.icon-wrapper.svg-baseline {
	vertical-align: baseline;
}

/* Shared card action arrow (CSS mask — one definition, no inline SVG per card) */
.icon-arrow-right {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 28'%3E%3Cpath d='M27 13.953c0 0.141-0.063 0.281-0.156 0.375l-6 5.531c-0.156 0.141-0.359 0.172-0.547 0.094-0.172-0.078-0.297-0.25-0.297-0.453v-3.5h-19.5c-0.281 0-0.5-0.219-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19.5v-3.5c0-0.203 0.109-0.375 0.297-0.453s0.391-0.047 0.547 0.078l6 5.469c0.094 0.094 0.156 0.219 0.156 0.359v0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 28'%3E%3Cpath d='M27 13.953c0 0.141-0.063 0.281-0.156 0.375l-6 5.531c-0.156 0.141-0.359 0.172-0.547 0.094-0.172-0.078-0.297-0.25-0.297-0.453v-3.5h-19.5c-0.281 0-0.5-0.219-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19.5v-3.5c0-0.203 0.109-0.375 0.297-0.453s0.391-0.047 0.547 0.078l6 5.469c0.094 0.094 0.156 0.219 0.156 0.359v0z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s ease;
}

/* Capped taxonomy partial grids */
.partial-grid-cap-notice {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	text-align: center;
	color: var(--global-palette6, #666);
}

/* NOTE: Brand & Client card styles moved to Section 7 (Standardized Card System)
   This reduces redundancy and consolidates all card styling in one location.
   -------------------------------------------------------------- */


/* ==========================================================================
   3. BREADCRUMB NAVIGATION
   ========================================================================== */

.tax-brand .brand-breadcrumbs,
.tax-client .brand-breadcrumbs,
.tax-product-category .brand-breadcrumbs,
.single-product .brand-breadcrumbs,
.single-project .brand-breadcrumbs {
	margin-bottom: 40px;
}

.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

.tax-brand .breadcrumb-item,
.tax-client .breadcrumb-item,
.tax-product-category .breadcrumb-item,
.single-product .breadcrumb-item,
.single-project .breadcrumb-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tax-brand .breadcrumb-item a,
.tax-client .breadcrumb-item a,
.tax-product-category .breadcrumb-item a,
.single-product .breadcrumb-item a,
.single-project .breadcrumb-item a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}

.tax-brand .breadcrumb-item a:hover,
.tax-client .breadcrumb-item a:hover,
.tax-product-category .breadcrumb-item a:hover,
.single-product .breadcrumb-item a:hover,
.single-project .breadcrumb-item a:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.2);
}

.tax-brand .breadcrumb-item svg,
.tax-client .breadcrumb-item svg,
.tax-product-category .breadcrumb-item svg,
.single-product .breadcrumb-item svg,
.single-project .breadcrumb-item svg {
	width: 14px;
	height: 14px;
}

.tax-brand .breadcrumb-separator,
.tax-client .breadcrumb-separator,
.tax-product-category .breadcrumb-separator,
.single-product .breadcrumb-separator,
.single-project .breadcrumb-separator {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 300;
}

.tax-brand .breadcrumb-current,
.tax-client .breadcrumb-current,
.tax-product-category .breadcrumb-current,
.single-product .breadcrumb-current,
.single-project .breadcrumb-current {
	color: #ffffff;
	font-weight: 600;
}

/* Responsive - Breadcrumbs */
@media (max-width: 768px) {
	.tax-brand .breadcrumb-list,
	.tax-client .breadcrumb-list,
	.tax-product-category .breadcrumb-list,
	.single-product .breadcrumb-list,
	.single-project .breadcrumb-list {
		font-size: 0.85rem;
	}
}

@media (max-width: 480px) {
	.tax-brand .breadcrumbs,
	.tax-client .breadcrumbs,
	.tax-product-category .breadcrumbs,
	.single-product .breadcrumbs,
	.single-project .breadcrumbs {
		margin-bottom: 25px;
	}
}


/* ==========================================================================
   4. TAXONOMY ARCHIVE PAGES
   ========================================================================== */

/* Taxonomy Masthead Section
-------------------------------------------------------------- */
.tax-brand .brand-masthead,
.tax-client .brand-masthead,
.tax-product-category .brand-masthead {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, #0a60a9 0%, #084a85 100%);
	margin-bottom: 0;
}

.tax-brand .brand-masthead-background,
.tax-client .brand-masthead-background,
.tax-product-category .brand-masthead-background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tax-brand .brand-masthead-overlay,
.tax-client .brand-masthead-overlay,
.tax-product-category .brand-masthead-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(10, 96, 169, 0.85) 0%, rgba(8, 74, 133, 0.85) 100%);
	z-index: 2;
}

.brand-masthead-content {
	position: relative;
	z-index: 3;
	padding: 60px 0;
	width: 100%;
}

/* Taxonomy Header */
.tax-brand .brand-header-inner,
.tax-client .brand-header-inner,
.tax-product-category .brand-header-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.tax-brand .brand-header-text,
.tax-client .brand-header-text,
.tax-product-category .brand-header-text {
	flex: 1;
	color: #ffffff;
	display: flex;
	align-items: center;
}

/* Brand Logo Wrapper - Base Styles (Desktop) */
.tax-brand .brand-logo-wrap,
.tax-client .brand-logo-wrap,
.tax-product-category .brand-logo-wrap,
.single-product .brand-logo-wrap,
.single-project .brand-logo-wrap {
	width: 180px;
	height: 180px;
	padding: 24px;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	border: 3px solid rgba(255, 255, 255, 0.3);
	overflow: hidden;
}

.tax-brand .brand-logo-wrap img,
.tax-client .brand-logo-wrap img,
.tax-product-category .brand-logo-wrap img,
.single-product .brand-logo-wrap img,
.single-project .brand-logo-wrap img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.brand-title {
	font-size: 3.5rem;
	font-weight: 800;
	margin: 0;
	color: #ffffff;
	line-height: 1.2;
	letter-spacing: -1px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

/* Taxonomy Description Section
-------------------------------------------------------------- */
.tax-brand .brand-description-section,
.tax-client .brand-description-section,
.tax-product-category .brand-description-section {
	padding: 60px 0;
	background: #ffffff;
}

.tax-brand .brand-description-content,
.tax-client .brand-description-content,
.tax-product-category .brand-description-content {
	max-width: 900px;
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 1.8;
	color: #444;
}

.tax-brand .brand-description-content p,
.tax-client .brand-description-content p,
.tax-product-category .brand-description-content p {
	margin: 0 0 20px;
}

.tax-brand .brand-description-content p:last-child,
.tax-client .brand-description-content p:last-child,
.tax-product-category .brand-description-content p:last-child {
	margin-bottom: 0;
}

.tax-brand .brand-description-content a,
.tax-client .brand-description-content a,
.tax-product-category .brand-description-content a {
	color: #0a60a9;
	text-decoration: none;
	transition: all 0.3s ease;
}

.tax-brand .brand-description-content a:hover,
.tax-client .brand-description-content a:hover,
.tax-product-category .brand-description-content a:hover {
	color: #084a85;
	border-bottom-color: #084a85;
}

.tax-brand .brand-description-content strong,
.tax-client .brand-description-content strong,
.tax-product-category .brand-description-content strong {
	color: #2b2b2b;
	font-weight: 600;
}

.tax-brand .brand-description-content em,
.tax-client .brand-description-content em,
.tax-product-category .brand-description-content em {
	font-style: italic;
	color: #555;
}

.tax-brand .brand-description-content ul,
.tax-client .brand-description-content ul,
.tax-product-category .brand-description-content ul,
.tax-brand .brand-description-content ol,
.tax-client .brand-description-content ol,
.tax-product-category .brand-description-content ol {
	margin: 0 0 20px;
	padding-left: 30px;
}

.tax-brand .brand-description-content li,
.tax-client .brand-description-content li,
.tax-product-category .brand-description-content li {
	margin-bottom: 8px;
}

/* Two-column layout for product category */
.tax-product-category .product-category-two-col {
	display: flex;
	gap: 50px;
	align-items: flex-start;
	margin: 0 auto;
}

.tax-product-category .product-category-image {
	flex: 0 0 450px;
	position: sticky;
	top: 120px;
}

.tax-product-category .product-category-image img {
	width: 100%;
	height: auto;
}

.tax-product-category .product-category-two-col .brand-description-content {
	flex: 1;
	min-width: 0;
	max-width: none;
	margin: 0;
}

/* Product Category Card Image Styles
-------------------------------------------------------------- */
.product-category-image-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%; /* 3:2 aspect ratio */
	overflow: hidden;
}

.product-category-image-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px; /* Outside padding for the image */
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-category-image {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Zoom effect on hover */
.entry-list-item:hover .product-category-image {
	transform: scale(1.1);
}

/* Product Card Image Styles
-------------------------------------------------------------- */
.product-image-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%; /* 3:2 aspect ratio */
	overflow: hidden;
}

.product-image-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px; /* Outside padding for the image */
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-image {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Zoom effect on hover */
.entry-list-item:hover .product-image {
	transform: scale(1.1);
}

/* Taxonomy Archive Sections (Related Content)
-------------------------------------------------------------- */
.tax-brand .brand-section-wrap,
.tax-client .client-section-wrap,
.tax-product-category .product-section-wrap,
.single-product .product-section-wrap,
.single-project .project-section-wrap,
.single-project .brand-section-wrap {
	margin-top: 80px;
	padding: 60px 0;
	position: relative;
}

.tax-brand .brand-section-wrap::before,
.tax-client .client-section-wrap::before,
.tax-product-category .product-section-wrap::before,
.single-product .product-section-wrap::before,
.single-project .project-section-wrap::before,
.single-project .brand-section-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 50%, transparent);
}

.tax-brand .brand-section-wrap .archive-header,
.tax-client .client-section-wrap .archive-header,
.tax-product-category .product-section-wrap .archive-header,
.single-product .product-section-wrap .archive-header,
.single-project .project-section-wrap .archive-header,
.single-project .brand-section-wrap .archive-header {
	text-align: center;
	margin-bottom: 50px;
	position: relative;
}

.tax-brand .brand-section-wrap .archive-title,
.tax-client .client-section-wrap .archive-title,
.tax-product-category .product-section-wrap .archive-title,
.single-product .product-section-wrap .archive-title,
.single-project .project-section-wrap .archive-title,
.single-project .brand-section-wrap .archive-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin: 0;
	color: #2b2b2b;
	letter-spacing: -0.5px;
	position: relative;
	display: inline-block;
}

/* Alternate background for second section */
.tax-brand .brand-section-wrap:nth-of-type(2),
.tax-client .client-section-wrap:nth-of-type(2),
.tax-product-category .product-section-wrap:nth-of-type(2),
.single-product .product-section-wrap:nth-of-type(2),
.single-project .project-section-wrap:nth-of-type(2),
.single-project .brand-section-wrap:nth-of-type(2) {
	background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
	margin-top: 0;
}

/* Listing section grids — unified layout inside partial section wraps */
.brand-section-wrap .posts-flex-grid,
.client-section-wrap .posts-flex-grid,
.product-section-wrap .posts-flex-grid,
.project-section-wrap .posts-flex-grid {
	gap: 35px;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.brand-section-wrap .posts-flex-grid > *,
	.client-section-wrap .posts-flex-grid > *,
	.product-section-wrap .posts-flex-grid > *,
	.project-section-wrap .posts-flex-grid > * {
		flex: 1 1 calc(50% - 17.5px);
		max-width: calc(50% - 17.5px);
	}
}

@media (max-width: 767px) {
	.brand-section-wrap .posts-flex-grid > *,
	.client-section-wrap .posts-flex-grid > *,
	.product-section-wrap .posts-flex-grid > *,
	.project-section-wrap .posts-flex-grid > * {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Section typography (card structure/hover: Section 7) */
.brand-section-wrap .entry-content-wrap,
.client-section-wrap .entry-content-wrap,
.product-section-wrap .entry-content-wrap,
.project-section-wrap .entry-content-wrap {
	padding: 28px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background: #ffffff;
}

.brand-section-wrap .entry-title,
.client-section-wrap .entry-title,
.product-section-wrap .entry-title,
.project-section-wrap .entry-title {
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 14px;
	letter-spacing: -0.3px;
}

.brand-section-wrap .entry-summary,
.client-section-wrap .entry-summary,
.product-section-wrap .entry-summary,
.project-section-wrap .entry-summary {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #666;
	margin-bottom: 20px;
	flex-grow: 1;
}

.brand-section-wrap .entry-footer,
.client-section-wrap .entry-footer,
.product-section-wrap .entry-footer,
.project-section-wrap .entry-footer {
	margin-top: auto;
	padding-top: 0;
	border-top: none;
}

/* NOTE: Card structure and hover live in Section 7 (.entry-list-item.card).
   Section wraps above keep typography/spacing only.
   -------------------------------------------------------------- */

/* Responsive - Taxonomy Pages */
@media (max-width: 1024px) {
	.tax-brand .brand-masthead,
	.tax-client .brand-masthead,
	.tax-product-category .brand-masthead {
		min-height: 300px;
	}
	
	.tax-brand .brand-title,
	.tax-client .brand-title,
	.tax-product-category .brand-title {
		font-size: 3rem;
	}
	
	.tax-brand .brand-logo-wrap,
	.tax-client .brand-logo-wrap,
	.tax-product-category .brand-logo-wrap {
		width: 150px;
		height: 150px;
		padding: 20px;
	}
	
	.tax-brand .brand-header-inner,
	.tax-client .brand-header-inner,
	.tax-product-category .brand-header-inner {
		gap: 30px;
	}
	
	.tax-product-category .product-category-two-col {
		gap: 40px;
	}
	
	.tax-product-category .product-category-image {
		flex: 0 0 380px;
	}
	
	.tax-brand .brand-section-wrap,
	.tax-client .client-section-wrap,
	.tax-product-category .product-section-wrap,
	.single-product .product-section-wrap,
	.single-project .project-section-wrap,
	.single-project .brand-section-wrap {
		margin-top: 60px;
		padding: 50px 0;
	}
	
	.tax-brand .brand-section-wrap .archive-title,
	.tax-client .client-section-wrap .archive-title,
	.tax-product-category .product-section-wrap .archive-title,
	.single-product .product-section-wrap .archive-title,
	.single-project .project-section-wrap .archive-title,
	.single-project .brand-section-wrap .archive-title {
		font-size: 2.2rem;
	}
	
	.brand-section-wrap .posts-flex-grid,
	.client-section-wrap .posts-flex-grid,
	.product-section-wrap .posts-flex-grid,
	.project-section-wrap .posts-flex-grid {
		gap: 30px;
	}
}

@media (max-width: 768px) {
	.tax-brand .brand-masthead,
	.tax-client .brand-masthead,
	.tax-product-category .brand-masthead {
		min-height: auto;
	}
	
	.tax-brand .brand-masthead-content,
	.tax-client .brand-masthead-content,
	.tax-product-category .brand-masthead-content {
		padding: 40px 0;
	}
	
	.tax-brand .brand-header-inner,
	.tax-client .brand-header-inner,
	.tax-product-category .brand-header-inner {
		flex-direction: column;
		text-align: center;
		gap: 25px;
	}
	
	.tax-brand .brand-logo-wrap,
	.tax-client .brand-logo-wrap,
	.tax-product-category .brand-logo-wrap {
		width: 130px;
		height: 130px;
		padding: 18px;
	}
	
	.tax-brand .brand-title,
	.tax-client .brand-title,
	.tax-product-category .brand-title {
		font-size: 2.5rem;
	}
	
	.tax-brand .brand-description-section,
	.tax-client .brand-description-section,
	.tax-product-category .brand-description-section {
		padding: 40px 0;
	}
	
	.tax-product-category .product-category-two-col {
		flex-direction: column;
		gap: 30px;
	}
	
	.tax-product-category .product-category-image {
		flex: 1 1 auto;
		position: static;
		max-width: 600px;
		margin: 0 auto;
	}
	
	.tax-brand .brand-description-content,
	.tax-client .brand-description-content,
	.tax-product-category .brand-description-content {
		font-size: 1rem;
	}
	
	.tax-brand .brand-section-wrap,
	.tax-client .client-section-wrap,
	.tax-product-category .product-section-wrap,
	.single-product .product-section-wrap,
	.single-project .project-section-wrap,
	.single-project .brand-section-wrap {
		margin-top: 40px;
		padding: 40px 0;
	}
	
	.tax-brand .brand-section-wrap .archive-header,
	.tax-client .client-section-wrap .archive-header,
	.tax-product-category .product-section-wrap .archive-header,
	.single-product .product-section-wrap .archive-header,
	.single-project .project-section-wrap .archive-header,
	.single-project .brand-section-wrap .archive-header {
		margin-bottom: 35px;
	}
	
	.tax-brand .brand-section-wrap .archive-title,
	.tax-client .client-section-wrap .archive-title,
	.tax-product-category .product-section-wrap .archive-title,
	.single-product .product-section-wrap .archive-title,
	.single-project .project-section-wrap .archive-title,
	.single-project .brand-section-wrap .archive-title {
		font-size: 1.8rem;
	}
	
	.brand-section-wrap .posts-flex-grid,
	.client-section-wrap .posts-flex-grid,
	.product-section-wrap .posts-flex-grid,
	.project-section-wrap .posts-flex-grid {
		gap: 25px;
	}
	
	.tax-brand .brand-section-wrap .entry-content-wrap,
	.tax-client .client-section-wrap .entry-content-wrap,
	.tax-product-category .product-section-wrap .entry-content-wrap,
	.single-product .product-section-wrap .entry-content-wrap,
	.single-project .project-section-wrap .entry-content-wrap,
	.single-project .brand-section-wrap .entry-content-wrap {
		padding: 22px;
	}
	
	.tax-brand .brand-section-wrap .entry-title,
	.tax-client .client-section-wrap .entry-title,
	.tax-product-category .product-section-wrap .entry-title,
	.single-product .product-section-wrap .entry-title,
	.single-project .project-section-wrap .entry-title,
	.single-project .brand-section-wrap .entry-title {
		font-size: 1.2rem;
	}
}

@media (max-width: 480px) {
	.tax-brand .brand-masthead-content,
	.tax-client .brand-masthead-content,
	.tax-product-category .brand-masthead-content {
		padding: 30px 0;
	}
	
	.tax-brand .brand-logo-wrap,
	.tax-client .brand-logo-wrap,
	.tax-product-category .brand-logo-wrap {
		width: 110px;
		height: 110px;
		padding: 15px;
	}
	
	.tax-brand .brand-title,
	.tax-client .brand-title,
	.tax-product-category .brand-title {
		font-size: 2rem;
		margin-bottom: 15px;
	}
	
	.tax-brand .brand-description-section,
	.tax-client .brand-description-section,
	.tax-product-category .brand-description-section {
		padding: 30px 0;
	}
	
	.tax-brand .brand-description-content,
	.tax-client .brand-description-content,
	.tax-product-category .brand-description-content {
		font-size: 0.95rem;
	}
	
	.tax-brand .brand-section-wrap,
	.tax-client .client-section-wrap,
	.tax-product-category .product-section-wrap,
	.single-product .product-section-wrap,
	.single-project .project-section-wrap,
	.single-project .brand-section-wrap {
		padding: 30px 0;
	}
	
	.tax-brand .brand-section-wrap .archive-title,
	.tax-client .client-section-wrap .archive-title,
	.tax-product-category .product-section-wrap .archive-title,
	.single-product .product-section-wrap .archive-title,
	.single-project .project-section-wrap .archive-title,
	.single-project .brand-section-wrap .archive-title {
		font-size: 1.5rem;
	}
	
	.brand-section-wrap .posts-flex-grid,
	.client-section-wrap .posts-flex-grid,
	.product-section-wrap .posts-flex-grid,
	.project-section-wrap .posts-flex-grid {
		gap: 20px;
	}
	
	.brand-section-wrap .entry-content-wrap,
	.client-section-wrap .entry-content-wrap,
	.product-section-wrap .entry-content-wrap,
	.project-section-wrap .entry-content-wrap {
		padding: 20px;
	}
	
	.brand-section-wrap .card-action-link,
	.client-section-wrap .card-action-link,
	.product-section-wrap .card-action-link,
	.project-section-wrap .card-action-link {
		padding: 10px 20px;
		font-size: 0.85rem;
	}
}

/* Desktop: 3 columns (1025px+) — 35px gap in listing section wraps */
@media (min-width: 1025px) {
	.brand-section-wrap .posts-flex-grid > *,
	.client-section-wrap .posts-flex-grid > *,
	.product-section-wrap .posts-flex-grid > *,
	.project-section-wrap .posts-flex-grid > * {
		flex: 1 1 calc(33.333% - 23.33px);
		max-width: calc(33.333% - 23.33px);
	}
}


/* ==========================================================================
   5. SINGLE PAGES (PRODUCT & PROJECT)
   ========================================================================== */

/* Single Page Masthead
-------------------------------------------------------------- */
.single-product .single-masthead,
.single-project .single-masthead {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, #0a60a9 0%, #084a85 100%);
	margin-bottom: 0;
}

.single-product .single-masthead-background,
.single-project .single-masthead-background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.single-product .single-masthead-overlay,
.single-project .single-masthead-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(10, 96, 169, 0.88) 0%, rgba(8, 74, 133, 0.88) 100%);
	z-index: 2;
}

.single-masthead-content {
	position: relative;
	z-index: 3;
	padding: 80px 0;
	width: 100%;
}

.single-product .single-header-inner,
.single-project .single-header-inner {
	margin-top: 30px;
	display: flex;
	align-items: center;
	gap: 30px;
}

/* Note: Base brand-logo-wrap styles defined in taxonomy section above */

.single-product .single-header-text,
.single-project .single-header-text {
	color: #ffffff;
	max-width: 1000px;
	display: flex;
	align-items: center;
}

.single-product .single-title,
.single-project .single-title {
	font-size: 4rem;
	font-weight: 800;
	margin: 0;
	color: #ffffff;
	line-height: 1.1;
	letter-spacing: -1.5px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Single Page Meta Tags */
.single-product .single-meta-tags,
.single-project .single-meta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin-top: 25px;
}

.single-product .single-taxonomy-group,
.single-project .single-taxonomy-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.single-product .taxonomy-label,
.single-project .taxonomy-label {
	font-size: 0.9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.single-product .taxonomy-tag,
.single-project .taxonomy-tag {
	display: inline-block;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	color: #ffffff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

.single-product .taxonomy-tag:hover,
.single-project .taxonomy-tag:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-2px);
}

/* Single Page Content
-------------------------------------------------------------- */
.single-product .single-content-wrap,
.single-project .single-content-wrap {
	padding: 80px 0;
	background: #ffffff;
}

.single-product .single-entry,
.single-project .single-entry {
	margin: 0 auto;
}

/* Product & project layout: 1 col mobile/tablet, 60/40 desktop */
.single-product .single-product-layout,
.single-project .single-project-layout {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
}

.single-product .single-product-content,
.single-project .single-project-content {
	min-width: 0;
	width: 100%;
}

.single-product .single-product-image,
.single-project .single-project-image {
	position: static;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

@media (min-width: 1025px) {
	.single-product .single-product-layout,
	.single-project .single-project-layout {
		flex-direction: row;
		gap: 50px;
	}

	.single-product .single-product-content,
	.single-project .single-project-content {
		flex: 3;
		width: auto;
	}

	.single-product .single-product-image,
	.single-project .single-project-image {
		flex: 2;
		position: sticky;
		top: 130px;
		max-width: none;
		margin: 0;
	}
}

.single-product .single-product-image img,
.single-project .single-project-image img {
	max-width: 100%;
	height: auto;
}

.single-product .single-entry .entry-content,
.single-project .single-entry .entry-content {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #444;
}

.single-product .single-entry .entry-content h2,
.single-project .single-entry .entry-content h2 {
	font-size: 2rem;
	font-weight: 700;
	margin: 50px 0 25px;
	color: #2b2b2b;
	line-height: 1.3;
}

.single-product .single-entry .entry-content h3,
.single-project .single-entry .entry-content h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 40px 0 20px;
	color: #2b2b2b;
}

.single-product .single-entry .entry-content p,
.single-project .single-entry .entry-content p {
	margin-bottom: 20px;
}

.single-product .single-entry .entry-content a,
.single-project .single-entry .entry-content a {
	color: #0a60a9;
	text-decoration: none;
	border-bottom: 1px solid rgba(10, 96, 169, 0.3);
	transition: all 0.3s ease;
}

.single-product .single-entry .entry-content a:hover,
.single-project .single-entry .entry-content a:hover {
	color: #084a85;
	border-bottom-color: #084a85;
}

.single-product .single-entry .entry-content img,
.single-project .single-entry .entry-content img {
	max-width: 100%;
	height: auto;
	margin: 30px 0;
}

.single-product .single-entry .entry-content ul,
.single-project .single-entry .entry-content ul,
.single-product .single-entry .entry-content ol,
.single-project .single-entry .entry-content ol {
	margin: 0 0 25px;
	padding-left: 30px;
}

.single-product .single-entry .entry-content li,
.single-project .single-entry .entry-content li {
	margin-bottom: 10px;
}

.single-product .single-entry .entry-content blockquote,
.single-project .single-entry .entry-content blockquote {
	margin: 40px 0;
	padding: 25px 30px;
	background: #f8f9fa;
	border-left: 4px solid #0a60a9;
	font-style: italic;
	color: #555;
}

/* Responsive - Single Pages */
@media (max-width: 1024px) {
	.single-product .single-masthead,
	.single-project .single-masthead {
		min-height: 300px;
	}
	
	.single-product .single-title,
	.single-project .single-title {
		font-size: 3.5rem;
	}
	
	.single-product .single-content-wrap,
	.single-project .single-content-wrap {
		padding: 60px 0;
	}
	
}

@media (max-width: 768px) {
	.single-product .single-masthead,
	.single-project .single-masthead {
		min-height: auto;
	}
	
	.single-product .single-masthead-content,
	.single-project .single-masthead-content {
		padding: 50px 0;
	}
	
	.single-product .single-title,
	.single-project .single-title {
		font-size: 2.5rem;
		margin: 0;
	}
	
	.single-product .single-meta-tags,
	.single-project .single-meta-tags {
		gap: 15px;
	}
	
	.single-product .taxonomy-tag,
	.single-project .taxonomy-tag {
		padding: 6px 14px;
		font-size: 0.85rem;
	}
	
	.single-product .single-header-inner,
	.single-project .single-header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	
	.single-product .single-content-wrap,
	.single-project .single-content-wrap {
		padding: 50px 0;
	}
	
	.single-product .single-entry .entry-content,
	.single-project .single-entry .entry-content {
		font-size: 1rem;
	}
	
	.single-product .single-entry .entry-content h2,
	.single-project .single-entry .entry-content h2 {
		font-size: 1.75rem;
		margin: 40px 0 20px;
	}
	
	.single-product .single-entry .entry-content h3,
	.single-project .single-entry .entry-content h3 {
		font-size: 1.35rem;
		margin: 30px 0 15px;
	}
}

@media (max-width: 480px) {
	.single-product .single-masthead-content,
	.single-project .single-masthead-content {
		padding: 40px 0;
	}
	
	.single-product .single-title,
	.single-project .single-title {
		font-size: 2rem;
		margin: 0;
		letter-spacing: -0.5px;
	}
	
	.single-product .single-meta-tags,
	.single-project .single-meta-tags {
		flex-direction: column;
		gap: 12px;
	}
	
	.single-product .single-content-wrap,
	.single-project .single-content-wrap {
		padding: 40px 0;
	}
	
	.single-product .single-entry .entry-content,
	.single-project .single-entry .entry-content {
		font-size: 0.95rem;
	}
}


/* ==========================================================================
   6. WORDPRESS BLOCK ALIGNMENT CLASSES
   ========================================================================== */

/**
 * Alignment class implementation following Kadence theme standards
 * alignwide = same width as .site-container (--global-content-width)
 * alignfull = full viewport width (edge to edge)
 */

.alignwide {
	max-width: var(--global-content-width, 1290px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
}

/* Keep CPT and taxonomy list sections the same width even if editor alignment differs */
.custom-post-type-list:not(.alignfull),
.taxonomy-term-list:not(.alignfull) {
	max-width: var(--global-content-width, 1290px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
}

.alignwide > .content-container,
.alignwide > .site-container {
	max-width: var(--global-content-width, 1290px);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.aligncenter,
figure.aligncenter,
img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-right: 2em;
	margin-left: 0;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 2em;
	margin-right: 0;
	margin-bottom: 1.5em;
}

/* Alignment for specific elements */
img.alignwide,
figure.alignwide img,
img.alignfull,
figure.alignfull img,
.wp-block-gallery.alignwide,
.wp-block-gallery.alignfull,
.wp-block-cover.alignwide,
.wp-block-cover.alignfull,
table.alignwide,
table.alignfull {
	width: 100%;
}

img.alignwide,
img.alignfull {
	height: auto;
}

table.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

table.alignleft {
	float: left;
	margin-right: 2em;
	margin-bottom: 1.5em;
}

table.alignright {
	float: right;
	margin-left: 2em;
	margin-bottom: 1.5em;
}

/* Mobile - remove floats */
@media (max-width: 782px) {
	.alignleft,
	.alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
		display: block;
	}
}


/* ==========================================================================
   7. STANDARDIZED CARD SYSTEM
   ==========================================================================
   
   Universal card component system for consistent styling across all card types.
   This system provides a unified approach to displaying CPT (Custom Post Types)
   and Taxonomy cards with consistent markup and styling.
   
   CARD TYPES SUPPORTED:
   - card-project (Custom Post Type: Projects)
   - card-product (Custom Post Type: Products)
   - card-product-category (Taxonomy: Product Categories)
   - card-brand (Taxonomy: Brands)
   - card-client (Taxonomy: Clients)

   Per-type layout CSS: components/cards/{type}/{type}.css (enqueued on demand).
   Shared card chrome + arrow icon: this file (Section 7). Card images: card-thumb size.
   
   STANDARDIZED HTML STRUCTURE:
   <div class="entry-list-item card card-{type}">
       <article class="entry content-bg loop-entry {type}-entry">
           <div class="card__image"><!-- Optional image section --></div>
           <div class="entry-content-wrap card__content">
               <header class="entry-header card__header">
                   <h2 class="entry-title card__title"><!-- Title --></h2>
               </header>
               <div class="entry-summary card__excerpt"><!-- Optional description --></div>
               <footer class="entry-footer card__footer">
                   <a class="card-action-link"><!-- Action button --></a>
               </footer>
           </div>
       </article>
   </div>
   
   ========================================================================== */

/* ------------------------------------------------------------------------- 
   7.1 Base Card Container Styles (Universal)
   ------------------------------------------------------------------------- */

/* Outer card wrapper - fills flexbox grid parent width */
.entry-list-item,
.entry-list-item.card {
	display: flex;
	width: 100%; /* Fill parent width from flexbox grid */
	transition: opacity 0.2s ease;
}

/* Inner article element - structural base */
.entry-list-item.card > .entry {
	width: 100%; /* Fill card wrapper */
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
				0 8px 40px rgba(0, 0, 0, 0.12),
				0 16px 80px rgba(0, 0, 0, 0.15) !important;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
				border-color 0.3s ease;
}

/* Card hover state - lift and enhance shadow */
.entry-list-item.card:hover > .entry {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
				0 8px 16px rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(10, 96, 169, 0.2);
}

/* ------------------------------------------------------------------------- 
   7.2 Card Image Section (Base Styles)
   ------------------------------------------------------------------------- */

/* Base image container - used by all card types */
.card__image {
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
	flex-shrink: 0;
}

/* Image link wrapper */
.card__image-link {
	display: block;
	position: relative;
	overflow: hidden;
}

/* Base image styles */
.card__image img,
.card__img {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Image zoom on card hover */
.entry-list-item.card:hover .card__image img,
.entry-list-item.card:hover .card__img {
	transform: scale(1.08);
}

/* ------------------------------------------------------------------------- 
   7.3 Card Image Variants
   ------------------------------------------------------------------------- */

/* Variant 1: Cover Image (Projects)
   - Full-bleed image that covers entire area
   - 3:2 aspect ratio with overlay on hover
   -------------------------------------------------------------- */
.card__image--cover {
	background: linear-gradient(135deg, #0a60a9 0%, #084a85 100%);
}

.card__image--cover img,
.card__image--cover .card__img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply luminosity blend mode and zoom to image on hover */
.entry-list-item.card:hover .card__image--cover img,
.entry-list-item.card:hover .card__image--cover .card__img {
	mix-blend-mode: luminosity;
	transform: scale(1.08);
}

/* Variant 2: Contain Image (Products, Product Categories)
   - Image contained within area with padding
   - 3:2 aspect ratio with zoom on hover
   -------------------------------------------------------------- */
.card__image--contain {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%; /* 3:2 aspect ratio */
	overflow: hidden;
	background: #ffffff;
}

.card__image--contain .card__image-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card__image--contain img {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

/* Zoom effect specific to contain images */
.entry-list-item.card:hover .card__image--contain img {
	transform: scale(1.1);
}

/* Variant 3: Logo Image (Brands, Clients)
   - Centered logo with gradient background
   - White box container for logo contrast
   -------------------------------------------------------------- */
.card__image--logo {
	position: relative;
	background: linear-gradient(135deg, #0a60a9 0%, #084a85 100%);
	padding: 40px 20px;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card__image--logo .card__logo-wrap {
	width: 160px;
	height: 160px;
	background: #ffffff;
	padding: 5px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

/* Logo zoom on hover */
.entry-list-item.card:hover .card__image--logo .card__logo-wrap {
	transform: scale(1.05);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	border-color: rgba(255, 255, 255, 0.5);
}

.card__image--logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transform: none; /* Override base zoom */
}


/* ------------------------------------------------------------------------- 
   7.4 Card Content Section
   ------------------------------------------------------------------------- */

/* Content wrapper - consistent padding and flexbox */
.card__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 24px;
	background: #ffffff;
}

/* ------------------------------------------------------------------------- 
   7.5 Card Header (Title)
   ------------------------------------------------------------------------- */

.card__header {
	margin-bottom: 0 !important;
}

.card__title {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 20px 0 !important;
	letter-spacing: 0.5px;
}

/* Title link - default state */
.card__title a {
	color: #2b2b2b;
	text-decoration: none;
	transition: text-decoration-color 0.3s ease, color 0.3s ease;
}

/* Title link - hover state (includes card hover) */
.card__title a:hover,
.entry-list-item.card:hover .card__title a {
	color: #0a60a9;
	text-decoration: underline;
	text-decoration-color: #0a60a9;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* External link icon in title */
.card__external-icon {
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
	opacity: 0.7;
}

/* ------------------------------------------------------------------------- 
   7.6 Card Categories/Taxonomies
   ------------------------------------------------------------------------- */

.card__categories {
	margin-bottom: 16px;
	font-size: 0.85rem;
	line-height: 1.4;
}

.card__category {
	color: #0a60a9;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ------------------------------------------------------------------------- 
   7.7 Card Date
   ------------------------------------------------------------------------- */

.card__date {
	margin-bottom: 16px;
	font-size: 0.85rem;
	color: #777777;
	font-weight: 500;
}

/* ------------------------------------------------------------------------- 
   7.8 Card Excerpt/Description
   ------------------------------------------------------------------------- */

.card__excerpt {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #555555;
	margin: 0 !important;
	flex-grow: 1;
}

.card__excerpt p {
	margin: 0 0 20px 0 !important;
}

/* ------------------------------------------------------------------------- 
   7.9 Card Footer (Action Button)
   ------------------------------------------------------------------------- */

.card__footer {
	margin-top: auto;
	padding-top: 0;
	border-top: none;
}

.card__footer .entry-actions {
	display: flex;
	justify-content: flex-start;
}

.card__footer .more-link-wrap {
	margin: 0;
}

/* Keyboard focus — title link is the single tab stop per Section 7 card */
.entry-list-item.card .card__title a:focus-visible,
.entry-list-item.card .entry-title a:focus-visible,
.entry-list-item.card-resource .card__title a:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* Universal card action button */
.card-action-link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: linear-gradient(135deg, #0a60a9 0%, #084a85 100%) !important;
	color: #ffffff !important;
	text-decoration: none;
	border: none;
	border-radius: 0;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(10, 96, 169, 0.3);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Button text and icons - always white */
.card-action-link *,
.card-action-link .icon-wrapper,
.card-action-link .icon {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* Button hover effects (direct hover + card hover) */
.card-action-link:hover,
.entry-list-item.card:hover .card-action-link {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(10, 96, 169, 0.4);
	color: #ffffff !important;
	background: linear-gradient(135deg, #084a85 0%, #063558 100%) !important;
}

/* Arrow icon animation on hover */
.card-action-link .icon-wrapper {
	transition: transform 0.2s ease;
}

.card-action-link:hover .icon-wrapper,
.entry-list-item.card:hover .card-action-link .icon-wrapper {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------------- 
   7.10 Card Type Specific Adjustments
   ------------------------------------------------------------------------- */

/* Project Cards - use cover images */
.card-project .card__image {
	aspect-ratio: 3 / 2;
	background: var(--brand-gradient);
}

.card-project .card__image,
.card-project .card__image-link,
.card-project .card__image img,
.card-project .card__image .card__img {
	border-radius: 0;
}

/* Default post cards — same sharp-corner treatment as projects */
.card-post .card__image,
.card-post .card__image-link,
.card-post .card__image img,
.card-post .card__image .card__img {
	border-radius: 0;
}

/* Product & Product Category Cards - use contain images */
.card-product .card__image,
.card-product-category .card__image {
	background: #ffffff;
}

/* Brand & Client Cards - use logo images */
.card-brand .card__image--logo,
.card-client .card__image--logo {
	min-height: 200px;
}

/* Resource Cards - use logo images with custom dimensions */
.card-resource .card__image--logo {
	min-height: 200px;
}

.card-resource .resource-card-logo-wrap {
	width: 170px;
	height: 220px;
}

/* ------------------------------------------------------------------------- 
   7.11 Responsive Adjustments
   ------------------------------------------------------------------------- */

/* Large Desktop (1200px+) - Default styles apply */

/* Desktop/Tablet (768px - 1024px) */
@media (max-width: 1024px) {
	/* Card widths controlled by flexbox grid parent */
	
	.card__image--logo .card__logo-wrap {
		width: 140px;
		height: 140px;
	}
	
	.card-resource .resource-card-logo-wrap {
		width: 150px;
		height: 193px;
	}
}

/* Tablet (768px - 1024px) */
@media (max-width: 768px) {
	/* Card widths controlled by flexbox grid parent */
	
	.card__content {
		padding: 20px;
	}
	
	.card__title {
		font-size: 1.2rem;
	}
	
	.card__image--logo {
		padding: 30px 15px;
		min-height: 180px;
	}
	
	.card__image--logo .card__logo-wrap {
		width: 120px;
		height: 120px;
	}
	
	.card-resource .resource-card-logo-wrap {
		width: 128px;
		height: 165px;
	}
}

/* Mobile Large (480px - 767px) */
@media (max-width: 600px) {
	/* Card widths controlled by flexbox grid parent */
	
	.card__content {
		padding: 20px;
	}
	
	.card-action-link {
		padding: 10px 20px;
		font-size: 0.85rem;
	}
}

/* Mobile (< 480px) */
@media (max-width: 480px) {
	/* Card widths controlled by flexbox grid parent */
	
	.card__image--logo {
		padding: 25px 10px;
		min-height: 160px;
	}
	
	.card__image--logo .card__logo-wrap {
		width: 150px;
		height: 150px;
		padding: 5px;
	}
	
	.card-resource .resource-card-logo-wrap {
		width: 160px;
		height: 206px;
	}
	
	.card__content {
		padding: 20px;
	}
}

/* End of Standardized Card System
   ========================================================================== */