/*
 * Standalone "Becas y ayudas" section styles.
 *
 * Extracted from single-course.css so this block (markup + its two CTA
 * buttons) can be dropped into any other template via
 * get_template_part( 'template-parts/curso-ayudas' ) with no dependency on
 * single-course.css or the .curso-ficha wrapper it used to live inside.
 *
 * The generic .curso-seccion rule this block relied on for spacing
 * (margin: 56px 0) is folded directly into .curso-ayudas below instead of
 * assuming that ancestor class is present. Custom properties fall back to
 * their .curso-ficha values (see single-course.css) so colors/radius match
 * whether or not that wrapper's custom properties are in scope.
 *
 * .curso-boton / .curso-boton--amarillo are duplicated here verbatim from
 * single-course.css (not just the ayudas-exclusive variants) because this
 * section's desktop CTA uses --amarillo too and must still render correctly
 * if dropped somewhere single-course.css isn't loaded. That base rule also
 * still lives in single-course.css since Presentación/Metodología use it —
 * the declarations are identical, so no visual conflict when both
 * stylesheets load together on the course page.
 *
 * Real background photo (same AdobeStock_1107107684 image the original
 * template uses, already dark-toned — not a flat color).
 */

.curso-ayudas {
    margin-top: 56px;
    margin-bottom: 56px;
    background-image: url('/wp-content/themes/astra-child/css/../assets/fondos/fondo-becas-ayudas.png.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 3em;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    text-align: center;
}

.curso-ayudas h2 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 36px;
    color: #fff;
}

/* The [becas_carousel] plugin sets its slide wrapper's height via JS
   (measured once, ~180px) and doesn't recalculate for the extra lines this
   text wraps to on narrow screens — the active slide can need 280px+,
   overflowing past the wrapper and under our "Quiero más información"
   button below it. min-height with !important is the only lever available
   since the slides are position:absolute (they can't grow an auto-height
   parent) — a generous fixed floor rather than a guessed exact value. */
@media (max-width: 767px) {
    .curso-ayudas .carousel-slides {
        min-height: 340px !important;
    }
}

@media (max-width: 768px) {
    /* Production insets full-bleed sections 16px horizontally on mobile
       (measured 16.4px), keeping the section's own vertical padding. */
    .curso-ayudas {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Buttons (duplicated from single-course.css, see file header note above) */
.curso-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 30px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

/* "Quiero más información" buttons carry a leading info-circle icon (Font
   Awesome e-fas-info-circle) — confirmed via .elementor-element-36a32e68. */
.curso-boton__icono {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: currentColor;
}

.curso-boton--amarillo {
    background: var(--curso-color-amarillo, #fabb00);
    color: #fff;
}

.curso-boton--amarillo:hover {
    background: var(--curso-color-acento-oscuro, #b0263e);
    color: #fff;
}

/* Becas y ayudas buttons (36a32e68/3a005ed7): larger size variant + real
   responsive pair — yellow desktop-only (>1024px), red mobile/tablet-only. */
.curso-boton--grande {
    padding: 15px 40px;
    font-size: 24px;
    border-radius: var(--curso-radio-borde, 16px);
}

.curso-boton--grande.curso-boton--solo-escritorio {
    padding: 8px 40px;
}

/* inline-flex (not inline-block) so icon + text stay centered via
   .curso-boton's align-items — inline-block dropped that flex context. */
.curso-boton--solo-escritorio {
    display: inline-flex;
}

.curso-boton--solo-movil {
    display: none;
}

@media (max-width: 1024px) {
    .curso-boton--solo-escritorio {
        display: none;
    }

    .curso-boton--solo-movil {
        display: inline-flex;
    }
}

.curso-boton--acento {
    background: var(--curso-color-acento-oscuro, #b0263e);
    color: #fff;
}

@media (max-width: 768px) {
    .curso-boton--acento {
        margin-top: 0;
        padding: 8px 40px;
        font-size: 22px;
        font-weight: 100;
    }
}