/* Base */
.dgs-hero-cta {
    padding: var(--space-m);
    border-radius: var(--radius);
    position: relative;
    display: flex;
    justify-content: flex-start; /* default left alignment */
}

/* Container alignment variations */
.dgs-hero-cta--align-left {
    justify-content: flex-start;
}

.dgs-hero-cta--align-center {
    justify-content: center;
}

.dgs-hero-cta--align-right {
    justify-content: flex-end;
}

/* Background image overlay */
.dgs-hero-cta.with-background-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neutral-trans-dark-80);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

/* Content should be above the overlay */
.dgs-hero-cta.with-background-image .dgs-hero-cta__container {
    position: relative;
    z-index: 2;
}

/* Content */
.dgs-hero-cta__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}


.dgs-hero-cta__subtitle {
    max-width: 70ch;
}

/* Base grid - defaults to stacked */
.dgs-hero-cta__grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: 1fr;
}

/* Stack layout - everything in one column */
.dgs-hero-cta__grid--stack {
    grid-template-columns: 1fr;
    max-width: var(--width-l);
    margin: 0 auto;
}

/* Inline layout - two columns */
.dgs-hero-cta__grid--inline {
    grid-template-columns: var(--grid-3-2);
}

/* In stack layout, CTA block should be part of content flow */
.dgs-hero-cta__grid--stack .dgs-hero-cta__cta-block {
    margin-top: var(--space-m);
}


@media only screen and (max-width: 768px) {
    /* Force stacked layout on mobile for both stack and inline */
    .dgs-hero-cta__grid,
    .dgs-hero-cta__grid--inline {
        grid-template-columns: 1fr;
    }
}

/* Text elements using custom property */
.dgs-hero-cta__accent-heading,
.dgs-hero-cta__heading,
.dgs-hero-cta__subtitle {
    color: var(--text-color, inherit);
}

/* Accent Heading */
p.dgs-hero-cta__accent-heading {
    text-transform: uppercase;
    font-size: var(--text-xs);
    margin-bottom: 0;
}

/* Heading */
.dgs-hero-cta__heading {
    margin: 0;
}

h1.dgs-hero-cta__heading,
h2.dgs-hero-cta__heading,
h3.dgs-hero-cta__heading,
h4.dgs-hero-cta__heading,
h5.dgs-hero-cta__heading,
h6.dgs-hero-cta__heading {
    margin-top: 0 !important;
}

/* CTA Buttons */
.dgs-hero-cta__cta-block {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

/* Button horizontal alignment follows text alignment */
.dgs-hero-cta[style*="text-align: left"] .dgs-hero-cta__cta-block {
    justify-content: flex-start;
}

.dgs-hero-cta[style*="text-align: center"] .dgs-hero-cta__cta-block {
    justify-content: center;
}

.dgs-hero-cta[style*="text-align: right"] .dgs-hero-cta__cta-block {
    justify-content: flex-end;
}
/* Button alignment variations */
.dgs-hero-cta__cta-block--align-start {
    align-items: start;
}

.dgs-hero-cta__cta-block--align-center {
    align-items: center;
}

.dgs-hero-cta__cta-block--align-end {
    align-items: end;
}

/* Button styling */
a.dgs-hero-cta__button.btn--action {
    font-size: var(--text-l);
    font-weight: 600;
    padding: var(--space-xs);
}

/* Secondary/Outline button styling */
a.dgs-hero-cta__button.btn--secondary,
a.dgs-hero-cta__button.btn--outline {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: calc(var(--space-xs) - 2px);
    font-size: var(--text-l);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xxs);
    text-decoration: none;
    transition: all 0.3s ease;
}

a.dgs-hero-cta__button.btn--secondary:hover,
a.dgs-hero-cta__button.btn--outline:hover {
    background-color: var(--primary);
    color: var(--white);
}

/* Arrow icon for secondary button */
.dgs-hero-cta__button .btn-arrow {
    width: 1em;
    height: 1em;
    transition: transform 0.3s ease;
}

.dgs-hero-cta__button:hover .btn-arrow {
    transform: translateX(3px);
}

@media only screen and (max-width: 768px) {
    .dgs-hero-cta__cta-block {
        flex-direction: column;
        align-items: center;
    }
    
    a.dgs-hero-cta__button {
        width: 100%;
        justify-content: center;
    }
}