/* ACF Flexible Content Widget Styles */
.acf-flexible-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.acf-flexible-row {
    display: grid;
    width: 100%;
    align-items: center;
}

.acf-flexible-row.acf-two-columns {
    grid-template-columns: 1fr 1fr;
}

/* Column Ratios */
.acf-flexible-row.ratio-1-1 {
    grid-template-columns: 1fr 1fr;
}

.acf-flexible-row.ratio-1-2 {
    grid-template-columns: 1fr 2fr;
}

.acf-flexible-row.ratio-2-1 {
    grid-template-columns: 2fr 1fr;
}

.acf-flexible-row.ratio-1-3 {
    grid-template-columns: 1fr 3fr;
}

.acf-flexible-row.ratio-3-1 {
    grid-template-columns: 3fr 1fr;
}

.acf-flexible-column {
    width: 100%;
    overflow: hidden;
}

/* Tekst styling */
.acf-flexible-text {
    line-height: 1.6;
}

.acf-flexible-text h1,
.acf-flexible-text h2,
.acf-flexible-text h3,
.acf-flexible-text h4,
.acf-flexible-text h5,
.acf-flexible-text h6 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.acf-flexible-text p {
    margin-bottom: 1rem;
}

.acf-flexible-text p:last-child {
    margin-bottom: 0;
}

.acf-flexible-text ul,
.acf-flexible-text ol {
    padding-left: 1.5em;
    margin-bottom: 1rem;
}

.acf-flexible-text li {
    margin-bottom: 0.5rem;
}

/* Afbeelding styling */
.acf-flexible-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.acf-flexible-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.acf-flexible-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Alt Text Overlay */
.acf-image-alt-overlay {
    position: absolute;
    left: 0;
    right: 0;
    padding: 15px 20px;
    z-index: 10;
    transition: all 0.3s ease;
}

.acf-image-alt-overlay.overlay-bottom {
    bottom: 0;
}

.acf-image-alt-overlay.overlay-top {
    top: 0;
}

.acf-image-alt-overlay.overlay-center {
    top: 50%;
    transform: translateY(-50%);
}

/* Hover effect voor overlay */
.acf-flexible-image-wrapper.has-overlay:hover .acf-image-alt-overlay {
    opacity: 1;
}

.acf-flexible-image-wrapper.has-overlay .acf-image-alt-overlay {
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
    .acf-flexible-row.acf-two-columns,
    .acf-flexible-row.ratio-1-1,
    .acf-flexible-row.ratio-1-2,
    .acf-flexible-row.ratio-2-1,
    .acf-flexible-row.ratio-1-3,
    .acf-flexible-row.ratio-3-1 {
        grid-template-columns: 1fr;
    }
    
    /* Bij mobiel: afbeelding altijd boven tekst */
    .acf-flexible-row.acf-text-right {
        direction: rtl;
    }
    
    .acf-flexible-row.acf-text-right > * {
        direction: ltr;
    }
}

/* Extra utility classes */
.acf-flexible-text a {
    color: inherit;
    text-decoration: underline;
}

.acf-flexible-text a:hover {
    text-decoration: none;
}

.acf-flexible-text strong,
.acf-flexible-text b {
    font-weight: 700;
}

.acf-flexible-text em,
.acf-flexible-text i {
    font-style: italic;
}

/* Image fit utilities */
.acf-flexible-image img[style*="object-fit"] {
    width: 100%;
}