/* Source #848: YOBB - Feed card v4 */
/* =========================================
   YOBB – FEED CARD V9 / TARKKA 9:16 + BUNNY + FLOATING CTA

   Visuaaliset peruskomponentit:
   YOBB – Global Component Styles V13+

   Tämä CSS hoitaa:
   - feedin TikTok-layoutin
   - 9:16 media-alueen
   - overlayn
   - reaktioiden sijoittelun
   - saved gridin
   - responsiven

   Napit, fontit, korttien perusarvot ja värit
   tulevat Global Componentsista.
========================================= */


/* =========================================
   FEED-LISTA
========================================= */

.yobb-feed-list {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}


/* =========================================
   PÄÄFEED
========================================= */

.yobb-feed-list-main {
  width: min(100%, 44dvh, 520px);

  height: var(--yobb-feed-viewport-height, calc(100dvh - 120px));

  margin-top: 0 !important;
  padding-top: 0 !important;

  overflow-x: hidden;
  overflow-y: auto;

  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;

  scrollbar-width: none;
}

.yobb-feed-list-main::-webkit-scrollbar {
  display: none;
}

.yobb-feed-list-main
.yobb-feed-slide {
  display: flex;

  width: 100%;
  min-height: 100%;
  height: 100%;

  align-items: stretch;
  justify-content: center;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.yobb-feed-list-main
.yobb-feed-card {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.yobb-feed-list-main
.yobb-feed-visual {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

.yobb-feed-list-main
.yobb-feed-employer-bar {
  flex: 0 0 65px;
}


/* =========================================
   SUOSIKIT – GRID
========================================= */

.yobb-saved-feed-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  width: 100%;
  max-width: none;
  height: auto;

  gap: var(--yobb-space-md);
  overflow: visible;
}

.yobb-saved-job-card {
  display: block;

  min-width: 0;
  overflow: hidden;

  padding: 0 !important;

  color: var(--yobb-text) !important;
  text-decoration: none !important;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.yobb-saved-job-card:visited {
  color: var(--yobb-text) !important;
}

@media (hover: hover) and (pointer: fine) {

  .yobb-saved-job-card:hover {
    border-color: var(--yobb-primary);

    color: var(--yobb-text) !important;
    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow:
      0 8px 22px
      color-mix(
        in srgb,
        var(--yobb-text) 12%,
        transparent
      );
  }
}

.yobb-saved-job-card:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--yobb-primary) 30%,
      transparent
    );

  outline-offset: 3px;
}

.yobb-saved-job-media {
  position: relative;

  display: grid;

  width: 100%;
  aspect-ratio: 9 / 16;

  overflow: hidden;
  place-items: center;

  background:
    color-mix(
      in srgb,
      var(--yobb-text) 92%,
      var(--yobb-primary)
    );
}

.yobb-saved-job-image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.yobb-saved-job-placeholder {
  color: var(--yobb-secondary);

  font-family: var(--yobb-font-heading);

  font-size: clamp(20px, 3vw, 34px);
  font-weight: 600;
  line-height: 1;
}

.yobb-saved-job-content {
  display: grid;

  min-width: 0;

  gap: 3px;
  padding: var(--yobb-space-sm);
}

.yobb-saved-job-title {
  display: -webkit-box;
  overflow: hidden;

  color: var(--yobb-text);

  font-family: var(--yobb-font-heading);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.yobb-saved-job-company,
.yobb-saved-job-location {
  display: block;
  overflow: hidden;

  color:
    color-mix(
      in srgb,
      var(--yobb-text) 68%,
      transparent
    );

  font-family: var(--yobb-font-body);

  font-size: 12px;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================
   KORTTI
========================================= */

.yobb-feed-card {
  position: relative;

  width: 100%;
  overflow: hidden;

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

  background: var(--yobb-secondary);
  color: var(--yobb-text);

  box-shadow:
    0 5px 18px
    color-mix(
      in srgb,
      var(--yobb-text) 16%,
      transparent
    );
}


/* =========================================
   TYÖNANTAJAN YLÄPALKKI
========================================= */

.yobb-feed-employer-bar {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 10px;

  min-height: 65px;
  padding: 8px 12px;

  background: var(--yobb-secondary);
}


/* Yrityksen logo */

.yobb-employer-logo {
  display: flex;

  width: 48px;
  height: 48px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 2px solid var(--yobb-primary);
  border-radius: 50%;

  background: var(--yobb-secondary);
  color: var(--yobb-primary);

  font-family: var(--yobb-font-heading);

  font-size: 20px;
  font-weight: 600;
}

.yobb-employer-logo img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.yobb-employer-logo span {
  line-height: 1;
}


/* Yrityksen tiedot */

.yobb-employer-info {
  display: flex;

  min-width: 0;

  flex-direction: column;
  justify-content: center;
}

.yobb-employer-info strong {
  overflow: hidden;

  color: var(--yobb-text);

  font-family: var(--yobb-font-heading);

  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;

  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.yobb-employer-info span {
  margin-top: 3px;
  overflow: hidden;

  color: var(--yobb-text);

  font-family: var(--yobb-font-body);

  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================
   YLÄPALKKITAGIT

   Global Badge hoitaa ulkoasun.
   Feed määrittää vain tilankäytön.
========================================= */

.yobb-feed-top-tags {
  display: flex;

  min-width: 0;

  align-items: center;
  justify-content: flex-end;
}

.yobb-feed-tags-top,
.yobb-feed-top-tags
.yobb-feed-tags {
  display: flex;

  width: 145px;
  max-width: 145px;

  flex-direction: column;

  align-items: stretch;
  justify-content: center;

  gap: 4px;
}

.yobb-feed-tag-positive,
.yobb-feed-tag-missing {
  display: flex;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  white-space: nowrap !important;
  text-overflow: ellipsis;

  text-align: center;
}


/*
 * JS lisää tämän luokan, jos jokin tagi ei mahdu
 * yhdelle riville.
 *
 * Silloin vain ensimmäinen / tärkein tagi näkyy
 * ja saa käyttää kahta riviä.
 */
.yobb-feed-tags-top.is-single-wrapped {
  gap: 0;
}

.yobb-feed-tags-top.is-single-wrapped
.yobb-feed-tag-positive:first-child,
.yobb-feed-tags-top.is-single-wrapped
.yobb-feed-tag-missing:first-child {
  white-space: normal !important;
  text-overflow: clip;

  overflow-wrap: normal;
  word-break: normal;
}

.yobb-feed-tag-positive.is-hidden-by-fit,
.yobb-feed-tag-missing.is-hidden-by-fit {
  display: none !important;
}


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

.yobb-feed-visual {
  position: relative;

  overflow: hidden;

  aspect-ratio: 9 / 16;

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

.yobb-feed-media-wrap,
.yobb-feed-media-link,
.yobb-feed-video-wrap {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
}

.yobb-feed-media-element,
.yobb-feed-image,
.yobb-feed-video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

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

.yobb-feed-video-embed-wrap {
  background: var(--yobb-text);
}

.yobb-feed-video-embed {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

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

.yobb-feed-media-placeholder {
  position: absolute;
  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--yobb-text);
  color: var(--yobb-secondary);

  font-family: var(--yobb-font-heading);

  font-size: 34px;
  font-weight: 600;

  text-decoration: none !important;
}


/* Tumma gradientti tekstin alla */

.yobb-feed-visual::after {
  content: "";

  position: absolute;
  z-index: 1;

  inset: 35% 0 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      color-mix(
        in srgb,
        var(--yobb-text) 85%,
        transparent
      )
    );
}


/* =========================================
   VIDEO
========================================= */

.yobb-feed-video {
  background: var(--yobb-text);
  pointer-events: none;
}

.yobb-feed-video::-webkit-media-controls,
.yobb-feed-video::-webkit-media-controls-enclosure,
.yobb-feed-video::-webkit-media-controls-panel,
.yobb-feed-video::-webkit-media-controls-play-button,
.yobb-feed-video::-webkit-media-controls-start-playback-button,
.yobb-feed-video::-webkit-media-controls-overlay-play-button {
  display: none !important;

  opacity: 0 !important;
  visibility: hidden !important;
}



/* =========================================
   OIKEAN REUNAN TOIMINNOT
========================================= */

.yobb-feed-side-actions {
  position: absolute;
  z-index: 5;

  right: 12px;
  bottom: 92px;

  display: flex;

  flex-direction: column;
  align-items: center;

  gap: 10px;
}

.yobb-feed-side-action {
  display: flex;

  flex-direction: column;
  align-items: center;
}

.yobb-feed-side-button,
.yobb-feed-side-actions .yobb-like-button,
.yobb-feed-side-actions .yobb-save-button,
.yobb-feed-side-actions .worky-like-button,
.yobb-feed-side-actions .worky-save-button {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;

  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;

  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  color: var(--yobb-secondary) !important;

  box-shadow: none !important;

  text-decoration: none !important;

  cursor: pointer;

  transition:
    transform 160ms ease,
    opacity 160ms ease,
    color 160ms ease;
}

.yobb-feed-side-button:hover,
.yobb-feed-side-actions .yobb-like-button:hover,
.yobb-feed-side-actions .yobb-save-button:hover,
.yobb-feed-side-actions .worky-like-button:hover,
.yobb-feed-side-actions .worky-save-button:hover {
  background: transparent !important;
  color: var(--yobb-secondary) !important;

  box-shadow: none !important;

  transform: scale(1.08);
}

.yobb-share-button,
.yobb-share-button:hover,
.yobb-share-button:focus,
.yobb-share-button:active {
  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  outline: 0;
}

.yobb-feed-side-button svg {
  display: block;

  width: 38px;
  height: 38px;

  overflow: visible;

  fill: none;
  stroke: currentColor;

  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.yobb-feed-side-actions
:is(
  .yobb-like-icon,
  .yobb-save-icon,
  .worky-like-icon,
  .worky-save-icon
) {
  display: block;

  color: var(--yobb-secondary) !important;

  font-size: 38px;
  line-height: 1;

  text-shadow:
    0 1px 3px
    color-mix(
      in srgb,
      var(--yobb-text) 35%,
      transparent
    );
}

.yobb-feed-side-actions
:is(
  .yobb-like-button.is-liked .yobb-like-icon,
  .worky-like-button.is-liked .worky-like-icon,
  .yobb-save-button.is-saved .yobb-save-icon,
  .worky-save-button.is-saved .worky-save-icon
) {
  color: var(--yobb-primary) !important;
}

.yobb-feed-side-actions
:is(
  .yobb-save-text,
  .worky-save-text,
  .yobb-confirm-actions,
  .worky-confirm-actions
) {
  display: none !important;
}

.yobb-feed-like-action
:is(
  .yobb-like-count,
  .worky-like-count
),
.yobb-feed-side-actions
:is(
  .yobb-like-count,
  .worky-like-count
) {
  min-height: 0 !important;

  margin-top: -4px;

  color: var(--yobb-secondary);

  font-family: var(--yobb-font-ui);

  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.yobb-share-button.is-copied {
  color: var(--yobb-primary) !important;
}


/* =========================================
   MATCH
========================================= */

.yobb-feed-match-score {
  display: none;
}


/* =========================================
   TYÖPAIKAN NIMI + KUVAUS

   Palautetaan ennen TikTok-uudistusta ollut
   selkeä iso työpaikan nimi.
========================================= */

.yobb-feed-overlay-content {
  position: absolute;
  z-index: 3;

  right: 72px;
  bottom: 18px;
  left: 18px;

  color: var(--yobb-secondary);
}

.yobb-feed-title,
.yobb-feed-title.yobb-heading {
  display: block;

  margin: 0 0 8px;
  padding: 0;

  color: var(--yobb-secondary) !important;

  font-family: var(--yobb-font-heading) !important;

  font-size: clamp(30px, 8vw, 40px);
  font-weight: 600;
  line-height: 0.98;

  text-transform: none;

  opacity: 1;
  visibility: visible;
}

.yobb-feed-title a,
.yobb-feed-title a:visited,
.yobb-feed-title a:hover {
  color: inherit !important;
  text-decoration: none !important;
}

.yobb-feed-excerpt {
  display: flex;

  max-width: 100%;

  align-items: baseline;

  gap: 5px;

  overflow: hidden;

  color: var(--yobb-secondary);

  font-family: var(--yobb-font-body);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;

  white-space: nowrap;
}

.yobb-feed-excerpt > span {
  display: block;

  min-width: 0;

  flex: 1 1 auto;

  overflow: hidden;

  text-overflow: ellipsis;
}

.yobb-show-more[hidden] {
  display: none !important;
}

.yobb-show-more {
  appearance: none;

  display: inline-flex;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  flex: 0 0 auto;

  align-items: baseline;

  margin: 0;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: var(--yobb-primary) !important;

  box-shadow: none !important;

  font-family: var(--yobb-font-body);

  font-size: inherit;
  font-weight: 600;
  line-height: inherit;

  white-space: nowrap;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;

  cursor: pointer;
}

.yobb-show-more:hover,
.yobb-show-more:focus-visible {
  background: transparent !important;
  color: var(--yobb-secondary) !important;

  box-shadow: none !important;
}


/* =========================================
   ALAREUNAN GLOBAL-NAPIT
========================================= */

.yobb-feed-bottom-actions {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

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

  padding: 10px 12px;

  background: var(--yobb-secondary);
}

.yobb-feed-bottom-actions
.yobb-btn {
  width: 100%;

  min-width: 0;

  text-transform: none !important;
}


/* =========================================
   KUVAUSMODAL
========================================= */

body.yobb-modal-open {
  overflow: hidden;
}

.yobb-description-modal[hidden] {
  display: none;
}

.yobb-description-modal {
  position: fixed;
  z-index: 99999;

  inset: 0;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  padding: 16px;
}

.yobb-description-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    color-mix(
      in srgb,
      var(--yobb-text) 72%,
      transparent
    );
}

.yobb-description-modal-panel {
  position: relative;
  z-index: 1;

  width: min(100%, 520px);
  max-height: 82vh;

  overflow-y: auto;

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

.yobb-description-modal-panel h3 {
  margin-right: 36px;
}

.yobb-description-modal-panel p {
  color: var(--yobb-text);

  font-family: var(--yobb-font-body);

  line-height: 1.6;
}

.yobb-description-meta {
  font-weight: 600;
}

.yobb-description-close {
  position: absolute;

  top: 10px;
  right: 14px;

  display: inline-flex;

  width: 34px;
  height: 34px;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--yobb-text);

  font-family: var(--yobb-font-ui);

  font-size: 30px;
  line-height: 1;

  cursor: pointer;
}


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

@media (max-width: 1024px) {

  .yobb-saved-feed-list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 14px;
  }
}


/* =========================================
   MOBIILI – PÄÄFEED
========================================= */

@media (max-width: 767px) {

  /*
   * Feed-widgetin mahdollinen ylimääräinen
   * Elementor-spacing pois.
   */
  .elementor-widget-shortcode:has(.yobb-feed-list-main),
  .elementor-widget-shortcode:has(.yobb-feed-list-main)
  > .elementor-widget-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  .yobb-feed-list-main {
    width: 100%;
    max-width: 100%;

    height:
      var(
        --yobb-feed-viewport-height,
        80dvh
      );

    margin-top: 0 !important;
  }


  .yobb-feed-list-main
  .yobb-feed-slide {
    height: 100%;
    min-height: 100%;

    align-items: stretch;
  }


  .yobb-feed-list-main
  .yobb-feed-card {
    display: flex;

    height: 100%;
    min-height: 0;

    flex-direction: column;

    border-radius: 0;
  }


  .yobb-feed-list-main
  .yobb-feed-visual {
    flex: 1 1 auto;

    min-height: 0;

    aspect-ratio: auto;
  }


  .yobb-feed-list-main
  .yobb-feed-employer-bar,
  .yobb-feed-list-main
  .yobb-feed-bottom-actions {
    flex: 0 0 auto;
  }


  /* =====================================
     MOBIILI – KIINTEÄ EMPLOYER BAR

     Korkeus ei muutu tagien mukaan.
  ===================================== */

  .yobb-feed-employer-bar {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      145px;

    width: 100%;

    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;

    gap: 8px;

    padding:
      5px
      10px !important;

    overflow: hidden;
  }


  .yobb-employer-logo {
    width: 44px;
    height: 44px;
  }


  .yobb-employer-info {
    min-width: 0;
    overflow: hidden;
  }


  .yobb-employer-info strong {
    font-size: 14px;
  }


  /* =====================================
     MOBIILI – TAGIALUE

     Normaali:
     2 lyhyttä tagia yhdellä rivillä.

     Jos teksti ei mahdu:
     JS lisää .is-single-wrapped,
     jolloin vain ensimmäinen tagi näkyy
     ja se voi olla kaksirivinen.
  ===================================== */

  .yobb-feed-top-tags {
    width: 145px;
    height: 58px;

    min-width: 145px;
    max-width: 145px;

    overflow: hidden;
  }


  .yobb-feed-tags-top,
  .yobb-feed-top-tags
  .yobb-feed-tags {
    width: 145px;
    max-width: 145px;

    max-height: 58px;

    gap: 3px;

    overflow: hidden;
  }


  /*
   * Ei pienennetä fonttia.
   * Fontti tulee edelleen Global Badgesta.
   */
  .yobb-feed-tag-positive,
  .yobb-feed-tag-missing {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;

    margin: 0 !important;

    padding:
      3px
      9px !important;

    white-space: nowrap !important;

    line-height: 1 !important;
  }


  /*
   * Yksi pitkä tagi:
   * saa käyttää kahta riviä ja enemmän korkeutta,
   * mutta employer bar pysyy edelleen 68 px.
   */
  .yobb-feed-tags-top.is-single-wrapped
  .yobb-feed-tag-positive:first-child,
  .yobb-feed-tags-top.is-single-wrapped
  .yobb-feed-tag-missing:first-child {
    display: flex !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    align-items: center;
    justify-content: center;

    padding:
      4px
      10px !important;

    white-space: normal !important;

    line-height: 1.12 !important;

    text-align: center;
  }


  /* =====================================
     OVERLAY
  ===================================== */

  .yobb-feed-overlay-content {
    right: 68px;
    bottom: 16px;
    left: 14px;
  }


  .yobb-feed-title,
  .yobb-feed-title.yobb-heading {
    font-size:
      clamp(
        30px,
        8.5vw,
        38px
      );
  }


  /* =====================================
     SUOSIKIT
  ===================================== */

  .yobb-saved-feed-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }


  .yobb-saved-job-content {
    gap: 2px;
    padding: 10px;
  }


  .yobb-saved-job-title {
    font-size: 14px;
  }


  .yobb-saved-job-company,
  .yobb-saved-job-location {
    font-size: 11px;
  }
}


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

@media (max-width: 480px) {

  .yobb-feed-list {
    max-width: 100%;
  }

  .yobb-feed-employer-bar {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      auto;

    gap: 8px;

    padding: 7px 10px;
  }

  .yobb-employer-logo {
    width: 44px;
    height: 44px;
  }

  .yobb-employer-info strong {
    font-size: 14px;
  }

  .yobb-feed-employer-bar {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      138px;
  }

  .yobb-feed-top-tags,
  .yobb-feed-tags-top,
  .yobb-feed-top-tags
  .yobb-feed-tags {
    width: 138px;
    min-width: 138px;
    max-width: 138px;
  }

  .yobb-feed-bottom-actions {
    padding-inline: 10px;
  }
}

/* =========================================
   V9: PÄÄFEEDIN TARKKA RESPONSIVE-LAYOUT
   - Ei erillistä alareunan nappipalkkia.
   - Media-alue on AINA 9:16 (ei flex-venytystä).
   - Tyhjä tila jätetään vain kortin ulkopuolelle.
   - Desktop-header näkyy; mobiilissa se piilotetaan.
========================================= */

/* Piilota Elementor-header vain feedin MOBIILINÄKYMÄSSÄ.
   Desktopin header käyttää taas Elementorin omia näyttöasetuksia. */
@media (max-width: 767px) {
  body:has([data-yobb-feed-main]) .elementor-location-header,
  body:has([data-yobb-feed-main]) #masthead {
    display: none !important;
  }
}

/* Poista shortcode-widgetin ylimääräiset ylävälit vain feedistä. */
body:has([data-yobb-feed-main])
.elementor-widget-shortcode:has([data-yobb-feed-main]),
body:has([data-yobb-feed-main])
.elementor-widget-shortcode:has([data-yobb-feed-main]) > .elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Scroll-snap käyttää käytettävissä olevaa näyttötilaa,
   mutta varsinainen työpaikkakortti on sen sisällä oma 9:16-kokonsa. */
.yobb-feed-list-main {
  box-sizing: border-box;
  width: var(--yobb-v9-card-width, min(100%, 44dvh, 520px)) !important;
  max-width: 100%;
  height: var(--yobb-v9-feed-height, calc(100dvh - 120px)) !important;
  min-height: 0;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.yobb-feed-list-main > .yobb-feed-slide {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: var(--yobb-v9-feed-height, calc(100dvh - 120px)) !important;
  min-height: var(--yobb-v9-feed-height, calc(100dvh - 120px)) !important;
  align-items: center !important;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.yobb-feed-list-main .yobb-feed-card {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: var(--yobb-v9-card-height, auto) !important;
  min-height: 0 !important;
  max-height: none;
  flex: 0 0 auto;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Yläpalkki vie puhelimella tarvittaessa enemmän tilaa.
   Bar + (cardWidth * 16/9) = koko kortin korkeus. */
.yobb-feed-list-main .yobb-feed-employer-bar {
  box-sizing: border-box;
  flex: 0 0 var(--yobb-v9-bar-height, 88px) !important;
  width: 100%;
  height: var(--yobb-v9-bar-height, 88px) !important;
  min-height: var(--yobb-v9-bar-height, 88px) !important;
  max-height: var(--yobb-v9-bar-height, 88px) !important;
  grid-template-columns: 56px minmax(0, 1fr) min(145px, 33%);
  gap: 10px;
  padding: 9px 12px !important;
  overflow: hidden;
  align-items: center;
}

.yobb-feed-list-main .yobb-employer-logo {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  font-size: 23px;
}

.yobb-feed-list-main .yobb-employer-info strong {
  font-size: clamp(16px, 3vw, 19px);
  line-height: 1.15;
}

.yobb-feed-list-main .yobb-employer-info span {
  font-size: 14px;
  line-height: 1.25;
}

/* Pidä match-tagit alkuperäisen Smart Tags -logiikan mukaisina. */
.yobb-feed-list-main .yobb-feed-top-tags,
.yobb-feed-list-main .yobb-feed-tags-top,
.yobb-feed-list-main .yobb-feed-top-tags .yobb-feed-tags {
  width: min(145px, 100%);
  min-width: 0;
  max-width: 145px;
}

/* Ei täytetä ylimääräistä korkeutta vihreällä taustalla. */
.yobb-feed-list-main .yobb-feed-visual {
  box-sizing: border-box;
  isolation: isolate;
  width: 100%;
  height: var(--yobb-v9-media-height, auto) !important;
  min-height: 0 !important;
  flex: 0 0 var(--yobb-v9-media-height, auto) !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden;
}

.yobb-feed-list-main .yobb-feed-media-wrap,
.yobb-feed-list-main .yobb-feed-media-link,
.yobb-feed-list-main .yobb-feed-video-wrap,
.yobb-feed-list-main .yobb-feed-media-element,
.yobb-feed-list-main .yobb-feed-video-embed {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* 9:16-yhteensopiva kuva/native-video täyttää alan.
   Huom. iframeen upotetun Bunny-soittimen SISÄISIÄ palkkeja
   ei voi poistaa sivun ulkopuolisella CSS:llä. */
.yobb-feed-list-main .yobb-feed-image,
.yobb-feed-list-main .yobb-feed-video {
  object-fit: cover;
}

.yobb-feed-list-main .yobb-feed-video,
.yobb-feed-list-main .yobb-feed-video-embed {
  pointer-events: auto !important;
}

/* Poistetaan YOBBin omat play/pause-painikkeet myös vanhan
   välimuistin varalta. PHP V9 ei enää renderöi niitä lainkaan. */
.yobb-feed-list-main .yobb-video-toggle {
  display: none !important;
}

/* Hae on ainoa alapainike: läpikuultava videon päällä. */
.yobb-feed-list-main .yobb-feed-bottom-actions {
  display: none !important;
}

.yobb-feed-list-main .yobb-feed-apply-floating {
  position: absolute;
  z-index: 8;
  bottom: 16px;
  left: 50%;
  display: flex;
  width: min(64%, 290px);
  min-width: min(155px, 90%);
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 16px;
  background: rgb(255 255 255 / 78%);
  color: var(--yobb-text, #17351c) !important;
  box-shadow: 0 5px 23px rgb(0 0 0 / 22%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--yobb-font-ui, inherit);
  font-weight: 700;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

@media (hover: hover) {
  .yobb-feed-list-main .yobb-feed-apply-floating:hover {
    background: var(--yobb-primary, #2C9934);
    border-color: var(--yobb-primary, #2C9934);
    color: #fff !important;
  }
}

.yobb-feed-list-main .yobb-feed-apply-floating:active {
  background: var(--yobb-primary, #2C9934);
  color: #fff !important;
}

.yobb-feed-list-main .yobb-feed-apply-floating:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Suuremmat työpaikan nimi ja kuvaus; riittävä tila Hae-painikkeelle. */
.yobb-feed-list-main .yobb-feed-overlay-content {
  bottom: 88px;
  left: 16px;
  right: 72px;
}

.yobb-feed-list-main .yobb-feed-title,
.yobb-feed-list-main .yobb-feed-title.yobb-heading {
  font-size: var(--yobb-v9-title-size, 42px) !important;
  line-height: 1.03;
  margin: 0 0 8px;
}

.yobb-feed-list-main .yobb-feed-excerpt {
  font-size: var(--yobb-v9-excerpt-size, 16px) !important;
  line-height: 1.4;
}

.yobb-feed-list-main .yobb-feed-side-actions {
  right: 12px;
  bottom: 152px;
}

@media (max-width: 767px) {
  .yobb-feed-list-main .yobb-feed-card {
    border-radius: 0;
  }
  .yobb-feed-list-main .yobb-feed-employer-bar {
    grid-template-columns: 54px minmax(0, 1fr) min(138px, 36%);
    gap: 8px;
    padding: 8px 10px !important;
  }
  .yobb-feed-list-main .yobb-employer-logo {
    width: 54px;
    height: 54px;
    font-size: 22px;
  }
  .yobb-feed-list-main .yobb-employer-info strong {
    font-size: clamp(15px, 4vw, 18px);
  }
  .yobb-feed-list-main .yobb-feed-top-tags,
  .yobb-feed-list-main .yobb-feed-tags-top,
  .yobb-feed-list-main .yobb-feed-top-tags .yobb-feed-tags {
    width: min(138px, 100%);
    min-width: 0;
    max-width: 138px;
  }
  .yobb-feed-list-main .yobb-feed-overlay-content {
    left: 14px;
    right: 68px;
    bottom: 86px;
  }
}

@media (max-width: 380px) {
  .yobb-feed-list-main .yobb-feed-employer-bar {
    grid-template-columns: 46px minmax(0, 1fr) min(120px, 36%);
    gap: 7px;
  }
  .yobb-feed-list-main .yobb-employer-logo {
    width: 46px;
    height: 46px;
    font-size: 19px;
  }
  .yobb-feed-list-main .yobb-feed-top-tags,
  .yobb-feed-list-main .yobb-feed-tags-top,
  .yobb-feed-list-main .yobb-feed-top-tags .yobb-feed-tags {
    width: min(120px, 100%);
    max-width: 120px;
  }
  .yobb-feed-list-main .yobb-feed-side-actions {
    bottom: 143px;
    gap: 6px;
  }
}