/* wpilot-styles.css — sections of paginas/wpilot.html (§12.1).
   Everything else comes from the shared components of globals.css. */

/******************** WPILOT HERO **************************/
/***********************************************************/

#wpilot_hero .wpilot-hero__logo {
    width: 160px;
    height: auto;
}

/***********************************************************/
/******************** WPILOT VIDEOS ***********************/
/***********************************************************/

/*------------ INTRO ------------*/

#wpilot_videos .wpilot-videos__intro {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 1024px) {
    #wpilot_videos .wpilot-videos__intro {
        flex: 0 0 100%;
    }
}

/* The text sits centered against the two trailers */
#wpilot_videos .wpilot-videos__intro .fl-col-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    padding-right: 2rem;
}

@media (max-width: 1024px) {
    #wpilot_videos .wpilot-videos__intro .fl-col-content {
        padding: 0 0 1rem;
    }
}

/*------------ VIDEO CARD ------------*/

/* The two trailers, compact, to the right of the text */
#wpilot_videos .wpilot-videos__video {
    display: flex;
    flex: 0 0 15.5rem;
    min-width: 0;
}

@media (max-width: 1024px) {
    #wpilot_videos .wpilot-videos__video {
        flex: 1 1 0;
    }
}

#wpilot_videos .wpilot-videos__video .fl-col-content {
    flex: 1 1 auto;
    gap: 0.625rem;
}

#wpilot_videos .wpilot-videos__video .video-card__name {
    margin-top: 0.25rem;
    font-size: 1.25rem;
}