/*
 * Flatsome UX Builder bridge for the FAQ, Portfolio and Journal migration.
 * Loaded after areeka-new-design.css and areeka-faq-portfolio.css.
 * The approved class names remain intact; these rules account for the wrappers
 * emitted by native Flatsome section, row, column, image and accordion elements.
 */

.areeka-uxb-faq-page .entry-content > .section,
.areeka-uxb-portfolio-page .entry-content > .section {
  width: 100%;
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.areeka-uxb-page-hero {
  display: block;
  width: var(--areeka-page-measure);
  margin: 36px auto 34px;
  padding: 34px !important;
}

.areeka-uxb-page-hero > .section-content,
.areeka-uxb-page-hero__row {
  width: 100%;
  max-width: none;
  margin: 0;
}

.areeka-uxb-page-hero__row {
  align-items: center;
}

.areeka-uxb-page-hero .col,
.areeka-uxb-page-hero .col-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.areeka-uxb-page-hero .areeka-nd-page-hero__actions .col-inner,
.areeka-uxb-page-hero .areeka-nd-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.areeka-uxb-page-hero .button {
  margin: 0;
}

.areeka-uxb-faq-intro,
.areeka-uxb-portfolio-intro,
.areeka-uxb-faq-group,
.areeka-uxb-faq-next,
.areeka-uxb-portfolio-paths,
.areeka-uxb-portfolio-gallery,
.areeka-uxb-portfolio-clients,
.areeka-uxb-portfolio-cta {
  display: block;
}

.areeka-uxb-faq-intro > .section-content,
.areeka-uxb-portfolio-intro > .section-content,
.areeka-uxb-faq-jump > .section-content,
.areeka-uxb-faq-group > .section-content,
.areeka-uxb-faq-next > .section-content,
.areeka-uxb-portfolio-paths > .section-content,
.areeka-uxb-portfolio-gallery > .section-content,
.areeka-uxb-portfolio-clients > .section-content,
.areeka-uxb-portfolio-cta > .section-content {
  width: 100%;
  max-width: none;
}

.areeka-uxb-faq-intro,
.areeka-uxb-portfolio-intro {
  width: var(--areeka-wide-measure) !important;
}

.areeka-uxb-faq-intro > .section-content > .row,
.areeka-uxb-portfolio-intro > .section-content > .row,
.areeka-uxb-faq-group__row,
.areeka-uxb-faq-next > .section-content > .row,
.areeka-uxb-portfolio-cta > .section-content > .row {
  width: 100%;
  max-width: none;
  margin: 0;
}

.areeka-uxb-faq-jump {
  display: block;
  width: var(--areeka-wide-measure);
}

.areeka-uxb-faq-jump__row,
.areeka-uxb-faq-jump__row > .col,
.areeka-uxb-faq-jump__row > .col > .col-inner {
  width: 100%;
  max-width: none;
  margin: 0;
}

.areeka-uxb-faq-jump__row > .col > .col-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.areeka-uxb-faq-jump .button {
  min-height: 44px;
  margin: 0;
}

.areeka-uxb-faq-group {
  width: var(--areeka-wide-measure);
  margin: 0 auto 20px !important;
}

.areeka-uxb-faq-group .accordion,
.areeka-uxb-faq-group .accordion-item {
  margin: 0;
  border: 0;
}

.areeka-uxb-faq-group .accordion-title {
  min-height: 64px;
  display: flex;
  align-items: center;
  border-top: 0;
  border-bottom: 1px solid var(--areeka-line);
  color: var(--areeka-ink);
  padding: 15px 46px 15px 2px;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.4;
}

.areeka-uxb-faq-group .accordion-inner {
  border-bottom: 1px solid var(--areeka-line);
  color: var(--areeka-muted);
  padding: 0 46px 21px 2px;
  line-height: 1.7;
}

.areeka-uxb-faq-group .toggle {
  right: 8px;
  left: auto;
}

.areeka-uxb-faq-next,
.areeka-uxb-portfolio-cta {
  width: var(--areeka-wide-measure) !important;
  padding: 38px !important;
}

.areeka-uxb-faq-next .areeka-nd-faq-next__actions .col-inner,
.areeka-uxb-portfolio-cta .areeka-nd-portfolio-cta__actions .col-inner {
  display: grid;
  gap: 10px;
}

.areeka-uxb-faq-next .button,
.areeka-uxb-portfolio-cta .button {
  width: 100%;
  margin: 0;
}

/*
 * Flatsome loads after the migration styles and turns white outline buttons
 * white on hover. Keep the interaction visible and on-brand on every migrated
 * hero and dark closing panel, including inside UX Builder previews.
 */
.areeka-nd-page-hero .button.white.is-outline:hover,
.areeka-nd-page-hero .button.white.is-outline:focus-visible,
.areeka-nd-faq-next .button.white.is-outline:hover,
.areeka-nd-faq-next .button.white.is-outline:focus-visible,
.areeka-nd-portfolio-cta .button.white.is-outline:hover,
.areeka-nd-portfolio-cta .button.white.is-outline:focus-visible {
  border-color: #f1ddea !important;
  background-color: #f1ddea !important;
  color: #3b1e44 !important;
  box-shadow: none !important;
  opacity: 1;
}

/* Preserve readable link-style CTAs when Flatsome's global link hover wins. */
.areeka-nd-faq-next .button.is-link:hover,
.areeka-nd-faq-next .button.is-link:focus-visible,
.areeka-nd-portfolio-cta .button.is-link:hover,
.areeka-nd-portfolio-cta .button.is-link:focus-visible,
.areeka-nd-blog-discovery__panel--catalog .button.is-link:hover,
.areeka-nd-blog-discovery__panel--catalog .button.is-link:focus-visible,
.areeka-nd-blog-discovery__panel--quote .button.is-link:hover,
.areeka-nd-blog-discovery__panel--quote .button.is-link:focus-visible {
  color: #fff !important;
  opacity: 1;
}

.areeka-uxb-portfolio-paths,
.areeka-uxb-portfolio-gallery,
.areeka-uxb-portfolio-clients {
  width: var(--areeka-wide-measure) !important;
}

.areeka-uxb-portfolio-paths .areeka-nd-portfolio-paths__grid,
.areeka-uxb-portfolio-gallery .areeka-nd-portfolio-gallery__grid,
.areeka-uxb-portfolio-clients .areeka-nd-portfolio-clients__grid {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.areeka-uxb-portfolio-paths .areeka-nd-portfolio-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.areeka-uxb-portfolio-path {
  width: 100% !important;
  max-width: none !important;
  flex-basis: auto !important;
  padding: 0 !important;
}

.areeka-uxb-portfolio-path .banner {
  overflow: hidden;
  border: 1px solid rgba(111, 58, 120, .22);
  border-radius: 10px;
  background: #26182d;
  box-shadow: 0 18px 44px rgba(24, 23, 28, .16);
}

.areeka-uxb-portfolio-path .banner-bg::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 11, 22, .08) 12%, rgba(24, 14, 29, .55) 53%, rgba(24, 13, 29, .97) 100%);
  content: "";
}

.areeka-uxb-portfolio-path .text-box {
  z-index: 2;
}

.areeka-uxb-portfolio-path .text-box-content {
  background: transparent;
  padding: 0;
  text-align: left;
}

.areeka-uxb-portfolio-gallery {
  padding: 54px !important;
}

.areeka-uxb-portfolio-gallery .areeka-nd-portfolio-gallery__grid,
.areeka-uxb-portfolio-clients .areeka-nd-portfolio-clients__grid {
  display: grid;
}

.areeka-uxb-gallery-item,
.areeka-uxb-portfolio-clients .areeka-nd-portfolio-client-card {
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: 100% !important;
  padding: 0;
}

.areeka-uxb-gallery-item > .col-inner {
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(24, 23, 28, .1);
}

.areeka-uxb-gallery-item .img,
.areeka-uxb-gallery-item .img-inner,
.areeka-uxb-gallery-item img {
  width: 100%;
}

.areeka-uxb-gallery-item img {
  height: 230px;
  object-fit: cover;
}

.areeka-uxb-gallery-item.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.areeka-uxb-gallery-item.is-featured img {
  height: 512px;
}

.areeka-uxb-gallery-item .image-caption {
  min-height: 52px;
  display: flex;
  align-items: center;
  background: #fff;
  color: var(--areeka-ink);
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.areeka-uxb-portfolio-clients .areeka-nd-portfolio-client-card > .col-inner {
  min-height: 158px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d8cfdd;
  border-radius: 9px;
  background: linear-gradient(145deg, #f8f2f9 0%, #ece4f0 100%);
  padding: 24px;
  box-shadow: 0 10px 28px rgba(24, 23, 28, .07);
}

.areeka-uxb-portfolio-clients .areeka-nd-portfolio-client-card.is-dark > .col-inner,
.areeka-uxb-portfolio-clients .areeka-nd-portfolio-client-card.is-supplied > .col-inner {
  border-color: rgba(255, 255, 255, .13);
  background: linear-gradient(145deg, #43244b 0%, #291b30 100%);
}

.areeka-uxb-portfolio-clients .areeka-nd-portfolio-client-card.is-light > .col-inner,
.areeka-uxb-portfolio-clients .areeka-nd-portfolio-client-card.is-supplied.is-light > .col-inner {
  border-color: #d8d0dc;
  background: linear-gradient(145deg, #f8f2f9 0%, #ebe4ef 100%);
}

.areeka-uxb-portfolio-clients .img,
.areeka-uxb-portfolio-clients .img-inner,
.areeka-uxb-portfolio-clients img {
  width: 100%;
  max-width: 300px;
}

.areeka-uxb-portfolio-clients img {
  height: 96px;
  object-fit: contain;
}

.areeka-uxb-blog-tools,
.areeka-uxb-blog-discovery {
  display: block;
}

.areeka-uxb-blog-tools > .section-content,
.areeka-uxb-blog-discovery > .section-content {
  width: 100%;
  max-width: none;
}

.areeka-uxb-blog-tools .areeka-nd-blog-tools__search,
.areeka-uxb-blog-tools .areeka-nd-blog-topics {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.areeka-uxb-blog-tools .areeka-nd-blog-topics > .col > .col-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.areeka-uxb-blog-tools .areeka-nd-blog-topics .button {
  margin: 0;
}

.areeka-uxb-blog-discovery .row,
.areeka-uxb-blog-discovery .col {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.areeka-uxb-blog-discovery .areeka-nd-blog-discovery__panel > .col-inner {
  padding: 26px;
}

@media (max-width: 900px) {
  .areeka-uxb-page-hero .areeka-nd-page-hero__actions,
  .areeka-uxb-page-hero .areeka-nd-page-hero__actions .col-inner {
    justify-content: flex-start;
  }

  .areeka-uxb-portfolio-gallery .areeka-nd-portfolio-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .areeka-uxb-portfolio-paths .areeka-nd-portfolio-paths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .areeka-uxb-portfolio-clients .areeka-nd-portfolio-clients__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .areeka-uxb-page-hero {
    width: min(100% - 24px, 1180px);
    padding: 24px !important;
  }

  .areeka-uxb-faq-jump__row > .col > .col-inner,
  .areeka-uxb-faq-jump .button {
    width: 100%;
  }

  .areeka-uxb-faq-group,
  .areeka-uxb-faq-next,
  .areeka-uxb-portfolio-cta {
    padding: 25px 20px !important;
  }

  .areeka-uxb-portfolio-paths .areeka-nd-portfolio-paths__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .areeka-uxb-portfolio-path {
    margin-bottom: 0;
  }

  .areeka-uxb-portfolio-path .banner {
    height: auto !important;
    min-height: 0;
    padding-top: clamp(250px, 68vw, 320px) !important;
  }

  .areeka-uxb-portfolio-gallery {
    width: 100% !important;
    padding: 42px 20px !important;
  }

  .areeka-uxb-portfolio-gallery .areeka-nd-portfolio-gallery__grid,
  .areeka-uxb-portfolio-clients .areeka-nd-portfolio-clients__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .areeka-uxb-gallery-item.is-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .areeka-uxb-gallery-item img,
  .areeka-uxb-gallery-item.is-featured img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .areeka-uxb-portfolio-clients .areeka-nd-portfolio-client-card > .col-inner {
    min-height: 130px;
    padding: 18px;
  }

  .areeka-uxb-portfolio-clients img {
    height: 82px;
  }
}