/**
 * Conferință / Colloque landing page.
 *
 * Loaded only on page 3791 (RO) and its Polylang translations - see
 * guru_conferinta_styles() in functions.php.
 *
 * Consolidated from the Elementor "Page Settings > Custom CSS" and the Footer
 * container custom CSS that previously lived separately on each language page.
 *
 * !important is kept throughout: these rules override Elementor's generated
 * per-element styles, which carry much higher specificity.
 *
 * GuruMedia - https://gurumedia.ro
 */

/* ==========================================================================
   Testimonial break (large pull-quote on the navy band)
   ========================================================================== */

.section-review.elementor-widget {
  text-align: center !important;
  padding: 48px 80px !important;
  position: relative !important;
}

.section-review.elementor-widget::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 8rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  z-index: 0;
}

.section-review.elementor-widget p:first-child {
  font-family: Merriweather, serif !important;
  font-style: italic !important;
  line-height: 1.85 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 820px !important;
  margin: 0 auto 20px auto !important;
  position: relative !important;
  z-index: 1 !important;
}

.section-review.elementor-widget p:last-child {
  font-family: Inter, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.section-review.elementor-widget p:last-child::before {
  content: "— ";
}

/* ==========================================================================
   Speaker cards
   ========================================================================== */

.tag-speaker {
  position: relative !important;
  overflow: hidden !important;
}

/* Green accent line along the bottom edge */
.tag-speaker::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #62A545, #3d7a28) !important;
}

.tag-speaker:hover {
  box-shadow: 0 12px 32px rgba(98, 165, 69, 0.15) !important;
}

.tag-speaker .bdt-ep-advanced-icon-box-description {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Role / credential pill above the bullet list */
.tag-speaker .bdt-ep-advanced-icon-box-description p:not(ul ~ p) {
  display: inline-block !important;
  width: fit-content !important;
  font-family: Merriweather, serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  color: #223A7B !important;
  line-height: 1.55 !important;
  background: rgba(34, 58, 123, 0.06) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  margin: 0 0 6px 0 !important;
}

/*
 * Modifiers used alongside .tag-speaker on cards whose paragraphs before the
 * list are prose rather than credentials. The pill rule above catches every p
 * that is not preceded by the ul, so on those cards a bio sentence or a lead-in
 * like "Arii de expertiză:" gets rendered as a chip. Both of these drop the
 * pill treatment and return the text to body copy:
 *
 *   .notag       no pill, no rule above the list
 *   .notag-line  no pill, rule above the list kept
 *
 * The declarations they undo are !important, so these have to be too, and the
 * doubled class keeps them ahead of the base rule.
 */
.tag-speaker.notag .bdt-ep-advanced-icon-box-description p:not(ul ~ p),
.tag-speaker.notag-line .bdt-ep-advanced-icon-box-description p:not(ul ~ p) {
  display: block !important;
  width: auto !important;
  font-family: inherit !important;
  font-weight: normal !important;
  font-size: inherit !important;
  color: rgb(45, 42, 38) !important;
  line-height: 1.7 !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

/* .notag only - the rule above the list separates the credential from the bio,
   so with no credential there is nothing to divide and it goes too, along with
   the padding that was only there to clear it. .notag-line deliberately skips
   this and keeps the divider. */
.tag-speaker.notag .bdt-ep-advanced-icon-box-description ul {
  border-top: none !important;
  padding-top: 0 !important;
}

.tag-speaker .bdt-ep-advanced-icon-box-description ul {
  width: 100% !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 12px !important;
  padding-top: 14px !important;
  border-top: 1.5px solid rgba(34, 58, 123, 0.12) !important;
}

.tag-speaker .bdt-ep-advanced-icon-box-description ul li {
  position: relative !important;
  padding-left: 16px !important;
  margin-bottom: 8px !important;
  line-height: 1.7 !important;
  color: rgb(45, 42, 38) !important;
  font-family: inherit !important;
  font-weight: normal !important;
  font-size: inherit !important;
}

.tag-speaker .bdt-ep-advanced-icon-box-description ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  background: #62A545 !important;
  border-radius: 1px !important;
}

/* ==========================================================================
   Hero info boxes - hairline separators between adjacent boxes
   RO uses boxes 1-2, FR uses 1-4; the last box in each never gets a divider.
   ========================================================================== */

.info-box-1,
.info-box-2,
.info-box-3,
.info-box-4 {
  position: relative !important;
}

.info-box-1::after,
.info-box-2::after,
.info-box-3::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translate(50%, -50%);
  width: 1px;
  height: 64%;
  background: rgba(34, 58, 123, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   CTA tag pills
   ========================================================================== */

.cta-tags {
  width: auto !important;
}

.cta-tags p {
  display: inline-block !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50px !important;
  padding: 5px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
  cursor: default !important;
}

.cta-tags p:hover {
  background-color: #62A545 !important;
  border-color: #62A545 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(98, 165, 69, 0.4) !important;
}

/* ==========================================================================
   Review cards
   ========================================================================== */

.recenzii .ui-e-item {
  position: relative !important;
  overflow: hidden !important;
}

.recenzii .ui-e-item::before {
  content: "\201C" !important;
  position: absolute !important;
  top: 8px !important;
  right: 16px !important;
  font-size: 5rem !important;
  line-height: 1 !important;
  color: #62A545 !important;
  opacity: 0.15 !important;
  font-family: Georgia, serif !important;
}

/* ==========================================================================
   Contact row

   Two placements exist:
   - RO (Conferință): inside the ivory FAQ section. Styled entirely through
     Elementor element settings - nothing for it here beyond the paragraph
     reset below.
   - FR (Colloque): still sitting on the navy footer band, which needs the
     light-on-dark treatment kept under .contact--on-navy.
   ========================================================================== */

/* Text Editor widgets ship the theme's paragraph margin; the box spacing is
   set on the widget itself, so the inner paragraph must not add to it. */
.contact-note p,
.contact-whatsapp p,
.contact-email p {
  margin: 0 !important;
}

/* --- Navy band variant (FR) ---------------------------------------------- */

.contact--on-navy {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}

.contact--on-navy .contact-note {
  padding-right: 32px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-right: 32px !important;
}

.contact--on-navy .contact-note p {
  font-family: Merriweather, serif !important;
  font-style: italic !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.contact--on-navy .contact-whatsapp {
  margin-right: 10px !important;
}

.contact--on-navy .contact-whatsapp p,
.contact--on-navy .contact-email p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.contact--on-navy .contact-whatsapp p:hover,
.contact--on-navy .contact-email p:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {

  .section-review.elementor-widget {
    padding: 40px 20px !important;
  }

  .tag-speaker .bdt-ep-advanced-icon-box-icon-heading {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .tag-speaker .bdt-ep-advanced-icon-box-icon {
    margin-bottom: 12px !important;
  }

  .tag-speaker .bdt-ep-advanced-icon-box-description p:not(ul ~ p) {
    text-align: center;
  }

  /* Centring suits a short chip, not a paragraph of prose. */
  .tag-speaker.notag .bdt-ep-advanced-icon-box-description p:not(ul ~ p),
  .tag-speaker.notag-line .bdt-ep-advanced-icon-box-description p:not(ul ~ p) {
    text-align: left;
  }

  /*
   * Under "Clinicieni și formatori" the opening line is the person's role, so
   * it is centred beneath the portrait on narrow screens while the bio that
   * follows stays left-aligned and readable.
   *
   * Scoped to the group's own class rather than to .notag / .notag-line: those
   * two do not line up with this group - .notag-line is exclusive to it, but
   * .notag is also on the Organizare card, which should not be affected.
   */
  .clinicieni .tag-speaker .bdt-ep-advanced-icon-box-description p:first-of-type {
    text-align: center;
  }

  .contact--on-navy.e-con,
  .contact--on-navy.e-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .contact--on-navy .contact-note {
    padding-right: 0 !important;
    border-right: none !important;
    margin-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-bottom: 16px !important;
    text-align: center !important;
  }

  .contact--on-navy .contact-whatsapp,
  .contact--on-navy .contact-email {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .contact--on-navy .contact-whatsapp p,
  .contact--on-navy .contact-email p {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   Announcement band - book motif

   Decorative only, behind the text on the navy band carrying the book launch
   note. Elementor reserves the container's ::before for its own background
   overlay, so this uses ::after.

   640x453 is deliberate: the band is 204px tall, and because the artwork's
   aspect ratio is fixed, anything wider is also taller and gets its top edge
   clipped - and that edge is what makes it read as a book. 740px is the
   practical ceiling.
   ========================================================================== */

.band-book > .e-con-inner {
  position: relative;
  z-index: 1;
}

.band-book::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 453px;
  z-index: 0;
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 170' fill='none'><path d='M120 116C94 100 56 90 16 97V64C56 57 94 67 120 82Z' fill='%23fff' fill-opacity='.055'/><path d='M120 116c26-16 64-26 104-19V64c-40-7-78 3-104 18Z' fill='%23fff' fill-opacity='.085'/><g stroke='%23fff' stroke-width='1.4' stroke-linecap='round'><path d='M120 82C94 67 56 57 16 64' stroke-opacity='.34'/><path d='M120 82c26-15 64-25 104-18' stroke-opacity='.34'/><path d='M120 116C94 100 56 90 16 97' stroke-opacity='.18'/><path d='M120 116c26-16 64-26 104-19' stroke-opacity='.18'/><path d='M120 82v34' stroke-opacity='.26'/><path d='M113 123C90 108 54 99 16 105' stroke-opacity='.10'/><path d='M127 123c24-15 60-24 97-18' stroke-opacity='.10'/></g></svg>");
}

@media (max-width: 767px) {
  .band-book::after {
    display: none;
  }
}

/* ==========================================================================
   .force-white - utility

   On mobile, pin the section to a flat white ground and drop its background
   overlay completely. Elementor paints a container's background overlay on
   ::before; this one uses background-attachment: fixed, which mobile browsers
   handle unreliably (iOS Safari in particular repaints it on every scroll
   frame). display:none also stops the browser fetching the overlay image at
   all, rather than just hiding it.
   ========================================================================== */

@media (max-width: 767px) {

  .force-white {
    background-color: #ffffff !important;
    background-image: none !important;
  }

  .force-white::before {
    display: none !important;
  }
}