/**
 *  Theme Name: QAgile Divi Child Theme
 *  Description: Custom Wordpress Theme
 *  Author: Krystian Kaczor
 *  Author URI: http://www.qagile.pl
 *  Version: 2.0.0
 *  License: GNU General Public License v2 or later
 *  License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *  Template: Divi
 */

/*==================================
=            Variables             =
==================================*/

:root {
  /* Colors */

  /*---- brand colors ---*/
  --black: ##121212;
  --white: #fff;

  /* --qagile-primary-color: #e0752d; */

  --qagile-primary-color: #e35a00;
  --qagile-primary-hover: #f57016;

  --qagile-secondary-color: #243760;
  --qagile-secondary-hover: #23528c;

  --qagile-gray: #6b7280;

  --qagile-secondary-gradient: linear-gradient(to right, #3a5083, #1a2a47);
  --qagile-secondary-gradient-hover: linear-gradient(to right,
      #243760,
      #15213a);

  --qagile-primary-gradient: linear-gradient(to right, #e0752d, #f57016);
  --qagile-primary-gradient-hover: linear-gradient(to right, #f57016, #f54e03);

  --qagile-hero-gradient: radial-gradient(circle at top right,
      var(--qagile-primary-color) 0%,
      #f54e03 45%,
      var(--qagile-secondary-color) 80%);

  /*---- brand colors ---*/

  --qagile-blue: #007bff;
  --qagile-green: #28a745;

  --qagile-orange-light: #ffd4b2;
  --qagile-orange-lighter: #fff8ec;
  --qagile-accent-blue: #60a7ff;

  --qagile-warning-orange: #ffc298;

  --qagile-light-gray: #e2dfd7;
  --qagile-gray-100: #f9f9f9;
  --qagile-gray-200: #f1f1f1;
  --qagile-gray-300: #e2e2e2;
  --qagile-gray-400: #999;
  --qagile-gray-500: #666;
  --qagile-gray-700: #aaa;
  --qagile-gray-800: #eee;
  --qagile-text-color: #333;
  --qagile-facebook-blue: rgb(66, 129, 244);
  --qagile-border-gray: rgb(186, 186, 186);

  /* QAgile RAG status */
  --qagile-success-green: #065f46;
  --qagile-success-background: #d1fae5;
  --qagile-warning-orange: #ffc298;
  --qagile-error: #b91c1c;
  --qagile-error-background: #fee2e2;

  /* Borders */
  --qagile-border-radius: 10px;
  --qagile-widget-border: 1px solid #e2e2e2;

  /* shadows */
  --qagile-shadow-light: 0px 4px 15px rgba(0, 0, 0, 0.1);
  --qagile-shadow-medium: 0px 8px 30px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --qagile-transition-default: all 0.2s ease;
  --qagile-transition-shadow: box-shadow 0.3s ease;
  --qagile-transition-transform: transform 0.3s ease;
}

/* ----------Display Posts Shortcode---------*/

.display-posts-listing .listing-item {
  clear: both;
  list-style-type: none;
}

.display-posts-listing img {
  float: left;
  margin: 0 10px 10px 0;
}

/* --- home page blurbs -- */

.et_pb_module.et_pb_blurb, .whats-included {
  padding: 5px;
  overflow: hidden;
  transition: var(--qagile-transition-shadow);
  box-shadow: var(--qagile-shadow-light);
  border-radius: var(--qagile-border-radius);
  border: 1px solid var(--qagile-light-gray);
  margin-bottom: 0px;
  transition: var(--qagile-transition-shadow);
}

/* --- what's included module on course page --- */

.whats-included {
  padding:20px;
}

.whats-included .price {
  font-size: 25px;
  color: var(--qagile-primary-color)
}

#exam-promo-box {
  padding: 5px;
  overflow: hidden;
  transition: var(--qagile-transition-shadow);
  box-shadow: var(--qagile-shadow-light);
  margin-bottom: 0px;
  border: 3px solid transparent;
  border-radius: var(--qagile-border-radius);
  background: linear-gradient(#fff, #fff) padding-box,
    var(--qagile-hero-gradient) border-box;
}

#exam-promo-box .et_pb_promo_description {
  color: var(--qagile-text-color);
}

#exam-promo-box .et_pb_module_header {
  color: var(--qagile-primary-color) !important;
  font-weight: bold;
  padding: 15px;
}

#exam-promo-box,
.et_pb_module.et_pb_blurb:hover {
  backface-visibility: hidden;
  box-shadow: var(--qagile-shadow-medium) !important;
}

.et_pb_module.et_pb_blurb .blurb-button {
  background: var(--qagile-primary-gradient) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
  /* Center the button */
  align-self: center;
  width: 100%;
}

.et_pb_module.et_pb_blurb .blurb-button:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

.home-page-blurb,
.offer-page-blurb {
  border-radius: 10px;
  padding: 20px !important;
  overflow: hidden;
  transition: var(--qagile-transition-shadow);
  border-color: var(--white);
  box-shadow: var(--qagile-shadow-light);
  margin-bottom: 0px;
}

.home-page-blurb:hover,
.offer-page-blurb:hover {
  filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%) invert(0%) sepia(0%) opacity(100%) blur(0px);
  backface-visibility: hidden;
  box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.22);
}

.blurb_3d_icon .et_pb_main_blurb_image img {
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

.blurb_3d_icon:hover .et_pb_main_blurb_image img {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) brightness(1.05)
    /* slight brightness boost */
    saturate(1.2)
    /* boost brand colors */
    contrast(1.05)
    /* make edges pop */
  ;
}

.blurb_3d_icon .et_pb_main_blurb_image img {
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

.blurb_3d_icon:hover .et_pb_main_blurb_image img {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)) brightness(1.05)
    /* slight brightness boost */
    saturate(1.2)
    /* boost brand colors */
    contrast(1.05)
    /* make edges pop */
  ;
}

/* ------------------------ FONTS ---------------------- */

body {
  font-family: Lato, sans-serif;
  font-weight: 400;
}

#post-content,
article,
p {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none hyphens: none;
}

#post-content,
article {
  clear: both;
}

#post-content p,
article p {
  clear: both;
}

.widget-area .widget {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  word-wrap: normal;
}

.site-content article {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
}

h1,
h2,
h3,
h4,
h5,
.lead {
  font-family: Oswald, Helvetica, Arial, sans-serif;
  font-size: 120%;
}

/* Page, Article Title */

h1.et_pb_module_header {
  color: var(--white) !important;
}

/* Blog post title */

.et_pb_title_container h1.entry-title {
  color: var(--white) !important;
  padding: 15px;
}

#post_meta_title_box .et_pb_title_container {
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: var(--qagile-primary-color);
}

#post_meta_title_box .et_pb_title_meta_container {
  border-top: 1px solid var(--white);
}

article p.lead {
  clear: right;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 22px;
}

/* used on landing pages */
h2.section-header {
  font-size: 33px;
  text-align: center;
  text-transform: capitalize;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

.clr {
  clear: both;
}

.ctr {
  text-align: center;
}

.ctrbox {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nofloat {
  float: none;
}

.txtbig {
  font-size: 130%;
}

.txtsml {
  font-size: 88%;
}

.hide {
  display: none !important;
}

blockquote p {
  font: normal 1.3em/1.5em Lato, Helvetica, sans-serif;
}

blockquote {
  margin: 0 0 1.3em;
  border: 0;
  padding-left: 0;
}

.et_pb_heading_0 .et_pb_heading_container h2,
.et_pb_heading .et_pb_heading_container h2,
.et_pb_heading .et_pb_heading_container h3,
.et_pb_heading .et_pb_heading_container h4 {
  font-weight: 500;
}

#post-content blockquote p,
#main-content blockquote p {
  background: #f9f9f9;
  border-left: 10px solid #243760;
  /*margin: 1.5em 10px;*/
  padding: 0.5em 10px;
  quotes: "\201C" "\201D" "\2018" "\2019";
  font-style: italic;
  font-size: 16px;
}

#post-content h2 {
  padding-top: 1.5em;
}

#post-content h3 {
  padding-top: 1.5em;
}

/* tables in posts */

/* Base table styling inside Divi post content */
.et_pb_post_content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 24px 0;
  background: var(--white);
  border: 1px solid var(--qagile-gray);
  border-top: 4px solid var(--qagile-primary-color);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.et_pb_post_content th,
.et_pb_post_content td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--qagile-gray-200);
}

.et_pb_post_content thead th {
  background: var(--qagile-secondary-color);
  color: #fff;
  font-weight: 700;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
}

.et_pb_post_content tbody tr:nth-child(even) {
  background: var(--qagile-gray-300);
}

.et_pb_post_content tbody tr:hover {
  background: var(--qagile-orange-lighter);
}

.et_pb_post_content caption {
  caption-side: bottom;
  text-align: left;
  padding: 8px 2px 0;
  color: var(--qagile-gray-400);
  font-size: 0.9rem;
}

/* Links and emphasis */
.et_pb_post_content td a {
  color: var(--qagile-primary-color);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.et_pb_post_content td a:hover {
  color: var(--qagile-primary-hover);
  border-bottom-color: var(--qagile-primary-color);
}

/* Scroll wrapper (auto-added by JS) */
.et_pb_post_content .qa-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* Mobile: stack rows into cards with labels */
@media (max-width: 800px) {
  .et_pb_post_content table {
    border-radius: 12px;
  }

  .et_pb_post_content thead {
    display: none;
  }

  .et_pb_post_content tbody tr {
    display: block;
    border-bottom: 2px solid var(--qagile-gray-300);
  }

  .et_pb_post_content tbody tr:last-child {
    border-bottom: none;
  }

  .et_pb_post_content td {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
    padding: 12px 14px;
  }

  .et_pb_post_content td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    min-width: 120px;
    color: var(--qagile-gray-400);
    font-weight: 600;
  }
}

/* Fix for Divi modules clipping focus rings */
.et_pb_post_content * {
  overflow: visible;
}

.padding-mid {
  font: normal 1.3em/1.5em Lato, Helvetica, sans-serif;
  margin: 150px auto;
  text-align: center;
}

.lft {
  float: left;
}

.rgt {
  float: right;
}

.w100 {
  width: 100%;
  height: auto;
}

.h400 {
  height: 320px;
}

.cytat h1 {
  font-size: 50px;
  line-height: 70px;
  padding-top: 90px;
}

@media (max-width: 479px) {
  .et_pb_post {
    margin-bottom: 42px;
  }

  .et_pb_post h2 {
    font-size: 22px;
    padding-bottom: 0;
  }

  .et_pb_post .post-meta {
    color: #666;
    font-size: 14px;
  }
}

@media screen and (max-width: 763px) {
  .cytat .et_pb_row h1 {
    font-size: 22px;
    line-height: 26px;
  }
}

.padding0,
.padding0 .et_pb_slide_description {
  padding-top: 0;
  padding-bottom: 0;
}

/* ------------------------ COLORS ---------------------- */

.et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3 {
  text-shadow: 1px 1px 4px var(--black);
}

.et_pb_slide_content {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 0.5em;
}

.et_pb_pricing_heading_blue {
  background-color: var(--qagile-secondary-color);
  margin-bottom: 17px;
  padding: 11px 0 3px;
}

h1,
h2,
h3,
h4,
#wp-calendar caption,
#top-menu .nowe a,
.et_mobile_menu .nowe a,
p.nowe,
.et_search_icon:hover,
.mobile_menu_bar:before,
.et-social-icon a:hover,
.et_pb_sum,
.et_pb_pricing li a,
.et_overlay:before,
.entry-summary p.price ins,
.woocommerce div.product span.price,
.woocommerce-page div.product span.price,
.woocommerce #content div.product span.price,
.woocommerce-page #content div.product span.price,
.woocommerce div.product p.price,
.woocommerce-page div.product p.price,
.woocommerce #content div.product p.price,
.woocommerce-page #content div.product p.price,
.oferta dl dt {
  color: var(--qagile-primary-color) !important;
}

.widget_search #searchsubmit:hover {
  background-color: #60a7ff;
  /* Keep original hover for search submit */
  color: #fff !important;
}

input.et_pb_contact_submit {
  background: #60a7ff !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
  /* Center the button */
}

input.et_pb_contact_submit:hover {
  background: var(--qagile-secondary-hover) !important;
  /* Analogous hover color */
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
  /* Ensure text color remains white on hover */
}

input.et_pb_contact_submit:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

.colordark {
  color: #333;
}

a.small-button,
a.big-button,
a.icon-button,
.et_pb_post .more {
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
}

a.small-button.smallblue,
a.big-button.bigblue {
  background: var(--qagile-secondary-gradient) !important;
  color: #fff !important;
}

a.small-button.smallblue:hover,
a.big-button.bigblue:hover {
  background: var(--qagile-secondary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

a.small-button.smallblue:active,
a.big-button.bigblue:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

a.small-button.smallorange,
a.big {
  background: var(--qagile-primary-gradient) !important;
  color: #fff !important;
}

a.small-button.smallorange:hover,
a.big:hover {
  background: var(--qagile-primary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

a.small-button.smallorange:active,
a.big:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

body .et_pb_post .more:hover,
body .et_pb_post .et_pb_more_button:hover {
  background: var(--qagile-primary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

body .et_pb_post .more:active,
body .et_pb_post .et_pb_more_button:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

body .et_pb_post .more:hover::after,
body .et_pb_post .et_pb_more_button:hover::after {
  display: inline-block;
  margin-left: 12px;
  /* Increased margin on hover */
  transition: var(--qagile-transition-default);
}

#footer-widgets .et_pb_widget a,
#et-info * {
  color: var(--white);
}

body .et_pb_post .et_pb_more_button {
  /* Properties moved to general button styles */
  clear: both;
}

.post-tags,
.post-tags a {
  color: #999;
  font-size: 12px;
}

.post-tags a:hover {
  color: var(--qagile-secondary-color);
}

/* ------------------------ FOOTER ---------------------- */

.wp-pagenavi {
  border-top: 1px solid #e2e2e2;
  clear: both;
  margin-bottom: 0px;
  padding-top: 13px;
  text-align: center;
}

.wp-pagenavi .page,
.wp-pagenavi .nextpostslink,
.wp_pagenavi .last {
  padding: 3px 8px;
}

body div.wp-pagenavi span.current,
body div.wp-pagenavi a:hover {
  background-color: var(--qagile-primary-color) !important;
  color: #fff !important;
  border-radius: 3px;
  padding: 3px 8px;
}

.et_pb_contact_right p input {
  width: 55px !important;
}

.post-password-form {
  width: 400px;
  margin: 2em auto;
  padding: 200px 20px;
}

.post-password-form input {
  background-color: var(--qagile-gray-200);
  border: 0;
  border-radius: 3px;
  padding: 8px 14px;
  margin: 5px;
}

.post-password-form input[type="submit"] {
  background-color: var(--qagile-primary-color);
  color: #fff;
  font-weight: bold;
}

.post-password-form input[type="submit"]:hover {
  color: var(--qagile-orange-dark);
}

#main-footer .mc4wp-form {
  margin: 0;
}

.mc4wp-form p {
  padding-left: 6px;
  padding-bottom: 12px;
}

#mc4wp-form-1 input {
  border: 0;
  border-radius: 3px;
  padding: 8px 12px;
  margin: 5px;
}

#mc4wp-form-1 .mc4wp-alert {
  border: 0;
  border-radius: 3px;
  padding: 8px 12px;
  margin: 5px;
  opacity: 0.9;
  margin-top: 45px;
  font-size: 88%;
}

#mc4wp-form-1 input#mc4wp_email {
  background: var(--white);
  color: var(--qagile-primary-color) !important;
  width: 60%;
  float: left;
}

#mc4wp-form-1 input[type="submit"] {
  color: var(--white) !important;
  background: var(--qagile-secondary-gradient);
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
  /* Center the button */
}

#mc4wp-form-1 input[type="submit"]:hover {
  background: var(--qagile-secondary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

#mc4wp-form-1 input[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

/* ------------------------ THEME ---------------------- */

.et_pb_posts article,
.et_pb_posts #post-content {
  clear: both;
  padding-top: 2em;
}

p.nowe {
  font-weight: bold;
}

.ksiazka .et_pb_slide_content {
  background: none;
}

.ksiazka .et_pb_slide_content h2 {
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.footer-widget h4.title,
#footer-widgets .footer-widget li:before {
  color: var(--white) !important;
  border-color: var(--white) !important;
}

#et-top-navigation {
  font-weight: 500;
}

.et_mobile_menu .fa-li {
  position: static;
}

#top-menu .fa-li {
  left: -0.14286em;
  position: absolute;
  text-align: center;
  top: 1.1em;
  width: 1.14286em;
}

#copyright,
p#copyright a {
  color: var(--white);
  text-align: center;
}

.booking_form .control-group {
  margin: 15px auto !important;
  width: 450px !important;
}

#main-footer {
  background-color: var(--qagile-primary-color) !important;
}

dl dt {
  font-family: Oswald, Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  margin: 0.8em 0 0.4em;
}

/* .et_pb_testimonial_meta {text-align:center;}

.logosy .et_pb_gallery_items {max-height:90px !important;}

.logosy .et_overlay,
.call-to-action .et_pb_promo_description

     {display:none !important;}

.logosy .et_post_gallery .et_pb_gallery_image img {
    display:block;
    width:140px !important;
    min-width:140px !important;
    height:87px !important;
    min-height:87px !important;
}

.logosy div.et_pb_gallery_item {
    width:140px !important;
    margin:0 20px;
    position:static !important;
    float:left;
}
 */

.call-to-action .et_pb_promo_button,
a.et_pb_more_button,
.resource-download-button,
a.et_pb_more_button,
.resource-download-button,
section.hero .et_pb_button_one {
  background: var(--qagile-primary-gradient-hover) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
}

.szkolenia h4 {
  text-align: center;
  margin-bottom: 0.3em;
}

.margines .et_pb_text {
  margin-top: 30px;
  margin-bottom: 0;
}

.et_pb_post h2 {
  margin-top: 0;
}

.et_pb_contact_form * {
  font-family: "Open Sans", Arial, sans-serif;
}

/* ------------------------ CUSTOM ---------------------- */

.utcw-1gph9f3 span,
.utcw-1gph9f3 a {
  border-radius: 3px;
  padding: 3px 6px;
  transition: var(--qagile-transition-default);
}

.tagcloud a {
  font-size: inherit !important;
}

/* ------- blog page grid settings -------- */
/* laptop only */
@media only screen and (min-width: 981px) {
  .et-blog-css-grid>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 20px;
  }

  /* position  pagination element on the bottom of gri d */
  .et-blog-css-grid>div>div {
    width: 100%;
    grid-column: 1 / -1;
    position: static;
    margin-bottom: 20px;
  }
}

#gridcards article {
  border-radius: 10px;
  padding: 5px;
  overflow: hidden;
  /* Add this to contain the scaled image */
  transition: var(--qagile-transition-shadow);
  border-color: var(--white);
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 0px;

  display: flex;
  flex-direction: column;
}

#gridcards article:hover {
  filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%) invert(0%) sepia(0%) opacity(100%) blur(0px);
  backface-visibility: hidden;
  box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.22);
}

#gridcards article .entry-featured-image-url {
  margin-bottom: 10px;
  display: block;
  /* Ensure the image is treated as a block for transform */
  transition: var(--qagile-transition-transform);
  /* Add transition for smooth scaling */
}

#gridcards article img {
  max-width: 100%;
  height: auto;
  display: block;
  /* Ensure it behaves as a block for max-width */
}

#gridcards article:hover .entry-featured-image-url {
  transform: scale(1.1);
  /* Scale the image up by 10% on article hover */
}

#gridcards article .entry-title {
  font-size: 16pt;
  padding: 15px;
  color: var(--qagile-secondary-color) !important;
  font-weight: 500;
}

#gridcards .post-meta {
  padding-left: 15px;
  padding-right: 15px;
}

#gridcards article .post-content {
  padding-left: 15px;
  padding-right: 15px;
  flex-grow: 1;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  color: var(--black);
}

#gridcards article.et_pb_post .post-content .post-content-inner {
  margin-bottom: 15px;
  /* Lub mała wartość, np. 5px */
}

/* ----------- */

#gridcards article .post-content p {
  color: #000;
}

#gridcards article:nth-child(odd) {
  /* background: #fff8ec; */
}

#gridcards article .post-meta .published {
  font-size: 14px;
  color: #6b7280;
}

#gridcards article .post-meta .published::before {
  font-size: 14px;
  font-family: "FontAwesome";
  font-weight: 200;
  content: "\f073";
  display: inline-block;
  /* Good practice */
  margin-right: 0.4em;
  color: #6b7280;
}

#gridcards article .more-link {
  background: var(--qagile-primary-color) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
  /* Center the button */
  align-self: center;
  width: 100%;
}

#gridcards article .more-link:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

/* -- end blog page grid settings -------- */

/* -- post content on post page -- */
.et_pb_column.et_pb_column_2_3 .et_pb_module.et_pb_post_title,
.et_pb_column.et_pb_column_2_3 #post-content {
  margin-right: 10px;
}

#post-content .et_pb_row {
  width: 100%;
}

/* blog slider on home page*/

#blog_slider .swiper-wrapper {
  height: auto;
  /* Allow the slide to adopt the height determined by align-items: stretch */
  display: flex;
  /* This helps if you want the article to reliably take up 100% height of the slide */
}

#blog_slider .swiper-wrapper .dipl_blog_post_slide {
  align-items: stretch !important;
}

#blog_slider article {
  border: 1px solid var(--qagile-light-gray);
  border-radius: 10px;
  padding: 5px;
  overflow: hidden;
  transition: var(--qagile-transition-shadow);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-color: var(--qagile-light-gray);
  margin-bottom: 0;
  background-color: var(--white) !important;
  flex-direction: column;
  height: 100%;
}

#blog_slider article .dipl_blog_slider_read_more_link .et_pb_button {
  background: var(--qagile-primary-gradient) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
}

#blog_slider article .dipl_blog_slider_read_more_link .et_pb_button:hover {
  background: var(--qagile-primary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

#blog_slider article .dipl_blog_slider_read_more_link .et_pb_button:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

#blog_slider article .dipl_blog_slider_read_more_link .et_pb_button::after {
  content: "\35";
  display: inline-block;
  margin-top: 3px;
  margin-left: 8px;
  transition: var(--qagile-transition-default);
}

#blog_slider article .dipl_blog_slider_read_more_link .et_pb_button:hover::after {
  margin-left: 12px;
}

#blog_slider .post-meta,
#blog_slider article .post-content {
  padding-left: 15px;
  padding-right: 15px;
}

#blog_slider .dipl_blog_slider_content_wrapper {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

#blog_slider article .dipl_blog_slider_content {
  flex-grow: 1;
  /* Pozwala temu elementowi zająć dostępną wolną przestrzeń w pionie */
  color: #000;
}

#blog_slider article:hover {
  filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%) invert(0%) sepia(0%) opacity(100%) blur(0px);
  backface-visibility: hidden;
  box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.22);
}

#blog_slider article .dipl_blog_slider_image_link {
  margin-bottom: 10px;
  padding: auto;
}

#blog_slider article .dipl_blog_slider_post_title {
  font-size: 16pt;
  padding: 15px;
  color: var(--qagile-secondary-color) !important;
  font-weight: 500;
}

#blog_slider .swiper-container {
  padding-bottom: 5px;
}

/* blog slider end */

/*  -- future events widget on blog and training page -- */
/* select direct parent of widget to style the container div */
div:has(> #custom_html-3) {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
}

div:has(> #custom_html-3) .events-widget-list {
  list-style: none;
}

div:has(> #custom_html-3) .events-widget-list li {
  font-weight: bold;
  font-size: 10pt;
}

div:has(> #custom_html-3) .events-widget-list li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

div:has(> #custom_html-3) .events-widget-list a {
  display: block;
  font-size: 12pt;
  color: var(--qagile-secondary-color) !important;
}

.wpdevbk {
  margin-left: 10%;
  width: 100%;
}

.et_pb_contact p input.wpcf7-form-control,
.et_pb_contact p textarea {
  font-size: 14px;
  color: #333 !important;
}

.et_pb_contact p.wyslij input.wpcf7-form-control.wpcf7-submit {
  display: block;
  float: right !important;
  background: #60a7ff !important;
  /* Keep original color */
  color: var(--white) !important;
  border: none !important;
  /* Remove border */
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  /* New border-radius */
  padding: 15px 30px !important;
  /* New padding */
  font-size: 16px !important;
  /* New font-size */
  font-weight: 600 !important;
  /* New font-weight */
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  min-width: 200px !important;
  /* New min-width */
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  /* New box-shadow */
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
  /* Center the button */
}

input.wpcf7-form-control.wpcf7-submit:hover {
  background: var(--qagile-secondary-hover) !important;
  /* Analogous hover color */
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
  /* Ensure text color remains white on hover */
  border: none !important;
  /* Remove border on hover */
}

input.wpcf7-form-control.wpcf7-submit:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

.et_pb_contact p.wyslij {
  padding-bottom: 0;
  overflow: auto;
  float: right;
}

.wpcf7-form .wpcf7-response-output {
  clear: both;
  border-radius: 3px;
  padding: 6px 12px;
  margin-top: 6em;
}

.wpcf7-form .wpcf7-mail-sent-ok {
  background: #afd2a1;
  border-color: #afd2a1;
}

.wpcf7-form .wpcf7-validation-errors {
  background: #fbeb99;
  border-color: #fbeb99;
}

/* training pay now section */
section.em-buy-now-section {
  border: 1px solid var(--qagile-primary-color);
  padding: 10px;
  float: left;
  width: 100%;
  margin-bottom: 1em;
}

#et-boc .em-buy-now-section .et_pb_cta_1.et_pb_promo .et_pb_promo_button.et_pb_button {
  background: var(--qagile-primary-gradient) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
}

/* online location header text */
div#et-boc .em-item-header .em-online-location {
  padding-bottom: 1em;
}

/* book now link in prices section */
div#et-boc .em-item-header .em-book-now-button {
  background: var(--qagile-primary-gradient) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px 0 !important;
}

div#et-boc .em-item-header .em-book-now-button:hover {
  background: var(--qagile-primary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

div#et-boc .em-item-header .em-book-now-button:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

div#et-boc .em-item-header .em-book-now-button:hover[data-icon]:not([data-icon=""]):after {
  content: attr(data-icon);
  color: #ffffff;
  line-height: inherit;
  font-size: inherit !important;
  margin-left: 0.3em;
  left: auto;
  font-family: ETmodules !important;
  transition: var(--qagile-transition-default);
  /* Add transition */
}

div#et-boc .em-item-header .em-book-now-button:hover::after {
  margin-left: 12px;
  /* Increased margin on hover */
}

#et-boc .em-buy-now-section .et_pb_cta_1.et_pb_promo .et_pb_promo_button.et_pb_button:hover {
  background: var(--qagile-primary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

#et-boc .em-buy-now-section .et_pb_cta_1.et_pb_promo .et_pb_promo_button.et_pb_button:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

#et-boc .em-buy-now-section .et_pb_cta_1.et_pb_promo .et_pb_promo_button.et_pb_button[data-icon]:not([data-icon=""]):after {
  content: attr(data-icon);
  color: #ffffff;
  line-height: inherit;
  font-size: inherit !important;
  margin-left: 0.3em;
  left: auto;
  font-family: ETmodules !important;
  font-weight: 400 !important;
  transition: var(--qagile-transition-default);
  /* Add transition */
}

#et-boc .em-buy-now-section .et_pb_cta_1.et_pb_promo .et_pb_promo_button.et_pb_button:hover:after {
  left: auto;
  margin-left: 12px;
  /* Increased margin on hover */
}

/* training booking form */

.em-booking-form table.em-tickets {
  border: none;
}

.em-booking-form label {
  display: inline-block;
  width: 100%;
}

div.em-booking-message {
  background-color: var(--qagile-warning-orange);
  border: 0;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

div.em-booking-message-success {
  background-color: var(--qagile-success-green);
  border: 0;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

p.input-field-data_privacy_consent label {
  margin-bottom: 1em;
}

.em-booking-login {
  display: none;
}

section.em-event-bookings {
  border: 1px solid var(--qagile-primary-color);
}

.em-event-bookings {
  padding: 10px;
  float: left;
  width: 100%;
}

.em-booking-form-details input.input,
.em-booking-form-details textarea,
.em-booking-form-details select,
select.em-ticket-select {
  border: 1px solid var(--qagile-primary-color);
}

.em-booking-form-details input.input,
.em-booking-form-details textarea {
  /*border-radius: 3px;*/
  padding: 6px 4px;
  width: 100%;
}

.et-db #et-boc section.em-item-header .et_pb_row {
  width: 100%;
}

.em-booking-buttons {
  text-align: center;
}

h3.em-booking-section-title {
  padding-bottom: 10px;
  padding-top: 10px;
}

/** Rezerwuj button */

input.em-booking-submit {
  background: var(--qagile-primary-gradient) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
}

input.em-booking-submit:hover {
  background: var(--qagile-primary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

input.em-booking-submit:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

/* Events Table on Terminy Page */

.home-kalendarz .et_pb_slide_description .et_pb_more_button {
  color: #fff !important;
}

/* if trainings table inside post body (2/3) column */
.et_pb_column.et_pb_column_2_3 table.trainings-table {
  font-size: 14px;
}

.et_pb_column.et_pb_column_2_3 .et_pb_button.et_pb_promo_button {
  font-size: 16px;
  margin-top: 5px;
}

table.events-table {
  border: 0;
}

table.events-table * {
  max-width: 960px !important;
}

table.events-table tr {
  display: block;
  background: rgba(255, 255, 255, 0.75);
  margin: 8px 0;
}

table.events-table thead {
  display: none;
}

table.events-table thead tr {
  padding: 10px 0;
  margin-bottom: 0;
}

table.events-table thead .event-description {
  padding-left: 24px;
}

table.events-table tr td:first-child {
  font-size: 0.8em;
}

table.trainings-table {
  border: 1px solid #eeee;
  width: 100%;
}

table.trainings-table thead th {
  background-color: var(--qagile-primary-color);
  color: white;
}

table.trainings-table tr:nth-child(even) {
  background-color: var(--qagile-orange-light);
}

/*--- don't shrink price column ----*/
table.trainings-table td:nth-child(5) {
  min-width: 150px;
}

table.trainings-table td {
  max-width: 500px;
}

table.trainings-table tr th {
  padding: 9px 24px;
}

table.trainings-table tr td {
  padding: 6px 24px;
}

.entry-content tr td {
  border: 0 none;
  padding: 10px 24px;
}

.home-kalendarz,
.home-kalendarz .et_pb_slide_description {
  padding-top: 1em !important;
  padding-bottom: 1em !important;
}

.home-kalendarz .et_pb_slide {
  box-shadow: none;
}

.event-categories li {
  display: inline-block;
  list-style: none;
  background-color: #f0f0f0;
  padding: 7px 12px;
  border-radius: 3px;
  margin: 5px 10px;
}

.rounded {
  border: 1px solid #999;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/* ----------------- YOAST BREADCRUMBS --------------------------- */

.breadcrumbs {
  float: left;
  width: 75%;
  margin-bottom: 1em;
  position: relative;
  z-index: 1;
  padding-top: 1%;
}

@media screen and (max-width: 980px) {
  .breadcrumbs {
    width: 100%;
    padding-top: 1%;
  }
}

/* -----------------icons in post mata ---------------------- */

.et_pb_title_meta_container span.author.vcard:before,
.post-meta span.author.vcard:before {
  content: "";
  display: inline-block;
  margin: 0 5px 0 0;
  box-sizing: border-box;
  font-family: "ETmodules";
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
}

.et_pb_title_meta_container span.comments-number:before,
.post-meta span.comments-number:before {
  content: "w";
  display: inline-block;
  margin: 0 5px 0 0;
  box-sizing: border-box;
  font-family: "ETmodules";
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
}

/*--------- fix for author meta in post title --------------- */

span.fn,
span.fn a {
  display: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  text-decoration: inherit;
}

/**
 * AddToCalendar Blue Style
 * http://addtocalendar.com
 */

/* Base */

.addtocalendar var {
  display: none;
}

.addtocalendar {
  position: relative;
  display: inline-block;
  background: transparent !important;
}

.atcb-link {
  display: block;
  outline: none !important;
  cursor: pointer;
}

.atcb-link:focus~ul,
.atcb-link:active~ul,
.atcb-list:hover {
  visibility: visible;
}

.atcb-list {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 170px;
  z-index: 900;
}

.atcb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

.atcb-item {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  float: none;
  text-align: left;
}

.atcb-item-link {
  text-decoration: none;
  outline: none;
  display: block;
}

.atcb-item .atcb-item:hover {
  position: relative;
  z-index: 900;
  cursor: pointer;
  text-decoration: none;
  outline: none;
}

/* Blue */

.atc-style-blue .atcb-link,
.atc-style-blue .atcb-link:hover,
.atc-style-blue .atcb-link:active,
.atc-style-blue .atcb-link:focus {
  margin: 0;
  padding: 7px 25px;
  color: #fff;
  font-family: "Verdana";
  font-size: 14px;
  text-decoration: none;
  outline: none;
  line-height: 20px;
  vertical-align: middle;
  background: rgb(66, 129, 244);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.13) inset;
  border-radius: 4px;
  zoom: 1;
}

.atc-style-blue .atcb-list {
  width: 170px;
  border: 1px solid var(--qagile-border-gray);
  border-radius: 2px;
  box-shadow: 0 0 5px var(--qagile-gray-700);
}

.atc-style-blue .atcb-list,
.atc-style-blue .atcb-item {
  background: #fff;
  color: #000;
}

.atc-style-blue .atcb-item,
.atc-style-blue .atcb-item-link {
  line-height: 1.3em;
  vertical-align: middle;
  zoom: 1;
}

.atc-style-blue .atcb-item-link,
.atc-style-blue .atcb-item-link:hover,
.atc-style-blue .atcb-item-link:active,
.atc-style-blue .atcb-item-link:focus {
  color: #000;
  font-family: "Verdana";
  font-size: 14px;
  text-decoration: none;
  outline: none;
  padding: 5px 15px;
}

.atc-style-blue .atcb-item-link:hover,
.atc-style_blue .atcb-item:hover {
  background: rgb(66, 129, 244);
}

@media only screen and (min-width: 1350px) {
  .et_pb_section {
    padding: 0px 0 !important;
  }
}

/* ---- dodaj czapeczkę przed Online w menu glównynm --- */

nav#top-menu-nav li.plaftorma-online a:before {
  content: "\f19d";
  font-family: FontAwesome;
  display: inline-block !important;
  padding-right: 5px;
}

/** -- zmiana szerokości menu 2giego poziomu --*/

#top-menu li li a {
  width: 300px;
}

.nav li ul {
  width: 340px;
}

.nav li li ul {
  left: 340px;
}

.nav li.et-reverse-direction-nav li ul {
  right: 340px;
}

/* -- shadow for submenu -- */
.nav li>ul.sub-menu {
  box-shadow: var(--qagile-shadow-light) !important;
}

/*----- hide schema.org event data -- */

.event-wrapper {
  display: none;
}

/* ---- icons for mobile menu -- */
.dt-icons {
  fill: var(--qagile-primary-color);
}

/* Table Styles */
.entry-content table,
body.et-pb-preview #main-content .container table {
  border: 1px solid var(--qagile-gray-800);
  margin: 0 0 15px 0;
  text-align: left;
  width: 100%;
}

.entry-content tr th,
.entry-content thead th,
body.et-pb-preview #main-content .container tr th,
body.et-pb-preview #main-content .container thead th {
  color: #555;
  font-weight: bold;
  padding: 9px 24px;
}

.entry-content tr td,
body.et-pb-preview #main-content .container tr td {
  border-top: 1px solid #eee;
  padding: 6px 24px;
}

/* Widget on normal page - Grid container for event items */
.upcoming-trainings-page-widget .em.pixelbones.em-list.em-events-list {
  grid-template-rows: none;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: stretch;
  justify-items: center;
  grid-gap: 10px;
  display: grid;
}

.upcoming-trainings-widget-item-startdate-hidden,
.upcoming-trainings-widget-item-enddate-hidden {
  display: none;
}

/* If the list is empty, display block to show the message */
.upcoming-trainings-page-widget .em.pixelbones.em-list.em-events-list:has(p.no-events-message) {
  display: block;
}

/* Message for no events */
p.no-events-message {
  font-size: 20px;
  text-align: center;
}

p.no-events-message:before {
  font-family: "FontAwesome";
  font-weight: normal;
  content: "\f05a";
  /* FontAwesome info icon */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 7px;
}

/* Overall Widget Container (ID selector, unchanged) */
#upcoming-trainings-widget {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--qagile-light-gray);
  padding-bottom: 10px;
  transition: var(--qagile-transition-shadow);
  box-shadow: var(--qagile-shadow-light);
  padding: 10px;
  /* Ensure padding is consistent */
}

/* Widget Header (class selector, unchanged) */
h2.upcoming-trainings-widget-header {
  font-size: 22px;
  font-weight: 800;
  color: var(--qagile-secondary-color) !important;
  text-align: center;
  box-shadow: none !important;
}

h2.upcoming-trainings-widget-header::before {
  font-family: "FontAwesome";
  font-weight: 500;
  content: "\f19d";
  /* FontAwesome university/graduation cap icon */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 7px;
}

/* event items border & shadow */

.upcoming-trainings-page-widget .event-item,
#upcoming-trainings-widget .event-item,
.upcoming-trainings-page-list .event-item {
  transition: var(--qagile-transition-shadow);
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--qagile-light-gray);
  border-radius: 10px;
  background-color: #fff;
  padding: 15px;
}

/* List view layout */
.upcoming-trainings-page-list .event-item {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 25px;
  margin-bottom: 10px;
  width: 100%;
  max-width: none;
  min-height: 90px;
}

/* Base class for each event card */
.upcoming-trainings-page-widget .event-item,
#upcoming-trainings-widget .event-item {
  margin-bottom: 10px;
  overflow: hidden;
  display: flex;
  /* For flex layout of children */
  flex-direction: column;
  /* Stack children vertically */
  justify-content: space-between;
  /* Push footer to bottom */
  float: left;
  flex: none;
  width: 100%;
}

.upcoming-trainings-page-widget .event-item {
  max-width: 250px;
}

.event-item:hover {
  box-shadow: var(--qagile-shadow-medium) !important;
}

.upcoming-trainings-widget-list .event-item:first-child {
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    0px -4px 6px -1px rgba(0, 0, 0, 0.08);
}

.upcoming-trainings-widget-list .event-item:first-child:hover {
  box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.22);
}

.event-item .name {
  font-size: 16px !important;
  color: var(--qagile-secondary-color) !important;
  font-weight: 500;
}

/* Add space for item on page, since it's narrow */
.upcoming-trainings-page-widget .event-item>div {
  margin-bottom: 5px;
}

.event-item .name:hover {
  color: var(--qagile-primary-hover) !important;
}

.event-item .time {
  display: flex;
  align-items: baseline;
  gap: 15px;
}

.event-item .time .date,
.event-item .time .duration {
  font-size: 16px;
  /* Increase from 14px */
  color: var(--qagile-gray);
  font-weight: 600;
  white-space: nowrap;
  /* Prevent wrapping */
}

.event-item .time .date::before {
  font-family: "FontAwesome";

  /* Adjust tags and prices layout for list view */
  .upcoming-trainings-page-list .event-item .meta-info {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 300px;
  }

  /* Tags container for list view */
  .upcoming-trainings-page-list .event-item .tags {
    margin: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  /* Prices container for list view */
  .upcoming-trainings-page-list .event-item .prices {
    margin: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: auto;
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
    .upcoming-trainings-page-list .event-item .meta-info {
      width: 100%;
      flex-wrap: wrap;
    }

    .upcoming-trainings-page-list .event-item .tags,
    .upcoming-trainings-page-list .event-item .prices {
      flex-wrap: wrap;
    }

    body {
      margin: revert;
    }

    .et_pb_section .et_pb_row .et_pb_column {
      margin-left: auto;
      margin-right: auto;
      width: 100% !important;
    }

  }

  content: "\f073";
  /* calendar icon */
  display: inline-block;
  margin-right: 5px;
  color: var(--qagile-gray);
}

.event-item .time .duration::before {
  font-family: "FontAwesome";
  content: "\f017";
  /* clock icon */
  display: inline-block;
  margin-right: 5px;
  color: var(--qagile-gray);
}

.event-item .tags {
  display: flex;
  align-items: center;
  gap: 8px;
  /*    margin-bottom: 10px;*/
  flex-wrap: wrap;
}

.event-item .tags .tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
}

.event-item .tags .tag .fa {
  margin-right: 5px;
}

.event-item .tags .tag.location {
  background-color: #007bff;
}

.event-item .tags .tag.online {
  background-color: var(--qagile-secondary-color);
}

.event-item .tags .tag.promo-badge {
  background-color: var(--qagile-primary-color);
}

.event-item .prices {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--qagile-secondary-color) !important;
}

.event-item .prices:before {
  font-family: "FontAwesome";
  font-weight: 500;
  content: "\f02c";
  /* FontAwesome university/graduation cap icon */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #6b7280;
}

.event-item .prices .price {
  font-weight: 500;
}

.event-item .prices .price.promo {
  color: var(--qagile-primary-color);
  font-size: 1.1em;
}

.event-item .prices .price.regular {
  font-size: 1em;
}

.event-item .prices .price.original {
  text-decoration: line-through;
  font-size: 0.9em;
}

.event-item .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.upcoming-trainings-page-widget .event-item .footer {
  justify-content: flex-end;
}

.event-item .footer .more-button {
  padding: 5px 15px;
  border-radius: var(--qagile-border-radius);
  font-size: 14px;
  color: var(--qagile-primary-color);
  text-decoration: none;
  font-weight: 600;
}

.event-item .more-button::after {
  font-family: "FontAwesome";
  font-weight: 400;
  content: "\f061";
  display: inline-block;
  margin-left: 5px;
}

.event-item .more-button:hover {
  font-weight: 800;
}

.event-item .hidden-meta {
  display: none;
}

/* --- Other Widget Styles (unchanged unless they target items) --- */
.upcoming-trainings-widget-more-wrapper {
  margin-bottom: 10px;
  overflow: hidden;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.upcoming-trainings-widget-see-all {
  background: var(--qagile-primary-gradient) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--qagile-transition-default) !important;
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px !important;
  text-align: center !important;
  box-shadow: var(--qagile-shadow-light) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 10px auto !important;
  /* Center the button */
}

#post-content .fluid-width-video-wrapper {
  width: 95%;
}

.ez-toc-wrap-left {
  margin: 1em auto 1em 0 !important;
}

/***** events list ****/
/***** grid ****/
.em-event-meta {
  color: var(--qagile-secondary-color);
}

.em.em-list .em-item .em-item-info h2.em-item-title a,
.em.em-list.em-grid>div.em-item .em-item-info .em-item-title a {
  color: var(--qagile-secondary-color) !important;
  font-weight: 400;
}

.em.em-list .em-item .em-item-info h2.em-item-title {
  font-size: calc(var(--font-size) + 6px) !important;
  margin-bottom: 5px !important;
}

.em.em-list.em-grid>div.em-item .em-item-image:not(.has-placeholder)>div img {
  position: relative !important;
  min-width: revert !important;
  min-height: revert !important;
  max-width: 150px !important;
  max-height: 150px !important;
  margin: auto !important;
}

.em.em-list.em-grid>div.em-item .em-item-image:not(.has-placeholder)>div {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.em.em-list .em-item .em-item-meta-line.em-event-date {
  margin-top: 10px;
}

.em.em-list .em-item .em-item-actions {
  margin-bottom: 10px;
}

.em-events-group-header {
  font-size: calc(var(--font-size) + 8px) !important;
  color: var(--qagile-primary-color);
}

.em.em-events-list .em-item:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0 8px 16px -8px;
}

.em.em-list .em-item .em-item-info {
  border-color: var(--qagile-secondary-color);
}

.em.em-list.em-grid .em-item .em-item-info {
  border-top-color: var(--qagile-secondary-color);
}

.em.em-list.em-grid>div.em-item .em-item-info .em-item-title {
  font-weight: 400 !important;
  font-size: calc(var(--font-size) + 4px) !important;
  margin: 5px 0 5px !important;
}

.em.em-list.em-grid>div.em-item .em-item-info .em-item-meta .em-event-meta-datetime {
  margin-top: 10px;
}

.em-event.em-item {
  border: 1px solid;
  /**border-bottom-style: solid; **/
  border-color: var(--qagile-light-gray);
  overflow: hidden;
  /* Add this to contain the scaled image */
  transition: var(--qagile-transition-shadow);
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 10px;
}

.em.em-list .em-item .em-item-meta-line.em-item-duration {
  font-size: inherit;
  font-weight: inherit;
  color: var(--qagile-secondary-color);
}

.em.em-list .em-item .em-item-meta-line.em-item-trainer a {
  color: var(--qagile-primary-color) !important;
}

.em.em-list .em-item .upcoming-trainings-widget-item-duration::before {
  content: none;
}

.em.em-list .em-item .em-item-meta-line.em-item-duration {
  margin-top: 10px;
}

.em.pixelbones .input button.button-primary {
  background-color: var(--qagile-secondary-color) !important;
}

.em-events-grid {
  margin-bottom: 20px;
}

/*** single event ***/

.em.em-view-container {
  max-width: 1080px;
  margin: auto;
}

.em-item.em-item-single {
  border: none;
  box-shadow: none;
}

/* List view layout */

.upcoming-trainings-page-list .event-item .column-wrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  width: 100%;
}

/* Time section - vertical alignment */
.upcoming-trainings-page-list .event-item .time {
  display: flex;
  flex-direction: row;
  align-items: start;
  /* Center vertically */
  gap: 5px;
  min-width: fit-content;
  padding-right: 10px;
  height: 100%;
  /* Take full height */
}

.upcoming-trainings-page-list .event-item .name {
  font-size: 18px !important;
  font-weight: 500;
}

/* Tags section - vertical alignment */
.upcoming-trainings-page-list .event-item .tags {
  display: flex;
  align-items: start;
  /* Center vertically */
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  min-width: 150px;
  height: 100%;
  /* Take full height */
}

.upcoming-trainings-page-list .event-item .tags .tag {
  font-size: 16px;
}

/* Prices section - vertical alignment */
.upcoming-trainings-page-list .event-item .prices {
  display: flex;
  flex-direction: column;
  align-items: start;
  /* Center vertically */
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  min-width: 150px;
  justify-content: flex-end;
  height: 100%;
  /* Take full height */
}

.upcoming-trainings-page-list .event-item .prices::before {
  content: none;
  /* Remove the default content */
}

.upcoming-trainings-page-list .event-item span.price:first-child::before {
  color: var(--qagile-gray);
  font-family: "FontAwesome";
  margin-right: 5px;
  font-weight: 500;
  content: "\f02c";
  /* FontAwesome university/graduation cap icon */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Footer section - vertical alignment */
.upcoming-trainings-page-list .event-item .footer {
  display: flex;
  align-items: end;
  /* Center vertically */
  margin: 0;
  min-width: 100px;
  height: 100%;
  /* Take full height */
}

/* Update the more button style for event items */
.upcoming-trainings-page-list .event-item .footer .more-button {
  padding: 5px 15px;
  background-color: var(--qagile-primary-color);
  color: var(--white) !important;
  border-radius: var(--qagile-border-radius);
  font-size: 14px;
  font-weight: 800;
  transition: var(--qagile-transition-default);
  text-decoration: none;
  display: inline-block;
}

.upcoming-trainings-page-list .event-item .footer .more-button:hover {
  background-color: var(--qagile-primary-hover);
  text-decoration: none;
}

.upcoming-trainings-page-list .event-item .footer .more-button::after {
  font-family: "FontAwesome";
  font-weight: 400;
  content: "\f061";
  display: inline-block;
  margin-left: 8px;
  transition: var(--qagile-transition-default);
}

.upcoming-trainings-page-list .event-item .footer .more-button:hover::after {
  margin-left: 12px;
}

/* Responsive design for mobile */
@media (max-width: 992px) {
  .upcoming-trainings-page-list .event-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .upcoming-trainings-page-list .event-item .time,
  .upcoming-trainings-page-list .event-item .name {
    width: 100%;
    min-width: 100%;
  }

  /* Update tags and prices to not stretch full width */
  .upcoming-trainings-page-list .event-item .tags,
  .upcoming-trainings-page-list .event-item .prices {
    display: flex;
    flex-direction: row;
    grid-template-rows: auto;
    /* grid-template-columns: repeat(auto-fit, minmax(120px, auto)); */
    gap: 10px;
    align-items: center;
    width: auto;
    min-width: auto;
    justify-content: start;
  }

  .upcoming-trainings-page-list .event-item .tags .tag,
  .upcoming-trainings-page-list .event-item .prices .price {
    width: auto;
    text-align: left;
  }

  /* Move more button to the right */
  .upcoming-trainings-page-list .event-item .footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .upcoming-trainings-page-list .event-item .footer .more-button {
    border-radius: var(--qagile-border-radius);
    font-size: 16px;
    background-color: var(--qagile-primary-color);
    color: #fff !important;
    margin-bottom: 5px;
    margin-top: auto !important;
    /* Magiczna właściwość: wypycha element na koniec kontenera flex */
    align-self: center;
    width: 100%;
    font-weight: 800;
    text-align: center;
  }

  .upcoming-trainings-page-list .event-item .footer .more-button::after {
    content: none;
  }

  /* Adjust price label position */
  .upcoming-trainings-page-list .event-item .prices::before {
    grid-column: 1 / -1;
    text-align: left;
  }
}

.et_pb_blurb.target-audience {
  padding: 1rem;
}

.et_pb_module.et_pb_blurb.target-audience:hover {
  transition: none;
  box-shadow: var(--qagile-shadow-light) !important;
}

.et_pb_button:after,
.et_pb_button:before {
  margin-top: -3px;
}

/** QAgile orange buttons */

.et_pb_module.et_pb_blurb .blurb-button:hover,
.upcoming-trainings-widget-see-all:hover,
#gridcards article .more-link:hover,
.call-to-action .et_pb_promo_button:hover,
a.et_pb_more_button:hover,
.resource-download-button:hover {
  background: var(--qagile-primary-gradient-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--qagile-shadow-medium) !important;
  text-decoration: none;
  color: var(--white) !important;
}

.upcoming-trainings-widget-see-all:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

.call-to-action .et_pb_promo_button:active,
a.et_pb_more_button:active {
  transform: translateY(0) !important;
  box-shadow: var(--qagile-shadow-light) !important;
}

/* on hover display arrow */
.et_pb_module.et_pb_blurb .blurb-button:hover::after,
.upcoming-trainings-widget-see-all:hover::after,
#gridcards article .more-link:hover::after,
.call-to-action .et_pb_promo_button:hover::after,
a.et_pb_more_button:hover::after {
  display: inline-block;
  transition: var(--qagile-transition-default);
  /* Add transition for smooth movement */
}

/* Ensure Divi helper buttons are round */
body.et_pb_button_helper_class .et_pb_button,
body.et_pb_button_helper_class .et_pb_module.et_pb_button {
  border-radius: calc(var(--qagile-border-radius) + 3px) !important;
}

/* Custom CSS for equal height columns in Divi rows */
.et_pb_section .et_pb_row {
  /* Added .et_pb_section for higher specificity */
  display: flex !important;
  align-items: stretch !important;
  /* Ensures children stretch to fill height */
}

.et_pb_section .et_pb_row>.et_pb_column {
  /* Added .et_pb_section for higher specificity */
  display: flex !important;
  /* Make columns flex containers too */
  flex-direction: column !important;
  /* Stack content vertically */
  height: auto !important;
  /* Ensure height is not fixed */
}

.et_pb_section .et_pb_row .et_pb_blurb {
  /* Added .et_pb_section for higher specificity */
  flex-grow: 1 !important;
  /* Allow blurbs to grow and fill available space */
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  /* Ensure height is not fixed */
}

.et_pb_section .et_pb_row .et_pb_blurb .et_pb_blurb_content {
  /* Added .et_pb_section for higher specificity */
  flex-grow: 1 !important;
  /* Ensure content inside blurb also stretches */
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  /* Ensure height is not fixed */
}

.et_pb_section .et_pb_row .et_pb_blurb .et_pb_blurb_description {
  /* Added .et_pb_section for higher specificity */
  flex-grow: 1 !important;
  /* Make the description grow to fill space */
  height: auto !important;
  /* Ensure height is not fixed */
}

/* About oage */

ul.pillar-features {
  list-style: none;
}

ul.pillar-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--qagile-primary-color);
  font-weight: bold;
}

/* Hero section styles */
section.hero,
.full-with-header-gradient,
#main-footer {
  overflow: hidden;
  background-image: var(--qagile-hero-gradient);
  background-color: #fff;
}

section.hero h1.et_pb_module_header {
  font-size: 45px;
  margin-top: 1rem;
  font-weight: 800;
  text-align: left;
  text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}

section.hero .et_pb_fullwidth_header_subhead {
  margin-bottom: 1rem;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2em;
  text-align: left;
}

section.hero .et_pb_button_two, a.et_pb_more_button.et_pb_button_two {
  border: 2px solid white !important;
  background: none !important;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_one {
  margin-right: 15px !important;
  margin-top: 20px !important;
}

/* Customers slider */
.dica_divi_carousel {
  margin-bottom: 15px !important;
  margin-top: 5px !important;
}

/*header animation*/

section.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%222%22%20fill%3D%22white%22%20opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%221%22%20fill%3D%22white%22%20opacity%3D%220.1%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2230%22%20r%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.1%22%2F%3E%3C%2Fsvg%3E");
  animation: float 20s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-100px) rotate(360deg);
  }
}

#mission-statement {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--qagile-secondary-color) !important;
  margin-bottom: 30px;
  padding: 30px !important;
  background: var(--qagile-gray-300);
  border-radius: var(--qagile-border-radius);
  border-left: 5px solid var(--qagile-primary-color) !important;
}

/* Customers carousel slider  */
#customers-logo-carousel {
  background-image: radial-gradient(circle at center right, vaR(--qagile-primary-color) 0%, #f54e03 40%, var(--qagile-secondary-color) 80%);
}


/* TLDR  callout box */
.qagile-round-box {
  border: var(--qagile-border-gray);
  box-shadow: var(--qagile-shadow-light);
  border-radius: var(--qagile-border-radius);
  padding: 10px;
  margin-top: 1em;
  margin-bottom: 1em;
}

#post-callout {
  border-radius: var(--qagile-border-radius);
  padding: 10px;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 1px solid var(--qagile-secondary-color);
}

#post-callout .tldr-header {
  color: var(--qagile-secondary-color);
  margin-bottom: 15px;
  border-radius: var(--qagile-border-radius);
  font-size: 1.5em;
}

/* TOC */
.ez-toc-title {
  font-weight: 800;
  font-size: 22px;
  color: var(--qagile-secondary-color);
}

.ez-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sec;
}

/* fix for outline visibility on focus state */
#ez-toc-container ul li,
#ez-toc-container ul li,
#ez-toc-container ul {
  counter-increment: sec;
  overflow: visible !important;
}

.ez-toc-list a {
  position: relative;
  display: block;
  padding: 8px 6px 8px 42px;
  text-decoration: none;
  color: var(--qagile-secondary-color);
  border-radius: var(--qagile-border-radius);
  width: 100%;
}

div#ez-toc-container ul.ez-toc-list a {
  color: var(--qagile-secondary-color);
}

div#ez-toc-container {
  border-radius: var(--qagile-border-radius);
}

.ez-toc-list a::before {
  content: counter(sec) ".";
  position: absolute;
  left: 10px;
  top: 8px;
  font-weight: 700;
  color: var(--qagile-primary-color);
}

.ez-toc-list a:hover {
  background: var(--qagile-orange-lighter);
  color: var(--qagile-secondary-color);
  text-decoration: none;
}

.ez-toc-list a:focus {
  outline: 2px solid var(--qagile-primary-color);
  outline-offset: 2px;
}

.ez-toc-list a.active {
  background: linear-gradient(90deg,
      rgba(224, 117, 45, 0.12),
      rgba(36, 55, 96, 0.08));
  color: var(--qagile-secondary-color);
}

.ez-toc-list a:visited {
  color: var(--qagile-orange-light);
}

/* Downloads */

.download-page-meta-col {
  width: 31.5% !important;
  margin-left: 3% !important;
}

/* related posts by YARPP */
/* === QAgile: Related Posts styled like Upcoming Trainings === */

/* Section heading (Podobne artykuły) */
.yarpp.yarpp-related h3 {
  margin: 0 0 1rem 0;
  font-weight: 700;
  color: var(--qagile-primary-color);
}

/* Grid layout */
.yarpp-thumbnails-horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.yarpp-thumbnails-horizontal .yarpp-thumbnail {
  width: 100% !important;
  height: 100% !important;
  margin: auto !important;
  border: 1px solid var(--qagile-light-gray);
  border-radius: var(--qagile-border-radius);
  box-shadow: var(--qagile-shadow-light);
}

/* Card */
.yarpp-thumbnail {
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--qagile-light-gray);
  border-radius: var(--qagile-border-radius);
  box-shadow: var(--qagile-shadow-light);
  overflow: hidden;
  transition: var(--qagile-transition-shadow),
    var(--qagile-transition-transform) 0.2s ease;
  width: auto !important;
  margin: auto !important;

  display: grid;
  grid-template-rows: auto 1fr;
  /* image height + flexible title area */
  height: 100%;
}

/* Media */
.yarpp-thumbnail>img,
.yarpp-thumbnail-default,
.yarpp-thumbnail img {
  grid-row: 1;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  /* similar visual rhythm to trainings */
}

/* Title (left-aligned like trainings) */
.yarpp-thumbnail-title,
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
  grid-row: 2;
  align-self: end;
  /* push to the bottom of the card */
  padding: 0.9rem 1rem 1.1rem;
  text-align: left;
  color: var(--qagile-secondary-color);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1rem);
  line-height: 1.35;

  /* Ensure all titles take the SAME visual height (2 lines) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* clamp to 2 lines */
  overflow: hidden;
  width: 100%;
  max-height: 100%;
}

/* Optional: allow 3 lines on small screens while keeping alignment */
@media (max-width: 480px) {
  .yarpp-thumbnail-title {
    -webkit-line-clamp: 3;
    min-height: calc(1.35em * 3);
  }
}

/* Hover/focus style mimicking trainings */
.yarpp-thumbnail:hover,
.yarpp-thumbnail:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--qagile-shadow-medium) !important;
}

.yarpp-thumbnail:hover img,
.yarpp-thumbnail:focus-within img {
  transform: scale(1.03);
}

.yarpp-thumbnail:hover .yarpp-thumbnail-title,
.yarpp-thumbnail:focus-within .yarpp-thumbnail-title {
  color: var(--qagile-primary-color);
}

/* Desktop: exactly 3 columns (like 3-up card rows) */
@media (min-width: 992px) {
  .yarpp-thumbnails-horizontal {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

/* Small screens: slightly tighter spacing */
@media (max-width: 576px) {
  .yarpp-thumbnails-horizontal {
    gap: 0.9rem;
  }

  .yarpp-thumbnail-title {
    padding: 0.7rem 0.9rem 0.9rem;
  }
}

/* Optional: match the rounded corners of images to card radius */
.yarpp-thumbnail img {
  border-top-left-radius: calc(var(--qagile-border-radius) - 1px);
  border-top-right-radius: calc(var(--qagile-border-radius) - 1px);
}

/* ===========================
   QAgile — Tag Pills for exact HTML provided
   =========================== */

/* Make the <p> the flex row and hide comma separators via font-size:0 */
.related-tags .et_pb_text_inner p {
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--qagile-gray-300);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0;
  /* hides the literal ", " separators (text nodes) */
}

/* Label “Tagi:” */
.related-tags .et_pb_text_inner p>.related_tags_title {
  font-size: 0.95rem;
  /* restore font size */
  font-weight: 700;
  color: var(--qagile-secondary-color);
  letter-spacing: 0.2px;
  margin-right: 0.35rem;
  line-height: 1;
}

/* Tag links as compact brand pills */
.related-tags .et_pb_text_inner p>a[rel="tag"] {
  /* restore font size after font-size:0 on parent */
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0.56rem;
  /* compact height */
  border-radius: 999px;
  background: var(--qagile-primary-color);
  border: 1px solid transparent;
  box-shadow: var(--qagile-shadow-light);
  transition: var(--qagile-transition-transform),
    var(--qagile-transition-shadow), background 0.2s ease;
}

/* Add # prefix before each tag */
.related-tags .et_pb_text_inner p>a[rel="tag"]::before {
  content: "#";
  margin-right: 2px;
  font-weight: 600;
  color: var(--white);
  opacity: 0.9;
}

/* Hover/focus to match related-post cards */
.related-tags .et_pb_text_inner p>a[rel="tag"]:hover,
.related-tags .et_pb_text_inner p>a[rel="tag"]:focus-visible {
  background: var(--qagile-primary-gradient);
  transform: translateY(-2px);
  box-shadow: var(--qagile-shadow-medium);
  color: var(--white);
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .related-tags .et_pb_text_inner p {
    gap: 0.4rem;
    padding-top: 0.5rem;
  }

  .related-tags .et_pb_text_inner p>a[rel="tag"] {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* ===== MOBILE FIXES FOR SINGLE POST DISPLAY ===== */

/* 1. Fix for single post content on mobile */
@media (max-width: 768px) {

  /* Single post container fixes */
  .et_pb_column.et_pb_column_2_3 .et_pb_module.et_pb_post_title,
  .et_pb_column.et_pb_column_2_3 #post-content {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .et_pb_row {
    width: 100%;
  }

  .et_pb_section .et_pb_row .et_pb_column {
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
  }

  /* Post content wrapper */
  #post-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Post content rows */
  #post-content .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
  }

  /* Post content columns */
  #post-content .et_pb_column {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Post images */
  #post-content img {
    max-width: 100% !important;
    height: auto !important;
    margin: 8px 0 !important;
  }

  /* Featured image fixes */
  .et_pb_post .et_pb_image {
    margin-bottom: 12px !important;
  }

  /* Typography adjustments */
  #post-content h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  #post-content h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    margin-top: 16px !important;
    padding-top: 1.5em;
  }

  #post-content h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  #post-content h4 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }

  /* Paragraph spacing */
  #post-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }

  /* List improvements */
  #post-content ul,
  #post-content ol {
    margin-left: 16px !important;
    margin-bottom: 12px !important;
  }

  #post-content li {
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
  }
}

/* 2. Fix for very small mobile devices */
@media (max-width: 480px) {

  /* Container adjustments */
  .et_pb_column.et_pb_column_2_3 .et_pb_module.et_pb_post_title,
  .et_pb_column.et_pb_column_2_3 #post-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Post content */
  #post-content .et_pb_row {
    padding: 0 8px !important;
  }

  /* Post title container for small screens */
  .et_pb_title_container {
    padding: 12px 8px !important;
  }

  /* Post title for small screens */
  .et_pb_title_container h1.entry-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  /* Meta container for small screens */
  .et_pb_title_meta_container {
    padding: 10px !important;
  }

  /* Typography for small screens */
  #post-content h1 {
    font-size: 22px !important;
  }

  #post-content h2 {
    font-size: 18px !important;
  }

  #post-content p {
    font-size: 15px !important;
  }

  /* Button adjustments */
  #post-content .et_pb_button,
  #post-content .more-link {
    width: 100% !important;
    text-align: center !important;
    margin: 10px 0 !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
  }

  /* Post tags for small screens */
  .post-tags a {
    padding: 3px 6px !important;
    font-size: 11px !important;
    margin: 1px 2px 1px 0 !important;
  }
}

/* 3. Fix for post meta information and title box */
@media (max-width: 768px) {

  /* Post title container */
  .et_pb_title_container {
    padding: 15px 10px !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }

  /* Post title */
  .et_pb_title_container h1.entry-title {
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  /* Post meta container */
  .et_pb_title_meta_container {
    padding: 12px !important;
    margin-top: 12px !important;
  }

  .post-meta {
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Meta information layout */
  .et_pb_title_meta_container span,
  .post-meta span {
    display: inline-block !important;
    margin-right: 12px !important;
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Author meta */
  .et_pb_title_meta_container span.author.vcard,
  .post-meta span.author.vcard {
    font-weight: 500 !important;
  }

  /* Date meta */
  .et_pb_title_meta_container span.published,
  .post-meta span.published {
    font-weight: 400 !important;
  }

  /* Comments meta */
  .et_pb_title_meta_container span.comments-number,
  .post-meta span.comments-number {
    font-weight: 400 !important;
  }

  /* Meta icons spacing */
  .et_pb_title_meta_container span:before,
  .post-meta span:before {
    margin-right: 5px !important;
    opacity: 0.8 !important;
  }

  /* Post tags */
  .post-tags {
    margin-top: 15px !important;
    text-align: center !important;
  }

  .post-tags a {
    display: inline-block !important;
    margin: 2px 3px 2px 0 !important;
    padding: 4px 8px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .post-tags a:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
  }
}

.header-divider:before {
  border-top-color: transparent !important;
  border-top-width: 7px;
  background-image: var(--qagile-hero-gradient);
}

/* 4. Fix for blockquotes on mobile */
@media (max-width: 768px) {

  #post-content blockquote p,
  #main-content blockquote p {
    padding: 10px 15px !important;
    margin: 15px 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  #post-content blockquote {
    margin: 15px 0 !important;
  }
}

/* 5. Fix for embedded content */
@media (max-width: 768px) {

  /* Video embeds */
  #post-content .fluid-width-video-wrapper {
    width: 100% !important;
    margin: 15px 0 !important;
  }

  /* Code blocks */
  #post-content pre,
  #post-content code {
    font-size: 13px !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  /* Tables */
  #post-content table {
    font-size: 14px !important;
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
  }

  #post-content table td,
  #post-content table th {
    padding: 8px 12px !important;
    min-width: 100px !important;
  }
}

/* 6. Fix for sidebar on mobile (if present) */
@media (max-width: 768px) {
  .et_pb_column.et_pb_column_1_3 {
    width: 100% !important;
    margin-top: 30px !important;
    order: 2 !important;
    /* Ensure sidebar appears below main content */
  }

  .et_pb_column.et_pb_column_2_3 {
    order: 1 !important;
    /* Ensure main content appears first */
  }

  .widget {
    margin-bottom: 30px !important;
  }

  .widget-title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  /* Specific fix for upcoming trainings widget */
  #upcoming-trainings-widget {
    width: 100% !important;
    margin-top: 30px !important;
    order: 3 !important;
    /* Ensure it appears after main content and other widgets */
  }

  /* Fix for upcoming trainings widget container */
  div:has(> #upcoming-trainings-widget) {
    width: 100% !important;
    margin-top: 30px !important;
    order: 3 !important;
  }

  /* Ensure proper stacking order for all widgets */
  .widget-area {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .widget-area .widget {
    width: 100% !important;
    margin-bottom: 25px !important;
  }
}

/* 7. Fix for navigation and related posts */
@media (max-width: 768px) {
  .wp-pagenavi {
    text-align: center !important;
    padding: 20px 0 !important;
    margin: 20px 0 !important;
  }

  .wp-pagenavi a,
  .wp-pagenavi span {
    display: inline-block !important;
    margin: 2px !important;
    padding: 8px 12px !important;
    min-width: 40px !important;
    text-align: center !important;
  }
}

/* 8. Fix for comment sections */
@media (max-width: 768px) {
  .et_pb_comments_module .et_pb_comment {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }

  .et_pb_comment_content {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .et_pb_comment_author {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }
}

/* 9. Additional spacing fixes */
@media (max-width: 768px) {

  /* General spacing */
  .et_pb_section {
    padding: 15px 0 !important;
  }

  .et_pb_row {
    padding: 10px 0 !important;
  }

  .et_pb_column {
    margin-bottom: 15px !important;
  }

  /* Post content specific spacing */
  #post-content .et_pb_text {
    margin-bottom: 15px !important;
  }

  #post-content .et_pb_image {
    margin-bottom: 15px !important;
  }
}

/* 11. Additional flex layout fixes for proper content order */
@media (max-width: 768px) {

  /* Ensure main content area uses flex layout */
  .et_pb_section .et_pb_row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Main content column (2/3 width) */
  .et_pb_column.et_pb_column_2_3 {
    width: 100% !important;
    order: 1 !important;
    margin-bottom: 30px !important;
  }

  /* Sidebar column (1/3 width) */
  .et_pb_column.et_pb_column_1_3 {
    width: 100% !important;
    order: 2 !important;
    margin-top: 0 !important;
  }

  /* Specific widget ordering */
  #upcoming-trainings-widget {
    order: 10 !important;
    /* High order value to ensure it appears last */
    margin-top: 30px !important;
    clear: both !important;
  }

  /* Alternative selector for upcoming trainings widget */
  .widget:has(#upcoming-trainings-widget) {
    order: 10 !important;
    margin-top: 30px !important;
    clear: both !important;
  }

  /* Force upcoming trainings to appear at the bottom */
  .upcoming-trainings-widget-header {
    margin-top: 30px !important;
  }
}

/* fix for h1 header on mobile */
@media (max-width: 768px) {

  h1,
  h1.et_pb_module_header,
  section.hero h1.et_pb_module_header {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  /* fix for slider header on mobile an h2 */
  h2,
  .et_pb_slider .et_pb_slide_description .et_pb_slide_title,
  .et_pb_slider.et_pb_module .et_pb_slides .et_pb_slide_description h2.et_pb_slide_title {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  /* fix for hero section header text */

  section.hero .et_pb_fullwidth_header_subhead,
  .et_pb_fullwidth_header_subhead {
    font-size: 24px !important;
  }

  /*fix for team member */
  .et_pb_team_member {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 50% !important;
  }

  /* fix for upcoming training item on mobile */
  .upcoming-trainings-page-widget .event-item {
    max-width: 100%;
  }
}

/* Fix Lighthouse warning: prevent media from overflowing */
.et_pb_post_content img,
.et_pb_post_content video,
.et_pb_post_content canvas {
  overflow: clip !important;
  overflow-clip-margin: 0;
}

/* Fallback for older browsers */
@supports not (overflow: clip) {

  .et_pb_post_content img,
  .et_pb_post_content video,
  .et_pb_post_content canvas {
    overflow: hidden !important;
  }
}

/* Meetup icon */
.et-social-meetup a.icon:before {
  font-family: FontAwesome !important;
  content: "\F2E0" !important;
}

/* Social icons in footer widget */
.widget_qagile_social_widget ul li:before {
  content: none !important;
}

.widget_qagile_social_widget li {
  padding-left: 0px !important;
  margin-left: 10px;
  margin-right: 10px;
}

/* Give the main area enough height so the footer drops down */
#et-main-area #main-content {
  min-height: calc(100vh - 580px);
}

/* QAgile menu item hover */
.nav ul li a:hover {
  opacity: 1 !important;
  color: var(--qagile-primary-hover) !important;
}

@media only screen and (min-width: 981px) {
  .et-fixed-header #top-menu a:hover {
    color: var(--qagile-primary-hover) !important;
  }
}


/* fix for mobile menu height */
@media only screen and (max-width: 980px) {

  ul.et_mobile_menu .menu-item-has-children .sub-menu,
  #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
  .et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
  .et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
    overflow-y: scroll;
  }

  .sub-menu li .menu-item-description {
    display: none;
  }
}