/**
 * DGS Feature Nolte Block Styles
 */

/* Block Container */
.dgs-feature-nolte {
    position: relative;
    overflow: visible;
}

/* Background Layer - Vertically centered, reduced height to allow image overlap */
.dgs-feature-nolte__background {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 60%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

/* Background Border Radius Options */
.dgs-feature-nolte.background-radius-none .dgs-feature-nolte__background {
    border-radius: 0;
}

.dgs-feature-nolte.background-radius-small .dgs-feature-nolte__background {
    border-radius: var(--radius-s);
}

.dgs-feature-nolte.background-radius-medium .dgs-feature-nolte__background {
    border-radius: var(--radius);
}

.dgs-feature-nolte.background-radius-large .dgs-feature-nolte__background {
    border-radius: var(--radius-l);
}

.dgs-feature-nolte.background-radius-xlarge .dgs-feature-nolte__background {
    border-radius: var(--radius-xl);
}

/* Color Scheme Backgrounds - Ultra Light Variants */
.dgs-feature-nolte.color-scheme-neutral .dgs-feature-nolte__background {
    background-color: var(--neutral-ultra-light);
}

.dgs-feature-nolte.color-scheme-primary .dgs-feature-nolte__background {
    background-color: var(--primary-ultra-light);
}

.dgs-feature-nolte.color-scheme-secondary .dgs-feature-nolte__background {
    background-color: var(--secondary-ultra-light);
}

.dgs-feature-nolte.color-scheme-action .dgs-feature-nolte__background {
    background-color: var(--action-ultra-light);
}

.dgs-feature-nolte.color-scheme-accent .dgs-feature-nolte__background {
    background-color: var(--accent-ultra-light);
}

.dgs-feature-nolte.color-scheme-warning .dgs-feature-nolte__background {
    background-color: var(--warning-ultra-light);
}

/* Container */
.dgs-feature-nolte__container {
    position: relative;
    z-index: 1;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--space-m);
}

/* Grid Layout */
.dgs-feature-nolte__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap, var(--space-xl));
    align-items: center;
}

/* Image Column - Positioned to overlap background */
.dgs-feature-nolte__image-column {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.dgs-feature-nolte__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    z-index: 2;
}

.dgs-feature-nolte__image {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

/* Image Border Radius Options */
.dgs-feature-nolte.image-radius-none .dgs-feature-nolte__image-wrapper,
.dgs-feature-nolte.image-radius-none .dgs-feature-nolte__image {
    border-radius: 0;
}

.dgs-feature-nolte.image-radius-small .dgs-feature-nolte__image-wrapper,
.dgs-feature-nolte.image-radius-small .dgs-feature-nolte__image {
    border-radius: var(--radius-s);
}

.dgs-feature-nolte.image-radius-medium .dgs-feature-nolte__image-wrapper,
.dgs-feature-nolte.image-radius-medium .dgs-feature-nolte__image {
    border-radius: var(--radius);
}

.dgs-feature-nolte.image-radius-large .dgs-feature-nolte__image-wrapper,
.dgs-feature-nolte.image-radius-large .dgs-feature-nolte__image {
    border-radius: var(--radius-l);
}

.dgs-feature-nolte.image-radius-xlarge .dgs-feature-nolte__image-wrapper,
.dgs-feature-nolte.image-radius-xlarge .dgs-feature-nolte__image {
    border-radius: var(--radius-xl);
}

/* Content Column - Constrained within background, never overlaps */
.dgs-feature-nolte__content-column {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.dgs-feature-nolte__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    position: relative;
    z-index: 1;
}

/* Content Gap Options */
.dgs-feature-nolte.content-gap-xs .dgs-feature-nolte__content {
    gap: var(--space-xs);
}

.dgs-feature-nolte.content-gap-s .dgs-feature-nolte__content {
    gap: var(--space-s);
}

.dgs-feature-nolte.content-gap-m .dgs-feature-nolte__content {
    gap: var(--space-m);
}

.dgs-feature-nolte.content-gap-l .dgs-feature-nolte__content {
    gap: var(--space-l);
}

.dgs-feature-nolte.content-gap-xl .dgs-feature-nolte__content {
    gap: var(--space-xl);
}

/* Heading Group - Reduced gap between accent and main heading */
.dgs-feature-nolte__heading-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Accent Heading */
.dgs-feature-nolte__accent {
    font-size: var(--text-s);
    font-weight: 400;
    letter-spacing: 0.095em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

/* Main Heading - Dynamic sizing based on heading level */
.dgs-feature-nolte__heading {
    margin: 0;
    line-height: 1.1;
}

/* Heading Level Font Sizes */
.dgs-feature-nolte h1.dgs-feature-nolte__heading {
    font-size: var(--h1);
}

.dgs-feature-nolte h2.dgs-feature-nolte__heading {
    font-size: var(--h2);
}

.dgs-feature-nolte h3.dgs-feature-nolte__heading {
    font-size: var(--h3);
}

.dgs-feature-nolte h4.dgs-feature-nolte__heading {
    font-size: var(--h4);
}

.dgs-feature-nolte h5.dgs-feature-nolte__heading {
    font-size: var(--h5);
}

.dgs-feature-nolte h6.dgs-feature-nolte__heading {
    font-size: var(--h6);
}

/* Description */
.dgs-feature-nolte__description {
    font-size: var(--text-l);
    line-height: 1.5;
    margin: 0;
}

/* Features Grid */
.dgs-feature-nolte__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-m);
    margin-top: var(--space-s);
}

.dgs-feature-nolte__feature-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.dgs-feature-nolte__feature-title {
    font-size: var(--text-m);
    font-weight: 600;
    line-height: 1.2;
}

.dgs-feature-nolte__feature-subtitle {
    font-size: var(--text-s);
    line-height: 1.4;
    opacity: 0.8;
}

/* CTA Button */
.dgs-feature-nolte__cta-wrapper {
    margin-top: var(--space-s);
}

.dgs-feature-nolte__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-s) var(--space-l);
    font-weight: 500;
    text-decoration: none;
    border: 0;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    color: white;
}

.dgs-feature-nolte__button:hover {
    transform: translateY(-2px);
}

/* CTA Button Border Radius Options */
.dgs-feature-nolte.cta-radius-none .dgs-feature-nolte__button {
    border-radius: 0;
}

.dgs-feature-nolte.cta-radius-small .dgs-feature-nolte__button {
    border-radius: var(--radius-s);
}

.dgs-feature-nolte.cta-radius-medium .dgs-feature-nolte__button {
    border-radius: var(--radius);
}

.dgs-feature-nolte.cta-radius-large .dgs-feature-nolte__button {
    border-radius: var(--radius-l);
}

.dgs-feature-nolte.cta-radius-xlarge .dgs-feature-nolte__button {
    border-radius: var(--radius-xl);
}

.dgs-feature-nolte.cta-radius-full .dgs-feature-nolte__button {
    border-radius: 999px;
}

/* Button Color Schemes - Dark Variants */
.dgs-feature-nolte.color-scheme-neutral .dgs-feature-nolte__button,
.dgs-feature-nolte.color-scheme-none .dgs-feature-nolte__button {
    background-color: var(--neutral-dark);
}

.dgs-feature-nolte.color-scheme-neutral .dgs-feature-nolte__button:hover,
.dgs-feature-nolte.color-scheme-none .dgs-feature-nolte__button:hover {
    background-color: var(--neutral-medium);
}

.dgs-feature-nolte.color-scheme-primary .dgs-feature-nolte__button {
    background-color: var(--primary-dark);
}

.dgs-feature-nolte.color-scheme-primary .dgs-feature-nolte__button:hover {
    background-color: var(--primary-medium);
}

.dgs-feature-nolte.color-scheme-secondary .dgs-feature-nolte__button {
    background-color: var(--secondary-dark);
}

.dgs-feature-nolte.color-scheme-secondary .dgs-feature-nolte__button:hover {
    background-color: var(--secondary-medium);
}

.dgs-feature-nolte.color-scheme-action .dgs-feature-nolte__button {
    background-color: var(--action-dark);
}

.dgs-feature-nolte.color-scheme-action .dgs-feature-nolte__button:hover {
    background-color: var(--action-medium);
}

.dgs-feature-nolte.color-scheme-accent .dgs-feature-nolte__button {
    background-color: var(--accent-dark);
}

.dgs-feature-nolte.color-scheme-accent .dgs-feature-nolte__button:hover {
    background-color: var(--accent-medium);
}

.dgs-feature-nolte.color-scheme-warning .dgs-feature-nolte__button {
    background-color: var(--warning-dark);
}

.dgs-feature-nolte.color-scheme-warning .dgs-feature-nolte__button:hover {
    background-color: var(--warning-medium);
}

/* Content Alignment Variants */

/* Content on Right (Image on Left) - Default */
.dgs-feature-nolte.content-align-right .dgs-feature-nolte__image-column {
    order: 1;
}

.dgs-feature-nolte.content-align-right .dgs-feature-nolte__content-column {
    order: 2;
}

/* Content on Left (Image on Right) */
.dgs-feature-nolte.content-align-left .dgs-feature-nolte__image-column {
    order: 2;
}

.dgs-feature-nolte.content-align-left .dgs-feature-nolte__content-column {
    order: 1;
}

/* Responsive Styles */

/* Tablet */
@media (max-width: 991px) {
    .dgs-feature-nolte__grid {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }

    .dgs-feature-nolte__image-column,
    .dgs-feature-nolte__content-column {
        order: unset !important;
    }

    .dgs-feature-nolte__image-column {
        order: 1 !important;
    }

    .dgs-feature-nolte__content-column {
        order: 2 !important;
    }

    .dgs-feature-nolte__features {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* Mobile */
@media (max-width: 767px) {
    .dgs-feature-nolte {
        padding: var(--section-space-m) 0;
    }

    .dgs-feature-nolte__grid {
        gap: var(--space-m);
    }

    /* Mobile: Background positioned with slight top offset and taller height */
    .dgs-feature-nolte__background {
        top: 12%;
        transform: none;
        height: 85%;
    }

    .dgs-feature-nolte__features {
        grid-template-columns: 1fr;
        gap: var(--space-s);
    }

    .dgs-feature-nolte__image-wrapper {
        max-width: 400px;
    }

    .dgs-feature-nolte__button {
        width: 100%;
    }
}