/**
 * Widget: job-vacancy|block-html-how-to
 * Due colonne pari: sinistra gallery animata (crossfade + zoom Ken Burns, autoplay),
 * destra card scura con decori verticali a pillola, titolo e contenuto.
 * Tutte le regole scopate sotto .job-vacancy-block-html-how-to.
 */

.job-vacancy-block-html-how-to {
    display: block;
    background: var(--website-color-light, #FFFAF0);
    padding: clamp(40px, 7vw, 96px) 0;
}
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-inner {
    max-width: var(--website-container-max-width, 1440px);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch; /* due colonne di pari dimensioni */
}

/* ---- Colonna sinistra: gallery (componente reveal-gallery) ---- */
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-media {
    border-radius: 8px;
    overflow: hidden;
    background: rgba(12, 10, 9, 0.20);
    aspect-ratio: 684 / 664;
}

/* ---- Colonna destra: card scura ---- */
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--website-color-dark, #4E4B4A);
    padding: 4rem 2rem;
}

/* Pallini decorativi negli angoli: classi globali .card-dot-light--* (vedi theme.css) */

/* Contenuto: titolo in alto, testo in basso */
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-card-body {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(24px, 5vw, 64px);
}
/* Varianti di allineamento verticale */
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-card-body--between { justify-content: space-between; }
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-card-body--center { justify-content: center; }
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-title {
    margin: 0;
    max-width: 14ch;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 3.4rem);
    line-height: 1.05;
}
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-content {
    max-width: 56ch;
    color: rgba(255, 255, 255, 0.80);
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.45;
}
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-content > :first-child { margin-top: 0; }
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-content > :last-child { margin-bottom: 0; }
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-content p { margin: 0 0 1rem; }
/* h2 nel content evidenziato come il titolo (Erode uppercase, grande) */
.job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-content h2 {
    margin: 0 0 1.25rem;
    color: #fff;
    font-family: 'Erode', serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 3.4rem);
    line-height: 1.05;
}

@media (max-width: 767.98px) {
    .job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-inner { grid-template-columns: 1fr; }
    .job-vacancy-block-html-how-to .job-vacancy-block-html-how-to-card { min-height: 60vw; }
}