/**
 * Consolidated Card System CSS
 * 
 * A comprehensive card component system following compound class methodology
 * Similar to the button system in links-buttons.css
 * 
 * This file consolidates all card-related styles from:
 * - cards-system.css (complete file)
 * - cards-sections.css (.card-gallery only)
 * - pages-special.css (.dream-card)
 * - page-team.css (.teambox)
 * - page-cities.css (.icon-card, .small-card)
 * - headings.css (card-related headings)
 * - responsive.css (card responsive styles)
 * - responsive-mobile.css (card mobile styles) 
 * - utilities-base.css (card utilities)
 * 
 * Usage: <div class="card card-blog card-elevated">...</div>
 * 
 * Base class: .card
 * Variants: card-blog, card-property, card-team, card-info, card-review, card-partner, card-city
 * Sizes: card-sm, card-lg, card-xl
 * Styles: card-minimal, card-elevated, card-outlined, card-flat
 * 
 * Property Card Variants:
 * - .card-property: Canonical variant for property cards (theme-defined)
 * - .card-properties: Plugin-output styling (maintained for compatibility)
 *   Note: Both variants are styled identically via alias rule
 */

/* ============================
   Card System Variables
   ============================ */
:root {
    /* Component-specific Card Variables
     * Core card variables are defined in variables.css:
     * --card-bg, --card-bg-hover, --card-border-color, --card-text-color, --card-text-muted,
     * --card-padding-*, --card-radius-*, --card-gap-*, --card-transition-*
     * 
     * Extended here: Additional shadows and component-specific styling
     */
    /* Card Shadows */
    --card-shadow-sm: var(--shadow-sm, 0 3px 20px 0 rgba(8, 15, 52, .06));
    --card-shadow: 0 2px 30px 0 rgba(8, 15, 52, .06);
    --card-shadow-lg: 0 10px 30px 0 rgba(8, 15, 52, .06);
    --card-shadow-xl: 0 20px 40px 0 rgba(8, 15, 52, .08);
    --card-shadow-hover: 4px 4px 10px rgba(248, 87, 87, 0.2);
    
    /* Card Radius */
    --card-radius: var(--radius-2xl, 24px);
    --card-radius-sm: var(--radius-lg, 12px);
    --card-radius-lg: var(--radius-2xl, 24px);
    --card-radius-xl: 32px;
    
    /* Card Padding */
    --card-padding: 1.5rem;
    --card-padding-sm: 1rem;
    --card-padding-lg: 2rem;
    --card-padding-xl: 2.5rem;
    --card-image-padding: 0;
    
    /* Card Spacing */
    --card-gap: 1rem;
    --card-gap-lg: 1.5rem;
    --card-gap-xl: 2rem;
    
    /* Card Transitions */
    --card-transition: all 0.3s ease;
    --card-transition-fast: all 0.2s ease;
    
    /* Primary color fallback */
    --primary-color: var(--color-primary, #000a4a);
    
    /* Accent color for hover states */
    --accent-color: var(--color-accent, #f85757);
    --accent-color-transparent: rgba(248, 87, 87, 0.25);
    
    /* Additional card colors */
    --card-shadow-dark: var(--shadow-dark, rgba(8, 15, 52, 0.06));
    --card-shadow-light: var(--shadow-light, rgba(0, 0, 0, 0.08));
    --card-overlay-bg: var(--overlay-dark, rgba(0, 0, 0, 0.4));
    --card-overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    --card-loading-shimmer: rgba(255,255,255,0.4);
    --card-badge-shadow: rgba(20, 20, 43, 0.09);
    --card-info-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --card-text-dark: var(--color-text-dark, rgb(34, 34, 35));
    --card-white: var(--color-white, rgb(255, 255, 255));
    --card-navy: var(--color-navy, rgb(0, 10, 64));
    --card-hover-link: var(--color-hover-link, #000a41);
}


/* ============================
   Base Card Class - Theme Scoped
   ============================ */

/* Base card - consolidated with default card properties */
body.theme-pt .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border-radius: var(--card-radius);
    overflow: hidden;
    word-wrap: break-word;
    border: 1px solid transparent;
    padding: 0;
    box-shadow: 4px 4px 10px var(--card-shadow-light);
    transition: var(--card-transition);
    margin-bottom: 10px;
    height: 100%;
}

body.theme-pt .card:hover {
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--accent-color-transparent);
    transform: none;
}

/* Card Components - Generic styles for all cards */
body.theme-pt .card .card-image {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0;
    padding: var(--card-image-padding);
    border-radius: 0;
}

body.theme-pt .card .card-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 0;
    padding: 0;
    margin: 0;
    border: none;
    transition: none;
}

body.theme-pt .card .card-image img:hover {
    transform: none;
}

body.theme-pt .card .card-body {
    padding: var(--card-padding);
    background: var(--card-bg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

body.theme-pt .card .card-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

body.theme-pt .card .card-body h3 a {
    color: var(--color-primary);
    text-decoration: none;
}

body.theme-pt .card .card-body h3 a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

body.theme-pt .card .card-body p {
    color: var(--card-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

body.theme-pt .card .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--card-text-muted);
    margin-bottom: 1rem;
}

body.theme-pt .card .card-meta h6 {
    margin: 0;
    font-size: 0.875rem;
    color: var(--card-text-muted);
    font-weight: normal;
}

body.theme-pt .card .shortIntro {
    color: var(--card-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

body.theme-pt .card .btn-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

body.theme-pt .card .btn-link:hover {
    color: var(--primary-color);
    text-decoration: none;
}

body.theme-pt .card .btn-link img {
    width: 16px;
    height: 16px;
    aspect-ratio: auto;
}

/* New Style Variant Classes */

/* Minimal Card - Clean minimal styling */
body.theme-pt .card.card-minimal {
    box-shadow: none;
    border: none;
    padding: 0;
    margin-bottom: 10px;
}

body.theme-pt .card.card-minimal:hover {
    box-shadow: none;
    transform: none;
    border: none;
}

/* Elevated Card - Enhanced shadows and hover effects */
body.theme-pt .card.card-elevated {
    box-shadow: var(--card-shadow-lg);
    border: none;
    padding: var(--card-padding);
    margin-bottom: 10px;
    transition: var(--card-transition);
}

body.theme-pt .card.card-elevated:hover {
    box-shadow: var(--card-shadow-xl);
    transform: translateY(-6px);
}

/* Outlined Card - Border focus */
body.theme-pt .card.card-outlined {
    background: transparent;
    border: 2px solid var(--card-border-color);
    box-shadow: none;
    padding: var(--card-padding);
    margin-bottom: 10px;
    transition: var(--card-transition);
}

body.theme-pt .card.card-outlined:hover {
    border-color: var(--primary-color);
    box-shadow: none;
    transform: none;
}

/* Flat Card - Subtle styling */
body.theme-pt .card.card-flat {
    box-shadow: none;
    border: 1px solid var(--card-border-color);
    padding: var(--card-padding);
    margin-bottom: 10px;
    transition: var(--card-transition);
}

body.theme-pt .card.card-flat:hover {
    box-shadow: var(--card-shadow-sm);
    transform: none;
}

/* Padded Card - Explicit padding variant */
body.theme-pt .card.card-padded {
    padding: var(--card-padding);
    margin-bottom: 10px;
}

/* Responsive image handling */
body.theme-pt .card img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Links within cards */
body.theme-pt .card a {
    color: inherit;
    text-decoration: none;
    transition: var(--card-transition-fast);
}

body.theme-pt .card a:hover {
    color: var(--primary-color);
}

/* ============================
   Card Variants
   ============================ */

/* Blog Card */
body.theme-pt .card.card-blog {
    background: var(--card-bg);
    border: none;
    box-shadow: var(--card-shadow);
}

body.theme-pt .card.card-blog:hover {
    box-shadow: var(--card-shadow-hover);
}

body.theme-pt .card.card-blog .card-image {
    margin: 0;
    margin-bottom: 0;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    overflow: hidden;
}

body.theme-pt .card.card-blog .card-body {
    padding: 24px;
}

body.theme-pt .card.card-blog .card-body .date {
    color: var(--color-text-muted);
    margin-bottom: 16px;
    font-size: 16px;
}

body.theme-pt .card.card-blog .card-title {
    min-height: 56px;
    margin-bottom: 16px;
    font-size: 22px;
    line-height: 1.15;
}

body.theme-pt .card.card-blog .card-text {
    margin-bottom: 24px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 16px;
    color: var(--color-text-primary);
}

body.theme-pt .card.card-blog hr {
    margin-top: auto;
    margin-bottom: 32px;
    border-color: var(--color-border-primary);
    opacity: 1;
    width: 100%;
    min-height: 1px;
}

body.theme-pt .card.card-blog .btn-link {
    text-decoration: none;
    color: var(--color-text-muted);
}

/* Property Card */
body.theme-pt .card.card-property {
    background: var(--card-bg);
    padding: 0;
}

body.theme-pt .card.card-property .card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

body.theme-pt .card.card-property .card-body {
    padding: var(--card-padding);
}

body.theme-pt .card.card-property:hover {
    box-shadow: var(--card-shadow-xl);
}

body.theme-pt .card.card-property .card-text {
    -webkit-line-clamp: unset;
}

body.theme-pt .card.card-property .badge {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--color-primary);
    border-radius: 60px;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.375em;
    box-shadow: 0 1px 6px var(--card-badge-shadow);
}

body.theme-pt .card.card-property .badge.bg-primary {
    color: var(--color-bg-primary);
    background: var(--color-primary);
}

/* Team Card */
body.theme-pt .card.card-team {
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.theme-pt .card.card-team .card-image {
    width: 100%;
    height: 350px;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
}

body.theme-pt .card.card-team .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.theme-pt .card.card-team .card-body {
    padding: 36px 40px 55px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

body.theme-pt .card.card-team .card-body h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 11px;
}

body.theme-pt .card.card-team .card-body h3 a {
    color: var(--color-primary);
    text-decoration: none;
}

body.theme-pt .card.card-team .card-body h3 a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

body.theme-pt .card.card-team .card-body .designation {
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

body.theme-pt .card.card-team .card-body hr {
    border-color: var(--color-border-primary);
    opacity: 1;
    margin-top: 30px;
    margin-bottom: 25px;
}

body.theme-pt .card.card-team .contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: auto;
}

body.theme-pt .card.card-team:hover {
    box-shadow: 0 10px 30px 0 rgba(8, 15, 52, .06);
}

/* Card-clickable modifier for team cards */
body.theme-pt .card.card-team.card-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

body.theme-pt .card.card-team.card-clickable:hover {
    box-shadow: 4px 4px 10px rgba(248, 87, 87, 0.2);
    border: 1px solid rgba(248, 87, 87, 0.25);
}

/* Info Card */
body.theme-pt .card.card-info {
    background: var(--card-info-gradient);
    color: white;
    border: none;
}

body.theme-pt .card.card-info .card-text,
body.theme-pt .card.card-info .card-title {
    color: white;
}

body.theme-pt .card.card-info:hover {
    box-shadow: var(--card-shadow-xl);
}


/* Review Card */
body.theme-pt .card.card-review {
    background: var(--card-bg);
    padding: var(--card-padding-lg);
    position: relative;
}

body.theme-pt .card.card-review::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 4rem;
    color: var(--primary-color);
    opacity: 0.1;
    font-family: serif;
}

body.theme-pt .card.card-review .card-footer {
    margin-top: auto;
    padding-top: var(--card-gap);
    border-top: 1px solid var(--card-border-color);
}

/* Partner Card */
body.theme-pt .card.card-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--card-padding-lg);
    background: var(--card-bg);
    min-height: 150px;
}

body.theme-pt .card.card-partner:hover {
    background-color: var(--card-bg-hover);
    transform: scale(1.05);
}

/* City Profile Card - Similar to cities archive style */
body.theme-pt .card-city-profile {
    background: var(--color-bg-secondary, #f9f9f9);
    border: 1px solid transparent;
    border-radius: var(--card-radius);
    box-shadow: 4px 4px 10px var(--card-shadow-light);
    padding: 0;
    overflow: hidden;
    transition: var(--card-transition);
    margin-bottom: 20px;
}

body.theme-pt .card-city-profile:hover {
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--accent-color-transparent);
}

body.theme-pt .card-city-profile .img,
body.theme-pt .card-city-profile .card-image {
    border-radius: 24px 0 0 24px;
    box-shadow: var(--card-shadow-dark) 0px 3px 20px 0px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Remove Bootstrap column padding for image column */
body.theme-pt .card-city-profile .col-lg-4,
body.theme-pt .card-city-profile .col-md-5,
body.theme-pt .card-city-profile .col-12:first-child {
    padding-left: 0;
    padding-right: 0;
}

/* Specific overrides for about-john section */
body.theme-pt .about-john .card-city-profile .img {
    margin-bottom: 0;
}

body.theme-pt .card-city-profile .card-body,
body.theme-pt .card-city-profile .section-title {
    padding-left: 40px;
}

body.theme-pt .card-city-profile .icons {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--card-text-dark);
}

body.theme-pt .card-city-profile .icons img {
    margin-right: 10px;
    width: 24px;
    height: auto;
}

body.theme-pt .card-city-profile .icons h4 {
    display: inline;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--card-text-dark);
    margin: 0;
}

body.theme-pt .card-city-profile .icons.first {
    margin-bottom: 15px;
}

body.theme-pt .card-city-profile h2,
body.theme-pt .card-city-profile .card-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    color: var(--card-text-dark);
    margin-bottom: 12px;
}

/* Horizontal Card - Team Member Profile Style */
body.theme-pt .card.card-horizontal {
    background: var(--card-bg);
    border: none;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

/* Specific context for single team page */
body.theme-pt .single--team .card.card-horizontal {
    z-index: 3; /* Ensures card appears above the background */
}

body.theme-pt .card.card-horizontal:hover {
    box-shadow: var(--card-shadow-lg);
}

/* Remove Bootstrap gutters from horizontal card columns */
body.theme-pt .card.card-horizontal .row > * {
    padding-right: 0;
    padding-left: 0;
}

body.theme-pt .card.card-horizontal .img {
    position: relative;
    overflow: hidden;
}

body.theme-pt .card.card-horizontal .img img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: top;
    border-top-left-radius: var(--card-radius);
    border-bottom-left-radius: var(--card-radius);
}

body.theme-pt .card.card-horizontal .inner {
    padding: 40px;
}

body.theme-pt .card.card-horizontal .bio p {
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--card-text-color);
}

body.theme-pt .card.card-horizontal hr {
    width: 100%;
    min-height: 1px;
    border-color: var(--card-border-color);
    margin-top: 35px;
    margin-bottom: 35px;
    opacity: 1;
}

body.theme-pt .card.card-horizontal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

body.theme-pt .card.card-horizontal ul li {
    margin-bottom: 15px;
}

body.theme-pt .card.card-horizontal ul li a {
    color: var(--card-text-color);
    text-decoration: none;
    font-size: 19px;
    font-weight: 500;
    transition: var(--card-transition-fast);
}

body.theme-pt .card.card-horizontal ul li a:hover {
    color: var(--primary-color);
}

body.theme-pt .card.card-horizontal ul li a i {
    margin-right: 8px;
    color: var(--primary-color);
}

/* Mobile responsive adjustments for horizontal card moved to mobile-consolidated.css */

/* City Card */
body.theme-pt .card.card-city {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

body.theme-pt .card.card-city .card-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

body.theme-pt .card.card-city .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--card-transition);
}

body.theme-pt .card.card-city:hover .card-image img {
    transform: scale(1.1);
}

body.theme-pt .card.card-city .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--card-padding);
    background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.5));
    color: #fff;
}

/* Card-default - DEPRECATED: Use base .card class instead */
/* Styles have been consolidated into the base .card class */

/* Card Link - No underline or color change on hover */
body.theme-pt .card-link {
    color: inherit;
    text-decoration: none;
    transition: none;
}

body.theme-pt .card-link:hover {
    color: inherit;
    text-decoration: none;
}

body.theme-pt .card-link:focus {
    outline: none;
}

/* When card-link is used as wrapper for entire card */
body.theme-pt a.card-link.card {
    color: inherit;
    text-decoration: none;
}

body.theme-pt a.card-link.card:hover {
    color: inherit;
    text-decoration: none;
}

/* When <a> tag is used as card wrapper - Override global a:hover styles */
body.theme-pt a.card,
body.theme-pt a.card.card-clickable,
body.theme-pt a.card.card-blog,
body.theme-pt a.card.card-blog.card-clickable {
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}

body.theme-pt a.card:hover,
body.theme-pt a.card.card-clickable:hover,
body.theme-pt a.card.card-blog:hover,
body.theme-pt a.card.card-blog.card-clickable:hover {
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--accent-color-transparent);
    border-bottom: 1px solid var(--accent-color-transparent);
    transform: none;
}

body.theme-pt a.card:focus,
body.theme-pt a.card.card-clickable:focus {
    outline: none;
}

/* Ensure specific text elements inside card links maintain consistent color */
body.theme-pt a.card .card-text,
body.theme-pt a.card .card-meta,
body.theme-pt a.card .shortIntro,
body.theme-pt a.card p,
body.theme-pt a.card .btn-link,
body.theme-pt a.card.card-clickable .card-text,
body.theme-pt a.card.card-clickable .card-meta,
body.theme-pt a.card.card-clickable .shortIntro,
body.theme-pt a.card.card-clickable p,
body.theme-pt a.card.card-clickable .btn-link,
body.theme-pt a.card.card-blog .card-text,
body.theme-pt a.card.card-blog .card-meta,
body.theme-pt a.card.card-blog .shortIntro,
body.theme-pt a.card.card-blog p,
body.theme-pt a.card.card-blog .btn-link,
body.theme-pt a.card.card-blog.card-clickable .card-text,
body.theme-pt a.card.card-blog.card-clickable .card-meta,
body.theme-pt a.card.card-blog.card-clickable .shortIntro,
body.theme-pt a.card.card-blog.card-clickable p,
body.theme-pt a.card.card-blog.card-clickable .btn-link {
    color: inherit;
    text-decoration: none;
}

/* Override for card titles to use primary color */
body.theme-pt a.card .card-title,
body.theme-pt a.card h3.card-title,
body.theme-pt a.card h3,
body.theme-pt a.card.card-clickable .card-title,
body.theme-pt a.card.card-clickable h3.card-title,
body.theme-pt a.card.card-clickable h3,
body.theme-pt a.card.card-blog .card-title,
body.theme-pt a.card.card-blog h3.card-title,
body.theme-pt a.card.card-blog h3,
body.theme-pt a.card.card-blog.card-clickable .card-title,
body.theme-pt a.card.card-blog.card-clickable h3.card-title,
body.theme-pt a.card.card-blog.card-clickable h3 {
    color: var(--color-primary);
}

/* Properties Card - Based on card-default with max-height constraint */
body.theme-pt .card.card-properties {
    background: var(--card-bg);
    border: 1px solid transparent;
    border-radius: var(--card-radius);
    box-shadow: 4px 4px 10px var(--card-shadow-light);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: none;
}

body.theme-pt .card.card-properties:hover {
    transform: none;
    box-shadow: var(--card-shadow-hover);
    border: 1px solid var(--accent-color-transparent);
}

body.theme-pt .card.card-properties .card-image {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

body.theme-pt .card.card-properties .card-image img,
body.theme-pt .card.card-properties .card-img-top {
    width: 100%;
    height: auto;
    min-height: 283px;
    max-height: 283px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    padding: 0;
    margin: 0;
    border: none;
    transition: none;
}

body.theme-pt .card.card-properties .card-image img:hover,
body.theme-pt .card.card-properties .card-img-top:hover {
    transform: none;
}

body.theme-pt .card.card-properties .card-body {
    padding: var(--card-padding);
    background: var(--card-bg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.theme-pt .card.card-properties .card-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

body.theme-pt .card.card-properties .card-body h3 a {
    color: inherit;
    text-decoration: none;
}

body.theme-pt .card.card-properties .card-body h3 a:hover {
    color: inherit;
    text-decoration: none;
}

body.theme-pt .card.card-properties .card-body p {
    color: var(--card-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
}

body.theme-pt .card.card-properties .card-body hr {
    margin: 1rem 0 0.75rem 0;
    border: none;
    border-top: 1px solid var(--card-border-color);
    flex-shrink: 0;
}

body.theme-pt .card.card-properties .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--card-text-muted);
    margin-bottom: 1rem;
}

body.theme-pt .card.card-properties .card-meta h6 {
    margin: 0;
    font-size: 0.875rem;
    color: var(--card-text-muted);
    font-weight: normal;
}

body.theme-pt .card.card-properties .shortIntro {
    color: var(--card-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

body.theme-pt .card.card-properties .btn-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

body.theme-pt .card.card-properties .btn-link:hover {
    color: var(--primary-color);
    text-decoration: none;
}

body.theme-pt .card.card-properties .btn-link img {
    width: 16px;
    height: 16px;
    aspect-ratio: auto;
}

/* When <a> tag is used as card wrapper - Override global a:hover styles */
body.theme-pt a.card.card-properties,
body.theme-pt a.card.card-properties.card-clickable {
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}

body.theme-pt a.card.card-properties:hover,
body.theme-pt a.card.card-properties.card-clickable:hover {
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--accent-color-transparent);
}

body.theme-pt a.card.card-properties:focus,
body.theme-pt a.card.card-properties.card-clickable:focus {
    outline: none;
}

/* Alias rule: Make .card-properties inherit .card-property styles */
body.theme-pt .card.card-properties {
    /* Inherit all .card-property styles */
}

/* ============================
   Card Size Modifiers
   ============================ */

/* Small Card */
body.theme-pt .card.card-sm {
    padding: var(--card-padding-sm);
    border-radius: var(--card-radius-sm);
}

body.theme-pt .card.card-sm .card-body {
    padding: var(--card-padding-sm);
}

/* Large Card */
body.theme-pt .card.card-lg {
    padding: var(--card-padding-lg);
    border-radius: var(--card-radius-lg);
}

body.theme-pt .card.card-lg .card-body {
    padding: var(--card-padding-lg);
}

/* Extra Large Card */
body.theme-pt .card.card-xl {
    padding: var(--card-padding-xl);
    border-radius: var(--card-radius-xl);
}

body.theme-pt .card.card-xl .card-body {
    padding: var(--card-padding-xl);
}

/* ============================
   Card Style Modifiers
   ============================ */

/* Minimal Card */
body.theme-pt .card.card-minimal {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

body.theme-pt .card.card-minimal:hover {
    box-shadow: none;
    transform: none;
}

/* Elevated Card */
body.theme-pt .card.card-elevated {
    box-shadow: var(--card-shadow-lg);
    border: none;
}

body.theme-pt .card.card-elevated:hover {
    box-shadow: var(--card-shadow-xl);
    transform: translateY(-6px);
}

/* Outlined Card */
body.theme-pt .card.card-outlined {
    background: transparent;
    border: 2px solid var(--card-border-color);
    box-shadow: none;
}

body.theme-pt .card.card-outlined:hover {
    border-color: var(--primary-color);
    box-shadow: none;
    transform: none;
}

/* Flat Card */
body.theme-pt .card.card-flat {
    box-shadow: none;
    border: 1px solid var(--card-border-color);
}

body.theme-pt .card.card-flat:hover {
    box-shadow: var(--card-shadow-sm);
    transform: none;
}

/* ============================
   Card Components
   ============================ */

/* Card Header */
body.theme-pt .card-header {
    padding: var(--card-padding);
    border-bottom: 1px solid var(--card-border-color);
    margin: 0;
    margin-bottom: 0;
}

body.theme-pt .card-minimal .card-header {
    padding: 0;
    margin: 0;
    margin-bottom: var(--card-gap);
    border: none;
}

/* Card Body */
body.theme-pt .card-body {
    flex: 1 1 auto;
    padding: var(--card-padding);
}

/* Card Footer */
body.theme-pt .card-footer {
    padding: var(--card-padding);
    border-top: 1px solid var(--card-border-color);
    margin: 0;
}

body.theme-pt .card-minimal .card-footer {
    padding: 0;
    margin: var(--card-gap) 0 0;
    border: none;
}

/* Card Image */
body.theme-pt .card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
}

body.theme-pt .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--card-transition);
}
 
/* Card Meta */
body.theme-pt .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--card-gap);
    font-size: 0.875rem;
    color: var(--card-text-muted);
    margin-bottom: var(--card-gap);
}
 
body.theme-pt .card-meta > * {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Card Actions */
body.theme-pt .card-actions {
    display: flex;
    gap: var(--card-gap);
    margin-top: var(--card-gap);
}

body.theme-pt .card-actions.card-actions-center {
    justify-content: center;
}

body.theme-pt .card-actions.card-actions-end {
    justify-content: flex-end;
}

/* Card Title */
body.theme-pt .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--card-gap);
    color: var(--card-text-color);
}

body.theme-pt .card-sm .card-title {
    font-size: 1.125rem;
}

body.theme-pt .card-lg .card-title {
    font-size: 1.5rem;
}

/* Card Text */
body.theme-pt .card-text {
    color: var(--card-text-muted);
    line-height: 1.6;
}

/* Card Heading Styles - MIGRATED FROM headings.css */
body.theme-pt .card-heading {
    font-size: var(--font-size-xl);
    color: var(--heading-color-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--heading-line-height-normal);
    margin-bottom: var(--heading-margin-bottom);
}

/* Legacy teambox heading styles - Now handled by card-team */

/* Review card heading styles - MIGRATED FROM headings.css */
body.theme-pt .reviews .card:not([class*="card-"]) h2 {
    color: var(--heading-color-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--heading-line-height-tight);
    margin-bottom: var(--heading-margin-bottom);
}

body.theme-pt .reviews .card:not([class*="card-"]) h2.legacy {
    color: var(--heading-color-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--heading-line-height-tight);
    margin-bottom: var(--heading-margin-bottom);
}

/* ============================
   Specialized Card Components
   These remain specialized due to unique layout requirements
   ============================ */

/* Dream Card - MIGRATED FROM pages-special.css
 * Remains specialized due to unique horizontal layout with fixed image width
 * Visual consistency maintained with card system through shared variables
 */
body.theme-pt .finding-dreams .dream-card {
    margin-bottom: 35px;
    display: flex;
    padding: 50px 38px 50px;
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow-sm);
    border-radius: var(--card-radius-xl);
    overflow: hidden;
    transition: var(--card-transition);
}

body.theme-pt .finding-dreams .dream-card:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

body.theme-pt .finding-dreams .dream-card .img {
    min-width: 125px;
}

body.theme-pt .finding-dreams .dream-card h3 {
    color: var(--color-text-secondary);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.364em;
    margin-bottom: 8px;
}

body.theme-pt .finding-dreams .dream-card p {
    margin-bottom: 0px;
    color: var(--card-text-muted);
}

/* Team Box - Legacy Support
 * For backward compatibility, .teambox now maps to .card.card-team
 * New implementations should use: .card.card-team
 */
body.theme-pt .teambox {
    /* Inherits all styles from .card.card-team */
    /* Legacy class maintained for backward compatibility */
}

/* Icon Card - MIGRATED FROM page-cities.css
 * Specialized Component for Contact Information
 * This remains a specialized component due to its unique layout requirements
 * that don't fit the standard card pattern (horizontal layout with icon + text)
 * Visual consistency maintained with card system through shared variables
 */
body.theme-pt .contact-info .icon-card {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    padding: 30px 30px;
    border-radius: var(--card-radius-lg);
    margin-top: 25px;
    box-shadow: var(--card-shadow-sm);
    transition: var(--card-transition);
}

body.theme-pt .contact-info .icon-card:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

body.theme-pt .contact-info .icon-card img {
    border-radius: 50%;
    margin-right: 20px;
    width: 80px;
}

body.theme-pt .contact-info .icon-card h5 {
    color: var(--heading-color-muted);
    font-weight: var(--font-weight-medium);
    line-height: var(--heading-line-height-normal);
}

body.theme-pt .contact-info .icon-card h5 a {
    color: var(--heading-color-primary);
    text-decoration: none;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

body.theme-pt .contact-info .icon-card a:hover {
    color: var(--card-hover-link);
}

/* Small Card - MIGRATED FROM page-cities.css
 * Small Card Styling - Match Target Design
 */
body.theme-pt .nearby-cities .small-card {
    background-color: var(--card-white);
    border-radius: 24px;
    padding: 40px;
    box-shadow: none;
}

/* Nearby Cities Card - Specific styling for the CTA card */
body.theme-pt .nearby-cities .small-card.card-nearby-cities h3 {
    color: var(--color-primary);
}

/* Image Styling - Match Target */
body.theme-pt .nearby-cities .small-card img {
    width: 71px;
    height: 74px;
    max-width: 71px;
    max-height: 74px;
    margin-bottom: 20px;
}

/* Small Card Info Section Styles */
body.theme-pt .small-card-info .small-card {
    background-color: var(--card-white);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0px 4px 12px var(--card-shadow-light);
    margin-bottom: 10px;
}

/* Blue card styling - match target */
body.theme-pt .small-card-info .small-card.blue {
    background-color: var(--card-navy);
    color: var(--card-white);
}

body.theme-pt .small-card-info .small-card.blue h3 {
    color: var(--card-white);
}

body.theme-pt .small-card-info .small-card.blue p {
    color: var(--card-white);
}

/* Gallery Card - MIGRATED FROM cards-sections.css
 * Matches card-default styling without padding
 */
body.theme-pt .card-gallery {
    background: var(--card-bg);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: 4px 4px 10px var(--card-shadow-light);
    padding: 0;
    overflow: hidden;
    display: block;
    position: relative;
    transition: box-shadow 0.3s ease;
}

body.theme-pt .card-gallery:hover {
    box-shadow: var(--card-shadow-hover);
}

body.theme-pt .card-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: var(--card-radius);
    border: none;
    transition: none;
}

body.theme-pt .card-gallery .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.theme-pt .card-gallery .overlay img {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
}

body.theme-pt .card-gallery:hover .overlay {
    opacity: 1;
}

/* ============================
   Responsive Design
   ============================ */

/* Mobile card responsive styles moved to mobile-consolidated.css */
/* All mobile and tablet card adjustments (max-width: 991px, 768px) */
/* have been consolidated in mobile-consolidated.css for better organization */

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    body.theme-pt .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop optimizations */
@media (min-width: 1025px) {
    body.theme-pt .card {
        transition: var(--card-transition);
    }
    
    body.theme-pt .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    body.theme-pt .card-grid.card-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================
   Grid Layouts
   ============================ */

body.theme-pt .card-grid {
    display: grid;
    gap: var(--card-gap-lg);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

body.theme-pt .card-grid.card-grid-sm {
    gap: var(--card-gap);
}

body.theme-pt .card-grid.card-grid-lg {
    gap: var(--card-gap-xl);
}

/* ============================
   Layout and Spacing
   ============================ */

/* Universal card spacing - applies to all card types in column layouts */
body.theme-pt .col:has(.card) {
    margin-bottom: var(--card-gap-lg, 1.5rem);
}

/* Universal card row spacing for Bootstrap row layouts containing cards */
body.theme-pt .card-row > div {
    margin-bottom: 32px;
    padding-bottom: 10px; /* Extra space for box shadow */
}

/* Equal height cards - only on tablet and desktop where multiple cards per row */
@media (min-width: 768px) {
    body.theme-pt .card-row {
        display: flex;
        flex-wrap: wrap;
    }
    
    body.theme-pt .card-row > div {
        display: flex;
    }
    
    body.theme-pt .card-row .card {
        height: 100%;
    }
    
    /* Apply to all card variants for universal equal heights */
    body.theme-pt .card,
    body.theme-pt .card.card-blog,
    body.theme-pt .card.card-property,
    body.theme-pt .card.card-team,
    body.theme-pt .card.card-info,
    body.theme-pt .card.card-review,
    body.theme-pt .card.card-partner,
    body.theme-pt .card.card-city,
    body.theme-pt .card.card-properties,
    body.theme-pt .card.card-horizontal {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    /* Ensure card body grows to fill available space */
    body.theme-pt .card .card-body {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    /* Push buttons to bottom of cards */
    body.theme-pt .card .card-text,
    body.theme-pt .card .shortIntro {
        flex-grow: 1;
        margin-bottom: 1rem;
    }
}

/* Ensure card containers don't clip shadows */
body.theme-pt .card-row,
body.theme-pt .latest-posts,
body.theme-pt section:has(.card-row) {
    overflow: visible;
    padding-bottom: 20px; /* Additional bottom padding for shadow visibility */
}

/* Additional universal shadow visibility fixes */
body.theme-pt .container:has(.card-row),
body.theme-pt .container:has(.card),
body.theme-pt section.latest-posts .container {
    overflow: visible;
    padding-bottom: 15px;
}

/* Ensure Bootstrap row doesn't clip shadows */
body.theme-pt .row.card-row {
    overflow: visible;
    margin-bottom: 15px;
}

/* ============================
   Utility Classes
   ============================ */

body.theme-pt .card.card-clickable {
    cursor: pointer;
}

/* Card Utility Styles - MIGRATED FROM utilities-base.css */
body.theme-pt a.card-clickable {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: var(--card-transition);
}

body.theme-pt a.card-clickable:hover {
    color: inherit;
    text-decoration: none;
}

/* Card Anchor - Better scoped overflow handling for Bootstrap columns */
body.theme-pt a[class*="col-"] .card,
body.theme-pt a[class*="col-"].card-anchor {
    overflow: visible; /* Allow card shadows to show */
}

/* Utility class for anchor wrappers in columns containing cards */
body.theme-pt .card-anchor {
    display: block;
    overflow: visible;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

body.theme-pt .card-anchor:hover {
    color: inherit;
    text-decoration: none;
}

/* Legacy support: Direct anchor columns (less specific but still needed) */
body.theme-pt a[class*="col-"] {
    overflow: visible; /* Prevent card shadow clipping in columns */
}

/* Card Button Styling - Secondary button positioning */
body.theme-pt .card .btn.btn-secondary {
    margin-top: auto;
    align-self: flex-start;
}

/* Ensure card body uses flexbox for proper button positioning */
body.theme-pt .card .card-body {
    display: flex;
    flex-direction: column;
}

body.theme-pt .card .card-text {
    flex-grow: 1;
    margin-bottom: 1rem;
}

body.theme-pt .card.card-clickable .btn {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

body.theme-pt .card.card-disabled {
    opacity: 0.6;
    pointer-events: none;
}

body.theme-pt .card.card-loading {
    position: relative;
    overflow: hidden;
}

body.theme-pt .card.card-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--card-loading-shimmer), transparent);
    animation: loading 1.5s infinite;
}
@keyframes loading {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ============================
   Migration Compatibility
   ============================ */

/* Legacy class mappings for backward compatibility */

/* Map old .dream-card - keeping as specialized component */
/* Dream cards have unique layout requirements that don't fit standard card pattern */

/* Map old .icon-card - keeping as specialized component */
/* Icon cards have specific contact info layout that remains specialized */

/* Map old .teambox - keeping as specialized component for backward compatibility */
/* For new implementations, use .card.card-team instead */

/* Map old .small-card - keeping as specialized component for specific sections */
/* Small cards have context-specific styling in nearby-cities and small-card-info sections */

/* Map old .card-gallery - keeping as specialized component */
/* Gallery cards have unique overlay functionality that remains specialized */

/* ============================
   Legacy Class Aliases
   ============================ */

/* Team Box Alias */
.teambox {
    /* Extends: .card.card-team */
}

/* Icon Card Alias */
.icon-card {
    /* Extends: .card.card-info.icon-card */
}

/* Small Card Alias */
.small-card {
    /* Extends: .card.card-city.small-card */
}

/* Dream Card Alias */
.dream-card {
    /* Extends: .card.card-dream */
}

/* Gallery Card Alias */
.card-gallery {
    /* Extends: .card.card-gallery */
}