/* Source #1454: 201 YOBB – EMPLOYER JOB FORM LAYOUT V5 */
/* =========================================================
   201 YOBB – EMPLOYER JOB FORM LAYOUT V5

   Vain rakenne + responsive + julkaisulomakkeen omat
   media-/conditional-layoutit.

   Kaikki visuaaliset peruskomponentit:
   YOBB – Global Component Styles V13+

   Käytössä:
   .yobb-card
   .yobb-card--accent
   .yobb-heading
   .yobb-text
   .yobb-field
   .yobb-label
   .yobb-input
   .yobb-textarea
   .yobb-option
   .yobb-btn
   .yobb-upload
   .yobb-media-preview
   .yobb-alert
========================================================= */


/* =========================================================
   SIVUN RAKENNE
========================================================= */

.yobb-submit-job-wrap,
.yobb-submit-job-wrap *,
.yobb-submit-job-wrap *::before,
.yobb-submit-job-wrap *::after {
  box-sizing: border-box;
}

.yobb-submit-job-wrap {
  display: grid;
  width: 100%;
  max-width: 980px;

  gap: var(--yobb-space-lg);

  margin: 28px auto;
  padding: 0 16px;

  color: var(--yobb-text);
  font-family: var(--yobb-font-body);
}


/* =========================================================
   HERO
========================================================= */

.yobb-submit-job-hero {
  display: grid;
  gap: var(--yobb-space-sm);
}

.yobb-submit-job-eyebrow {
  color: var(--yobb-primary);
}

.yobb-submit-job-hero h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.04;
}

.yobb-submit-job-hero-description {
  max-width: 720px;
  margin: 0;
  line-height: 1.5;
}


/* =========================================================
   PROGRESS
========================================================= */

.yobb-submit-job-wrap
.yobb-job-progress {
  margin: 0;
}


/* =========================================================
   LOMAKE
========================================================= */

.yobb-submit-job-form {
  display: grid;
  width: 100%;
  gap: var(--yobb-space-lg);
}

.yobb-submit-job-section {
  display: grid;
  gap: var(--yobb-space-md);
}

.yobb-submit-job-section-header {
  display: grid;
  gap: 4px;

  padding-bottom: var(--yobb-space-md);

  border-bottom:
    1px solid
    var(--yobb-border-color);
}

.yobb-submit-job-section-title {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.1;
}

.yobb-submit-job-section-description {
  margin: 0;
  line-height: 1.45;
}

.yobb-submit-job-fields {
  display: grid;
  gap: var(--yobb-space-md);
}


/* =========================================================
   MEDIA

   Nykyinen Bunny-media näkyy 9:16-esikatseluna.
   Ei autoplayta.
========================================================= */

.yobb-submit-job-media-layout {
  display: grid;
  grid-template-columns: 1fr;

  gap: var(--yobb-space-lg);
  align-items: start;
}

.yobb-submit-job-media-layout.has-preview {
  grid-template-columns:
    minmax(220px, 280px)
    minmax(0, 1fr);
}

.yobb-submit-job-media-preview {
  width: min(100%, 280px);

  justify-self: start;

  /*
   * Legacy Forms Global V6 määritteli tälle aiemmin
   * palloviivareunan. Tämä scoped bridge pitää komponentin
   * Global Componentsin nykyisessä ulkoasussa.
   */
  border:
    var(--yobb-card-border-width)
    solid
    var(--yobb-border-color) !important;

  border-left:
    var(--yobb-card-accent-width)
    solid
    var(--yobb-primary) !important;

  border-radius:
    var(--yobb-card-radius) !important;

  background:
    var(--yobb-text) !important;
}

.yobb-submit-job-media-preview
.yobb-media-preview-inner {
  width: 100%;
  height: 100%;
}

.yobb-submit-job-media-preview
:is(img, video, iframe) {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  object-fit: contain;
  background: var(--yobb-text);
}

.yobb-submit-job-media-controls {
  min-width: 0;
}

.yobb-submit-job-help,
.yobb-submit-job-wrap
.yobb-feed-media-upload-status {
  margin: 0;

  font-family: var(--yobb-font-body);
  font-size: 12px;
  line-height: 1.45;
}


/* =========================================================
   VALINNAT
========================================================= */

.yobb-submit-job-choice-field {
  display: grid;
  gap: var(--yobb-space-sm);
}

.yobb-submit-job-choice-label {
  margin: 0;
}

.yobb-submit-job-option-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(170px, 1fr)
    );
}

.yobb-submit-job-toggle-option {
  max-width: 100%;
}


/* =========================================================
   CONDITIONAL FIELDS
========================================================= */

.yobb-submit-job-conditional-group {
  display: grid;
  gap: var(--yobb-space-md);
}

.yobb-submit-job-conditional-fields {
  display: grid;
  gap: var(--yobb-space-md);

  margin-top: var(--yobb-space-sm);
}

.yobb-submit-job-conditional-fields[hidden] {
  display: none !important;
}


/* =========================================================
   VALIDOINTI
========================================================= */

.yobb-submit-job-wrap
.yobb-field-error {
  padding: var(--yobb-space-sm);

  border-radius: var(--yobb-field-radius);

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      #b42318 58%,
      transparent
    );
}


/* =========================================================
   TOIMINNOT
========================================================= */

.yobb-submit-job-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--yobb-space-sm);

  width: 100%;
  max-width: 620px;

  margin-left: auto;
}

.yobb-submit-job-actions
.yobb-btn {
  width: 100%;
}


/* =========================================================
   VIESTIT
========================================================= */

.yobb-submit-job-message {
  display: grid;
  gap: var(--yobb-space-sm);
}


/* =========================================================
   TABLETTI
========================================================= */

@media (max-width: 900px) {

  .yobb-submit-job-media-layout.has-preview {
    grid-template-columns:
      minmax(190px, 240px)
      minmax(0, 1fr);
  }

  .yobb-submit-job-media-preview {
    width: min(100%, 240px);
  }
}


/* =========================================================
   MOBIILI
========================================================= */

@media (max-width: 767px) {

  .yobb-submit-job-wrap {
    gap: var(--yobb-space-md);

    margin: 16px auto;
    padding: 0 10px;
  }

  .yobb-submit-job-form {
    gap: var(--yobb-space-md);
  }

  .yobb-submit-job-hero h1 {
    font-size: 31px;
  }

  .yobb-submit-job-media-layout,
  .yobb-submit-job-media-layout.has-preview {
    grid-template-columns: 1fr;
  }

  .yobb-submit-job-media-preview {
    width: min(100%, 260px);
    justify-self: center;
  }

  .yobb-submit-job-option-grid {
    grid-template-columns: 1fr;
  }

  .yobb-submit-job-actions {
    grid-template-columns: 1fr;
    max-width: none;
  }
}