/**
 * lavora-con-noi.css — Careers page styles
 *
 * Depends on: css/components.css
 *
 * @package Frigotel
 */

/* =========================================================
   1. FORM SECTION
   ========================================================= */

.careers-form-section {
    background-color: var(--color-bianco);
}

.careers-form__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.careers-form__title {
    margin-bottom: var(--space-s);
}

.careers-form__subtitle {
    font-size: var(--text-body-large);
    color: var(--color-grigio-blu);
    max-width: 600px;
    margin-inline: auto;
}

.careers-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Validation states */
.careers-form__input.is-invalid,
.careers-form__textarea.is-invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* 
   FILE UPLOAD ZONE
   Classes .is-dragover and .has-file are managed via JS 
   to provide visual feedback during the application process.
*/
.careers-form__upload {
    position: relative;
    border: 2px dashed var(--color-azzurro-tenue);
    border-radius: var(--radius-l);
    background: var(--color-sfondo-freddo);
    padding: var(--space-xl) var(--space-l);
    text-align: center;
    cursor: pointer;
    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base);
}

.careers-form__upload:hover,
.careers-form__upload.is-dragover {
    border-color: var(--color-ciano-accento);
    background: rgba(0, 168, 232, 0.04);
    transform: translateY(-2px);
}

.careers-form__upload.has-file {
    border-color: #27ae60;
    border-style: solid;
    background: rgba(39, 174, 96, 0.04);
}

.careers-form__file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.careers-form__upload-content {
    pointer-events: none;
}

.careers-form__upload-icon {
    color: var(--color-ciano-accento);
    margin-inline: auto;
    margin-bottom: var(--space-s);
    transition: color var(--transition-base);
}

.careers-form__upload.has-file .careers-form__upload-icon {
    color: #27ae60;
}

.careers-form__upload-text {
    font-size: var(--text-body-medium);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blu-profondo);
    margin-bottom: var(--space-xs);
}

.careers-form__upload-hint {
    font-size: var(--text-body-small);
    color: var(--color-grigio-medio);
}
 
.careers-form__upload-remove {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bianco);
    color: #e74c3c;
    border: 1px solid var(--color-azzurro-tenue);
    border-radius: var(--radius-m);
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base);
}

.careers-form__upload.has-file .careers-form__upload-remove {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.careers-form__upload-remove:hover {
    background-color: #e74c3c;
    color: var(--color-bianco);
    border-color: #e74c3c;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.careers-form__upload-remove svg {
    stroke: currentColor;
    transition: transform var(--transition-base);
}

.careers-form__upload-remove:hover svg {
    transform: rotate(8deg) scale(1.1);
}

.careers-form__checkbox-label a {
    color: var(--color-blu-primario);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-base);
}

.careers-form__checkbox-label a:hover {
    color: var(--color-ciano-accento);
}

.careers-form__checkmark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-azzurro-tenue);
    border-radius: var(--radius-s);
    background: var(--color-sfondo-freddo);
    position: relative;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base);
    margin-top: 1px;
}

.careers-form__checkbox:focus-visible + .careers-form__checkmark {
    box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.2);
}

.careers-form__actions .btn {
    min-width: 240px;
}

/* =========================================================
   2. POSITIONS SECTION
   ========================================================= */

/* Punto in cui si ferma l'immagine agganciata: sotto l'header, con un po' di
   respiro. In una variabile perche' la usano sia il top sia il calcolo del
   max-height della colonna immagine. */
.careers-positions {
    --careers-sticky-top: calc(var(--header-height) + var(--space-xl));
    background-color: var(--color-sfondo-freddo);
}

.careers-positions__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.careers-positions__title {
    margin-bottom: var(--space-s);
}

.careers-positions__subtitle {
    font-size: var(--text-body-large);
    color: var(--color-grigio-blu);
    max-width: 680px;
    margin-inline: auto;
}

/* =========================================================
   3. TABS NAVIGATION
   ========================================================= */

.careers-tabs {
    display: flex;
    gap: var(--space-s);
    justify-content: center;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.careers-tabs__btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.875rem 1.5rem;
    font-family: var(--font-family-base);
    font-size: var(--text-body-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-grigio-blu);
    background: var(--color-bianco);
    border: 1px solid var(--color-azzurro-tenue);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition:
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
    white-space: nowrap;
}

.careers-tabs__btn:hover {
    color: var(--color-blu-primario);
    border-color: var(--color-blu-primario);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 87, 168, 0.1);
}

.careers-tabs__btn.is-active {
    color: var(--color-bianco);
    background: var(--color-blu-primario);
    border-color: var(--color-blu-primario);
    box-shadow: 0 6px 20px rgba(0, 87, 168, 0.25);
}

.careers-tabs__icon {
    display: flex;
    align-items: center;
}

.careers-tabs__icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-grigio-blu);
    transition: stroke var(--transition-base);
}

.careers-tabs__btn:hover .careers-tabs__icon svg {
    stroke: var(--color-blu-primario);
}

.careers-tabs__btn.is-active .careers-tabs__icon svg,
.careers-tabs__btn.is-active:hover .careers-tabs__icon svg {
    stroke: var(--color-bianco);
}

/* Partner variant: unselected state mirrors .btn--navbar-partner in the header
   (tinta azzurrina, testo e icona blu). Hover and .is-active stay shared with
   the other tabs thanks to their higher specificity. */
.careers-tabs__btn--partner {
    background: rgba(0, 168, 232, 0.04);
    border-color: var(--color-azzurro-tenue);
    color: var(--color-blu-primario);
    /* Servono al fascio di luce qui sotto: relative per ancorarlo, overflow per
       tenerlo dentro la pillola, z-index per l'ordine con lo pseudo-elemento. */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Fascio di luce, come il bottone Partner in header: riusa i keyframes
   navbar-cta-shine definiti in components.css. Il riflesso e' bianco, quindi si
   nota poco sul fondo azzurrino e bene sul blu del tab selezionato.
   La riduzione del movimento e' gia' gestita dal blocco prefers-reduced-motion
   di animations.css, che azzera le animazioni degli ::after. */
.careers-tabs__btn--partner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: navbar-cta-shine 5s infinite linear;
    pointer-events: none;
    z-index: 2;
}

/* Image-based tab icon (attachment declared via 'icon_img' in positions.php).
   Painted with currentColor through a CSS mask, so it follows the button's
   default / hover / active color without per-state filter hacks.
   The --tab-icon url() is set inline by the template. */
.careers-tabs__icon-mask {
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--tab-icon) no-repeat center / contain;
    mask: var(--tab-icon) no-repeat center / contain;
}

/* =========================================================
   4. TABS PANELS & ANIMATIONS
   ========================================================= */

.careers-panel {
    display: none;
}

.careers-panel.is-active {
    display: block;
}

.careers-panel.is-active .careers-panel__image-card {
    animation: cardFadeInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.careers-panel.is-active .careers-panel__inner {
    /* Entrance animation for the content area when tab is activated */
    animation: cardFadeInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
    opacity: 0; /* Start hidden for stagger effect */
}

@keyframes cardFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.careers-panel__inner {
    background: var(--color-bianco);
    border: 1px solid var(--color-azzurro-tenue);
    border-radius: var(--radius-l);
    padding: var(--space-xl);
    box-shadow: var(--shadow-card);
}

.careers-panel__intro {
    font-size: var(--text-body-large);
    color: var(--color-grigio-blu);
    margin-bottom: var(--space-xl);
    max-width: 800px;
    line-height: var(--line-height-body);
}

/* Titolo in cima alla scheda (chiave 'heading' in positions.php).
   Piu' grande delle intestazioni interne, che restano a --text-heading-xs,
   e piu' piccolo del titolo di sezione: e' il gradino intermedio. */
.careers-panel__title {
    font-size: var(--text-heading-s);
    font-weight: var(--font-weight-bold);
    color: var(--color-blu-profondo);
    line-height: var(--line-height-heading);
    max-width: 800px;
    margin: 0 0 var(--space-m);
}

/* CTA in fondo alla scheda (chiave 'cta' in positions.php). */
.careers-panel__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-l);
}

.careers-panel__actions .btn svg {
    flex-shrink: 0;
}

/* Paragrafi di approfondimento sotto l'intro (chiave 'body' in positions.php). */
.careers-panel__text {
    color: var(--color-grigio-blu);
    line-height: var(--line-height-body);
    max-width: 800px;
    margin: 0 0 var(--space-m);
}

/* Percorso numerato (chiave 'steps'): si legge come una sequenza, quindi <ol>
   con il numero disegnato al posto del marcatore predefinito. */
.careers-panel__steps {
    margin-top: var(--space-xl);
}

.careers-panel__steps-list {
    list-style: none;
    counter-reset: careers-step;
    display: grid;
    gap: var(--space-m);
    margin: var(--space-m) 0 0;
    padding: 0;
}

.careers-panel__step {
    counter-increment: careers-step;
    position: relative;
    padding-left: calc(28px + var(--space-s));
}

.careers-panel__step::before {
    content: counter(careers-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-blu-primario);
    color: var(--color-bianco);
    font-size: var(--text-body-small);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.careers-panel__step-title {
    display: block;
    color: var(--color-blu-profondo);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
}

.careers-panel__step-text {
    display: block;
    color: var(--color-grigio-blu);
    font-size: var(--text-body-small);
    line-height: var(--line-height-body);
}

/* Shown only while a position has no intro, tasks nor requirements yet. */
.careers-panel__pending {
    font-size: var(--text-body-large);
    color: var(--color-grigio-medio);
    line-height: var(--line-height-body);
    margin: 0;
}

.careers-panel__grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--space-l);
    align-items: stretch;
}

.careers-panel__image-card {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 450px;
    padding: 0; /* No padding for image fill */
    overflow: hidden; /* Clips image to card corners */
    border-radius: var(--radius-l);
}

.careers-panel__img {
    /* Forces correct aspect ratio regardless of uploaded image dimensions */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    image-rendering: auto; /* Avoid forced pixelation */
    filter: none !important; /* Remove any inherited filters */
}

/* Colonna immagine: altezza fissa e uguale su tutte le schede, e agganciata
   mentre si scorre.
   Con align-items:stretch sulla griglia copiava l'altezza del testo, quindi
   ogni scheda aveva una foto di proporzioni diverse e la Partner, lunga oltre
   1100px, veniva ritagliata a striscia 1:3. align-self:start la svincola,
   l'altezza fissa la rende identica per tutte e sticky la tiene in vista.
   Si ferma sotto la riga di tab, che e' agganciata anche lei. */
.careers-panel__image-card {
    align-self: start;
    /* Il min-height di 450px sopra vincerebbe sul max-height — in CSS il minimo
       si applica per ultimo — e su schermi bassi la foto sporgerebbe oltre il
       bordo inferiore mentre e' agganciata. */
    min-height: 0;
    height: 560px;
    max-height: calc(100vh - var(--careers-sticky-top) - var(--space-l));
    position: sticky;
    top: var(--careers-sticky-top);
}

.careers-panel__img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-sfondo-freddo);
    border: none; /* Removed internal dashed border */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    color: var(--color-grigio-medio);
    font-size: var(--text-body-small);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.careers-panel__image-card:hover .careers-panel__img-placeholder {
    background: rgba(0, 168, 232, 0.04);
    border-color: var(--color-ciano-accento);
    color: var(--color-blu-primario);
}

.careers-panel__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.careers-panel__heading {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-heading-xs);
    color: var(--color-blu-profondo);
    margin-bottom: var(--space-m);
}

.careers-panel__heading svg {
    color: var(--color-ciano-accento);
    flex-shrink: 0;
}

.careers-panel__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.careers-panel__list li {
    position: relative;
    padding-left: var(--space-m);
    color: var(--color-grigio-blu);
    line-height: 1.6;
    font-size: var(--text-body-medium);
}

.careers-panel__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-ciano-accento);
}

/* ---------------------------------------------------------
   Blocco "Cosa ti aspetta" — a tutta larghezza sotto le colonne
--------------------------------------------------------- */
.careers-panel__offer {
    margin-bottom: var(--space-xl);
}

/*
 * Quattro voci brevi su un'unica colonna a tutta larghezza lascerebbero
 * mezza card vuota: il flusso a due colonne le tiene compatte.
 * display:block e' necessario perche' .careers-panel__list e' flex, e le
 * colonne CSS non si applicano a un contenitore flex; venendo meno il
 * flex, la spaziatura torna dal margine invece che da gap.
 */
.careers-panel__list--split {
    display: block;
    columns: 2;
    column-gap: var(--space-xl);
}

.careers-panel__list--split li {
    /* Senza questo una voce su due righe si spezza fra le due colonne. */
    break-inside: avoid;
    margin-bottom: var(--space-s);
}

/* =========================================================
   RESPONSIVE — Tablet
========================================================= */

@media (max-width: 1199px) {
    .careers-panel__columns {
        gap: var(--space-l);
    }

    .careers-panel__inner {
        padding: var(--space-l);
    }
}

/* =========================================================
   RESPONSIVE — Mobile
========================================================= */

@media (max-width: 767px) {

    .careers-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .careers-tabs__btn {
        justify-content: center;
    }

    .careers-panel__columns {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }

    /* Su schermo stretto due colonne lascerebbero due o tre parole per riga. */
    .careers-panel__list--split {
        columns: 1;
    }

    .careers-panel__grid {
        grid-template-columns: 1fr;
        gap: var(--space-m);
    }

    .careers-panel__inner {
        padding: var(--space-m);
    }

    .careers-panel__image-card {
        min-height: 250px;
        padding: 0;
    }

    /* A colonna singola l'immagine sta sopra al testo: lo sticky non ha senso e
       resterebbe agganciato coprendo il contenuto mentre si scorre. Height e
       max-height tornano automatici.
       L'altezza viene dal rapporto 3:2 sulla larghezza disponibile, uguale per
       tutte le schede; min-height va azzerato perche' i 250px fissi della regola
       sopra vincerebbero sul rapporto. */
    .careers-panel__image-card {
        position: static;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 3 / 2;
    }

    /* L'etichetta lunga del bottone e' nowrap per via di .btn, e con uppercase e
       letter-spacing chiede 345px: su 375 di viewport allargava la colonna della
       griglia a 395 e la scheda sbordava, tagliata solo dall'overflow del body. */
    .careers-panel__actions .btn {
        white-space: normal;
        min-width: 0;
        width: 100%;
    }

    .careers-form__upload {
        padding: var(--space-l) var(--space-m);
    }
}