/* Global Card Component Styles */

/* Hero Section Base */
.hero-section {
    background-color: #F2EEE9;
    display: flex;
    align-items: end;
    height: 160px;
    margin-bottom: 32px;
    padding: 24px;
}

.hero-section .hero-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 22px;
}

.hero-section .hero-text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 22px;
}

.hero-section .hero-title {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--m-forest);
    margin: 0;
    flex-shrink: 0;
    flex: 1;
}

.hero-section .hero-subtitle {
    font-size: 0.95rem;
    color: var(--m-forest);
    margin: 0;
    text-align: left;
    flex: 1;
}

/* Hide sidebar image on desktop (it shows in the actual sidebar) */
.hero-section .hero-sidebar-image {
    display: none;
}

/* Unified desktop hero section styles for blog-grid, contact, sectioned-cards, and single-post */
.blog-grid-hero-section,
.contact-hero-section,
.sectioned-cards-hero-section,
.single-post-hero-section {
    margin: 0 auto 32px auto;
    max-width: 1432px;
}

.contact-hero-section .hero-content {
    align-items: center;
    gap: 40px;
}

/* Hide mobile subtitle on desktop */
.hero-subtitle-mobile-wrapper {
    display: none;
}

/* Card Thumbnail Base */
.card-thumbnail {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: #E3E1D3;
}

.card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-thumbnail.placeholder {
    position: relative;
}

.card-thumbnail .placeholder-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #E3E1D3 0%, #455A5B 100%);
}

/* Card Content Base */
.card-content {
    padding: 40px 20px 20px 20px;
    background: var(--m-sand-80-t);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card Title Base */
.card-title {
    margin-top: 0;
    margin-bottom: 40px;
}

.card-title a {
    color: #173132;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: #CC7E3D;
}

/* Card Meta Base */
.card-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 28px;
    letter-spacing: 0.05em;
}

/* Reduce margin when meta is present after title */
.card-title+.card-meta {
    margin-top: -36px;
}

/* Card Excerpt Base */
.card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 16px;
    min-height: auto;
}

.card-excerpt a {
    color: #CC7E3D;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.card-excerpt a:hover {
    color: #173132;
}

/* Global Button Link Styles */
.button-link,
.button-link-ext,
.card-readmore {
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--m-forest);
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: start;
    padding-right: 28px;
    gap: 8px;
}

/* Inherit button link styles for child spans */
.button-link span,
.button-link-ext span,
.card-readmore span {
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
}

/* Standard button link with horizontal arrow */
.button-link::after {
    content: '';
    width: 12px;
    height: 13px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.33691 0.234258C4.64934 -0.0780494 5.15539 -0.0781229 5.46777 0.234258L11.6221 6.38856C11.6561 6.42261 11.6853 6.45977 11.7119 6.49793C11.7301 6.52407 11.7477 6.5507 11.7627 6.57899C11.7774 6.60659 11.7896 6.63514 11.8008 6.66395C11.8174 6.70664 11.8307 6.75087 11.8398 6.79676C11.8409 6.80228 11.8418 6.80783 11.8428 6.81336C11.8509 6.85901 11.8564 6.906 11.8564 6.95399C11.8564 7.0017 11.8508 7.04822 11.8428 7.09363C11.8153 7.24947 11.7424 7.39896 11.6221 7.51941L5.46777 13.6737C5.15543 13.9858 4.64928 13.9858 4.33691 13.6737C4.02449 13.3613 4.02449 12.8543 4.33691 12.5419L9.12402 7.75379H0.799805C0.358038 7.75379 9.9183e-05 7.39573 0 6.95399C-3.96172e-08 6.51216 0.357977 6.15418 0.799805 6.15418H9.12598L4.33691 1.36512C4.0245 1.0527 4.0245 0.546675 4.33691 0.234258Z' fill='%23173132' fill-opacity='0.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.button-link:hover::after {
    transform: translateX(3px);
}

/* External link variant with diagonal arrow */
.button-link-ext::after,
.card-readmore::after {
    content: '';
    margin-left: -4px;
    margin-top: -4px;
    width: 25px;
    height: 27px;
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.67917 8.44532C4.67925 8.00356 5.03703 7.64568 5.47881 7.64568H14.1823C14.2304 7.64571 14.2774 7.65132 14.3232 7.65949C14.3545 7.6651 14.3858 7.67153 14.4164 7.6809C14.4463 7.69005 14.4751 7.7016 14.5034 7.71404C14.5453 7.73247 14.586 7.75435 14.6249 7.78034C14.6296 7.78346 14.6341 7.78679 14.6387 7.79C14.6767 7.81656 14.7139 7.84584 14.7478 7.87977C14.7816 7.91352 14.8105 7.95041 14.8369 7.98819C14.9277 8.11783 14.9819 8.27503 14.9819 8.44532V17.1488C14.9818 17.5904 14.6238 17.9482 14.1823 17.9484C13.7405 17.9484 13.382 17.5899 13.382 17.1481L13.3813 10.3774L7.49516 16.2635C7.18279 16.5759 6.6765 16.5758 6.36407 16.2635C6.05165 15.9511 6.05165 15.4449 6.36407 15.1325L12.2516 9.24496H5.47881C5.03698 9.24495 4.67917 8.88714 4.67917 8.44532Z' fill='%23173132' fill-opacity='0.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.button-link-ext:hover::after,
.card-readmore:hover::after {
    transform: translateX(3px);
}

/* Hover Effects */
.card-item:hover .card-thumbnail img {
    transform: scale(1.05);
}

.card-item:hover .card-content {
    transform: translateY(-5px);
}

/* Responsive Design */
@media (max-width: 1100px) {
    .hero-section .hero-subtitle {
        flex: 2;
    }
}

@media (max-width: 900px) {
    .hero-section {
        margin: 0 auto 32px auto;
        padding: 16px;
        height: unset;
    }

    .hero-section .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hero-section .hero-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hero-section .hero-subtitle {
        text-align: left;
    }

    /* Unified mobile hero section styles for blog-grid, contact, sectioned-cards, and single-post */
    .blog-grid-hero-section,
    .contact-hero-section,
    .sectioned-cards-hero-section,
    .single-post-hero-section {
        margin-top: 0;
        padding-top: 0;
        height: auto;
        margin-bottom: 24px;
        padding-left: 0;
        padding-right: 0;
        background: transparent;
        margin-left: 0;
    }

    .blog-grid-hero-section .hero-content,
    .contact-hero-section .hero-content,
    .sectioned-cards-hero-section .hero-content,
    .single-post-hero-section .hero-content {
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: end;
        justify-content: space-between;
        background: var(--m-sand-80-t);
        padding: 0;
        margin: 0;
    }

    .blog-grid-hero-section .hero-text,
    .contact-hero-section .hero-text,
    .sectioned-cards-hero-section .hero-text,
    .single-post-hero-section .hero-text {
        flex: 1;
        display: block;
        margin: 16px;
    }

    .blog-grid-hero-section .hero-title,
    .contact-hero-section .hero-title,
    .sectioned-cards-hero-section .hero-title,
    .single-post-hero-section .hero-title {
        margin: 0;
        font-size: 1rem;
    }

    /* Hide subtitle inside hero-section on mobile - show only title and image */
    .blog-grid-hero-section .hero-subtitle,
    .blog-grid-hero-section .hero-subtitle-desktop,
    .contact-hero-section .hero-subtitle,
    .contact-hero-section .hero-subtitle-desktop,
    .sectioned-cards-hero-section .hero-subtitle,
    .sectioned-cards-hero-section .hero-subtitle-desktop,
    .single-post-hero-section .hero-subtitle,
    .single-post-hero-section .hero-subtitle-desktop {
        display: none !important;
    }

    /* Show sidebar image on mobile */
    .blog-grid-hero-section .hero-sidebar-image,
    .contact-hero-section .hero-sidebar-image,
    .sectioned-cards-hero-section .hero-sidebar-image,
    .single-post-hero-section .hero-sidebar-image {
        display: block !important;
        flex: 0 0 auto;
        width: 108px;
        height: 108px;
        overflow: hidden;
    }

    .blog-grid-hero-section .hero-sidebar-image img,
    .contact-hero-section .hero-sidebar-image img,
    .sectioned-cards-hero-section .hero-sidebar-image img,
    .single-post-hero-section .hero-sidebar-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Unified mobile subtitle wrapper styles */
    .hero-subtitle-mobile-wrapper {
        display: block;
        padding: 0 16px;
        margin-bottom: 48px;
    }

    .hero-subtitle-mobile-wrapper.m-container-left-m {
        padding: 0 16px;
        margin-left: 0;
        margin-right: 0;
    }

    .hero-subtitle-mobile {
        margin: 0;
        text-align: left;
        font-weight: 500;
        font-size: 16px;
        line-height: 180%;
        letter-spacing: 0.06em;
        color: var(--m-forest-80-t);
    }
}