/* Video with Text Block */

.video-text-block {
    width: 100%;
    background: #fff;
    color: #1a1a1a;
}

.video-text-block.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.video-text-block {
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
    max-width: 100% !important;
}

/* Editor Preview Mode */
.video-text-block.is-preview.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.video-text-block.is-preview {
    background: #fff !important;
    border: 1px solid #ddd;
    padding: 20px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px;
}

.video-text-block.is-preview .pre-anim-fade-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
}

.video-text-block.is-preview .video-text-inner {
    padding: 40px 20px !important;
    display: grid !important;
    gap: 40px !important;
}

.video-text-block.is-preview .video-text-video,
.video-text-block.is-preview .video-text-content {
    opacity: 1 !important;
    visibility: visible !important;
}

.video-text-block.is-preview .video-text-video {
    min-height: 200px !important;
}

/* Layout - Text Left, Video Right */
.video-text-inner {
    max-width: 1520px;
    margin: 0 auto;
    padding: 80px 88px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Content Section (Left) */
.video-text-content {
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Heading and Description Wrapper */
.video-text-heading-description {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Info Text Wrapper */
.video-text-info-wrapper {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
}

/* Heading Styles */
.video-text-heading {
    font-family: var(--wp--preset--font-family--at-surt, 'Surt-Normal-TRIAL', sans-serif);
    font-weight: 800; /* Ultrabold */
    font-size: 52px;
    line-height: 0.25;
    letter-spacing: -3.12px;
    text-align: justify;
    margin: 0;
    color: #af1f22;
}

.video-text-heading-line1 {
    line-height: 55.1px;
}

.video-text-heading-line2 {
    line-height: 55.1px;
    margin-top: -35px;
}

/* Description */
.video-text-description {
    font-family: var(--wp--preset--font-family--at-surt, 'AT_Surt', sans-serif);
    font-weight: 300; /* Light */
    font-size: 18px;
    line-height: 1.22;
    color: #1a1a1a;
    text-align: justify;
    margin: 0;
}

.video-text-description p {
    margin: 0 0 16px;
    color: #1a1a1a;
}

.video-text-description p:last-child {
    margin-bottom: 0;
}

/* Info Text */
.video-text-info {
    font-family: 'Surt-Normal-TRIAL', 'Surt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300; /* Light */
    font-size: 20px;
    line-height: 1.24;
    color: #1a1a1a;
    text-align: justify;
    margin: 0;
}

.video-text-info p {
    margin: 0 0 8px;
    color: #1a1a1a;
    font-family: 'Surt-Normal-TRIAL', 'Surt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300 !important;
}

.video-text-info p:last-child {
    margin-bottom: 0;
}

/* Strong and Bold tags - use Surt font which supports bold weights */
.video-text-block .video-text-info strong,
.video-text-block .video-text-info b,
.video-text-block .video-text-info p strong,
.video-text-block .video-text-info p b,
.video-text-block .video-text-info > strong,
.video-text-block .video-text-info > b,
.video-text-info strong,
.video-text-info b,
.video-text-info p strong,
.video-text-info p b,
.video-text-info > strong,
.video-text-info > b {
    font-weight: 600 !important; /* Semi_Bold */
    font-family: 'Surt-Normal-TRIAL', 'Surt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Additional specificity for nested strong tags at any level */
.video-text-info * strong,
.video-text-info * b,
.video-text-info p * strong,
.video-text-info p * b {
    font-weight: 600 !important;
    font-family: 'Surt-Normal-TRIAL', 'Surt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Video Section (Right) */
.video-text-video {
    width: 100%;
    opacity: 0;
}

.video-wrapper {
    position: relative;
    width: 533px;
    height: 653px;
    overflow: hidden;
    border-radius: 0;
}

.video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.49);
    z-index: 1;
    pointer-events: none;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.9;
}

.video-play-button:active {
    transform: translate(-50%, -50%) scale(0.95);
}

.video-play-button svg {
    width: 100%;
    height: 100%;
    display: block;
}

.video-wrapper.playing .video-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.video-wrapper.playing .video-play-button {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hide native controls completely */
.video-player::-webkit-media-controls {
    display: none !important;
}

.video-player::-webkit-media-controls-enclosure {
    display: none !important;
}

.video-player::-webkit-media-controls-panel {
    display: none !important;
}

.video-wrapper.playing .video-player {
    cursor: pointer;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 2px dashed #ddd;
    font-size: 16px;
}

/* Animations */
.video-text-video.is-in,
.video-text-content.is-in {
    animation: pre-fade-up 0.6s ease forwards;
    opacity: 1;
}

.video-text-content.is-in {
    animation-delay: 0.1s;
}

/* Responsive - 769px to 1440px (tablet / small desktop) */
@media (min-width: 769px) and (max-width: 1440px) {
    .video-text-inner {
        padding: clamp(56px, 6vw, 80px) clamp(48px, 5vw, 88px);
        gap: clamp(48px, 5vw, 80px);
        max-width: 100%;
    }
    
    .video-text-heading {
        font-size: clamp(32px, 3.2vw, 52px);
        letter-spacing: -0.05em;
    }
    
    .video-wrapper {
        height: clamp(400px, 38vw, 653px);
    }
    
    .video-text-content {
        gap: clamp(18px, 1.8vw, 24px);
    }
}

@media (max-width: 1200px) {
    .video-text-inner {
        padding: 64px 64px;
        gap: 60px;
    }

    .video-text-heading {
        font-size: 42px;
        letter-spacing: -2.5px;
    }

    .video-wrapper {
        height: 500px;
    }
}

@media (max-width: 960px) {
    .video-text-inner {
        grid-template-columns: 1fr;
        padding: 48px 48px;
        gap: 40px;
    }

    .video-text-video {
        order: -1;
    }

    .video-wrapper {
        width: 100%;
        max-width: 533px;
        height: auto;
        aspect-ratio: 533 / 653;
    }

    .video-text-heading {
        font-size: 36px;
        letter-spacing: -2px;
    }
}

@media (max-width: 640px) {
    .video-text-inner {
        padding: 40px 24px;
        gap: 32px;
    }

    .video-wrapper {
        width: 100%;
        max-width: 533px;
        height: auto;
        aspect-ratio: 533 / 653;
    }

    .video-text-content {
        gap: 40px !important;
    }

    .video-text-heading {
        font-size: 32px;
        letter-spacing: -1.5px;
    }

    .video-text-heading-description {
        gap: 20px !important;
    }

    .video-play-button {
        width: 80px;
        height: 80px;
    }
}

/* ACF Preview Mode - Make elements visible */
.video-text-block.is-preview {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.video-text-block.is-preview .video-text-inner {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.video-text-block.is-preview .video-placeholder {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #666;
    font-size: 16px;
    text-align: center;
    padding: 40px;
    border: 2px dashed #ccc;
}