/* Category Blog images */
.blog .item-image img,
.com-content-category-blog .item-image img {
  max-width: 350px;      /* smaller size */
  height: auto !important;
  object-fit: contain;   /* keeps aspect ratio */
  margin: 0 auto;        /* center image */
  display: block;
}

/* Center the article titles */
.blog .page-header,
.blog .page-header h2,
.blog .page-header h2 a {
  text-align: center !important;
  display: block;
  margin-top: 10px;
}

/* Optional: hide author/date/category row */
.blog .article-info {
  display: none !important;
}
/* ===== Category Blog page (Products/Blog) ===== */

/* 1) Remove Bootstrap "thumbnail" look (white bg, border, padding) */
body.com-content.view-category.layout-blog .item-image img,
body.com-content.view-category.layout-blog .img-intro img {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Some templates add the .img-thumbnail class – neutralize it too */
body.com-content.view-category.layout-blog img.img-thumbnail {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) Keep images at natural size (or max width) and center them */
body.com-content.view-category.layout-blog.item-image,
body.com-content.view-category.layout-blog.img-intro {
  max-width: 400px;              /* <- set the box to your image width */
  margin: 0 auto 12px;           /* center the box */
  height: auto !important;
  overflow: visible;
  text-align: center;            /* for safety */
}

body.com-content.view-category.layout-blog:not(.itemid-115) .item-image img,
body.com-content.view-category.layout-blog:not(.itemid-115) .img-intro img {
  width: auto !important;        /* don’t stretch large */
  max-width: 100% !important;    /* shrink if the column is narrower */
  height: auto !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

/* 3) Center article titles under the image */
body.com-content.view-category.layout-blog .page-header,
body.com-content.view-category.layout-blog .page-header h2,
body.com-content.view-category.layout-blog .page-header h2 a {
  text-align: center !important;
  display: block;
  margin-top: 8px;
}

/* 4) Optional: hide the author/date/category row */
body.com-content.view-category.layout-blog .article-info {
  display: none !important;
}
/* ===== Products Blog (Category Blog) – center images & remove white box ===== */

/* Remove bootstrap/thumbnail visuals */
body.com-content.view-category.layout-blog img.img-thumbnail,
body.com-content.view-category.layout-blog .item-image img,
body.com-content.view-category.layout-blog .img-intro img {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Kill floats on the image wrapper and center it */
body.com-content.view-category.layout-blog .img-intro,
body.com-content.view-category.layout-blog .item-image,
body.com-content.view-category.layout-blog figure.item-image,
body.com-content.view-category.layout-blog .intro-image,
body.com-content.view-category.layout-blog .article-intro .item-image {
  float: none !important;                     /* <-- the key fix */
  display: flex !important;                   /* center with flex */
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto 12px !important;             /* center the box */
  max-width: 400px;                           /* your image width */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Keep the image itself natural, centered */
body.com-content.view-category.layout-blog .img-intro img,
body.com-content.view-category.layout-blog .item-image img,
body.com-content.view-category.layout-blog figure.item-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Center the article titles below */
body.com-content.view-category.layout-blog .page-header,
body.com-content.view-category.layout-blog .page-header h2,
body.com-content.view-category.layout-blog .page-header h2 a {
  text-align: center !important;
  display: block !important;
  margin-top: 8px !important;
}

/* Optional: hide author/date row */
body.com-content.view-category.layout-blog .article-info {
  display: none !important;
}
/* ===== Products Category Blog – center the intro images ===== */

/* 1) Kill the float on the anchor that wraps the image */
body.com-content.view-category.layout-blog a.article-intro-image,
body.com-content.view-category.layout-blog .article-intro-image {
  float: none !important;                 /* <-- key fix */
  display: block !important;
  margin: 0 auto 12px !important;         /* center the wrapper */
  width: fit-content;                      /* shrink wrapper to image */
}

/* 2) Remove Bootstrap thumbnail visuals if present */
body.com-content.view-category.layout-blog .article-intro-image img.img-thumbnail {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 3) Keep the image natural and centered */
body.com-content.view-category.layout-blog .article-intro-image img {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;             /* shrink if column is narrow */
  height: auto !important;
  object-fit: contain !important;
}

/* 4) Center the titles under the image (optional) */
body.com-content.view-category.layout-blog .page-header,
body.com-content.view-category.layout-blog .page-header h2,
body.com-content.view-category.layout-blog .page-header h2 a {
  text-align: center !important;
  display: block !important;
  margin-top: 8px !important;
}

/* 5) Optional: hide author/date/metadata row */
body.com-content.view-category.layout-blog .article-info {
  display: none !important;
}
/* ===== Products Category Blog – remove the big white block around images ===== */

/* Kill the template padding/background on the intro-image wrapper */
body.com-content.view-category.layout-blog a.article-intro-image,
body.com-content.view-category.layout-blog .article-intro-image,
body.com-content.view-category.layout-blog figure.item-image,
body.com-content.view-category.layout-blog .item-image,
body.com-content.view-category.layout-blog .img-intro {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  float: none !important;             /* keep them centered from previous step */
  display: block !important;
  margin: 0 auto 12px !important;     /* center wrapper */
  width: fit-content;                  /* shrink wrapper to image width */
}

/* Keep the actual <img> clean and centered */
body.com-content.view-category.layout-blog .article-intro-image img,
body.com-content.view-category.layout-blog .item-image img,
body.com-content.view-category.layout-blog .img-intro img,
body.com-content.view-category.layout-blog img.img-thumbnail {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;   /* don’t overflow the column */
  height: auto !important;
  object-fit: contain !important;
}

/* Optional: shrink the thumbnails if 400×400 feels too large */
body.com-content.view-category.layout-blog a.article-intro-image img {
  max-width: 260px !important;   /* tweak to taste (220–320 etc.) */
}

/* Optional: center titles nicely */
body.com-content.view-category.layout-blog .page-header,
body.com-content.view-category.layout-blog .page-header h2,
body.com-content.view-category.layout-blog .page-header h2 a {
  text-align: center !important;
  display: block !important;
  margin-top: 8px !important;
}
/* ------- Category Blog (Products) – remove the big white block & center img ------- */

/* Kill padding/background & float on the Helix wrapper */
.blog .article-intro-image,
.blog div.article-intro-image.float-left {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  float: none !important;
  display: block !important;
  margin: 0 auto 12px !important;   /* centers the wrapper */
  width: fit-content;                /* shrink wrapper to image width */
}

/* Clean the actual <img> and center it */
.blog .article-intro-image img,
.blog .img-intro img,
.blog img.img-thumbnail {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Optional: scale thumbnails down if 400×400 feels too large */
.blog .article-intro-image img {
  max-width: 260px !important;  /* adjust to taste */
}

/* Optional: center the titles */
.blog .page-header,
.blog .page-header h2,
.blog .page-header h2 a {
  text-align: center !important;
  display: block !important;
  margin-top: 8px !important;
}
/* ===== Category Blog (Products) – clean, centered thumbnails ===== */

/* 1) Kill the white card/padding/float on the image wrapper, center it */
.view-category .blog .article .article-intro-image,
.view-category .blog .article .article-intro-image.float-left {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  float: none !important;
  display: block !important;
  margin: 0 auto 12px !important;       /* centers the wrapper */
  width: fit-content;                    /* shrink wrapper to the image width */
}

/* 2) Make sure the <img> itself isn’t being forced to fill a box */
.view-category .blog .article .article-intro-image img {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* 3) Optional: limit thumbnail size a bit (tweak the 260px) */
.view-category .blog .article .article-intro-image img {
  max-width: 260px !important;
}

/* 4) Optional: remove any background/padding from the article card itself */
.view-category .blog .article {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 18px !important;
}

/* 5) Center the titles and remove any background */
.view-category .blog .page-header,
.view-category .blog .page-header h2,
.view-category .blog .page-header h2 a {
  text-align: center !important;  background: transparent !important;
  display:
}
/* ===== Kill the grey hover overlay + buttons (both class variants) ===== */
.sw-portfolio-wrap .sp-simpleportfolio-overlay,
.sw-portfolio .sp-simpleportfolio-overlay,
.sp-simpleportfolio-overlay,
.spsimpleportfolio-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sw-portfolio-wrap .sp-simpleportfolio-btns,
.sw-portfolio .sp-simpleportfolio-btns,
.sw-portfolio-wrap .spsimpleportfolio-btns,
.sw-portfolio .spsimpleportfolio-btns {
  display: none !important;
}


/* Keep image clean without forced box */
.sp-simpleportfolio-img img,
.spsimpleportfolio-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Title styling */
.sp-simpleportfolio-title,
.spsimpleportfolio-title {
  font-size: 18px;
  font-weight: 600;
  color: #222 !important;
  text-align: center;
  margin-top: 10px;
}

/* hide the category/tag under the title */
.sw-portfolio-wrap .sp-simpleportfolio-tags,
.sw-portfolio .sp-simpleportfolio-tags,
.sp-simpleportfolio-tags,
.spsimpleportfolio-tags {
  display: none !important;
}

/* Scope (use your module/addon wrapper if you set one) */
.sp-simpleportfolio-item,
.spsimpleportfolio-item { background: transparent !important; box-shadow:none !important; border:0 !important; }

/* Kill the grey bar under the image */
.sp-simpleportfolio-info,
.spsimpleportfolio-info { 
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Title under image, centered – no background */
.sp-simpleportfolio-title,
.spsimpleportfolio-title {
  margin: 10px 0 0 !important;
  text-align: center;
  font-weight: 600;
}

/* Make grid breathe a bit */
.sp-simpleportfolio-items .sp-simpleportfolio-item,
.spsimpleportfolio-items .spsimpleportfolio-item { margin-bottom: 28px; }
/* ===== Products Category Blog (menu item id 139) ===== */

/* Remove the white card chrome on the wrapper, not just the <img> */
body.itemid-139.com-content.view-category.layout-blog .article-intro,
body.itemid-139.com-content.view-category.layout-blog .items-row > [class*="col-"] > article,
body.itemid-139 .blog-items article.item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Cancel float & center the image block */
body.itemid-139 .article-intro-image,
body.itemid-139 .item-image,
body.itemid-139 .img-intro {
  float: none !important;
  display: block !important;
  margin: 0 auto 8px !important;
  text-align: center !important;
}

/* Ensure image fills the column nicely */
body.itemid-139 .article-intro-image img,
body.itemid-139 .item-image img,
body.itemid-139 .img-intro img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  /* If you want uniform squares:
     aspect-ratio: 1 / 1; object-fit: contain; background:#f8f8f8; border-radius:8px; */
}

/* Column spacing under each card */
body.itemid-139 .blog-items [class*="col-"] {
  margin-bottom: 28px;
}

/* EVENTS: remove white card and tighten spacing */

body.pt-events .com-content-category-blog .row { 
  align-items: flex-start !important; 
  --bs-gutter-x: 20px;
}
body.pt-events .com-content-category-blog .row > [class*="col-"]{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  display: block !important;
}
body.pt-events .com-content-category-blog article{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
body.pt-events .com-content-category-blog .article-body img{
  display: block; width: 100%; height: auto; margin: 0 auto 8px !important;
}
body.pt-events .article-list .article-header{
  text-align: center !important; margin: 6px 0 0 !important;
}
body.pt-events .article-list .article-header h2,
body.pt-events .article-list .article-header .article-title{
  display: block !important; float: none !important;
  margin: 6px auto 0 !important; font-size: 18px !important; line-height: 1.35 !important;
}
/* ===== EVENTS – clean, compact, centered grid ===== */
/* 0) Kill Helix/Joomla row separator lines and extra padding */
body.pt-events .article-list > .row,
body.pt-events .blog-items > .row {
  border: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 1) Nice, even gutters (horizontal + vertical) */
body.pt-events .article-list .row {
  --bs-gutter-x: 24px;             /* horizontal gap */
  --bs-gutter-y: 28px;             /* vertical gap */
  align-items: flex-start !important;
}

/* 2) Center each card column content */
body.pt-events .article-list .row > [class*="col-"] {
  display: flex !important;
  justify-content: center !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Make the card itself compact and consistent */
body.pt-events .com-content-category-blog article {
  width: 100%;
  max-width: 280px;                /* card width – adjust 360–460 if you like */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}

/* 4) Image spacing */
body.pt-events .com-content-category-blog .article-body img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto 10px !important;
}

/* 5) Title style (already centered earlier) */
body.pt-events .article-list .article-header {
  text-align: center !important;
  margin: 6px 0 0 !important;
}
body.pt-events .article-list .article-header h2,
body.pt-events .article-list .article-header .article-title {
  display: block !important;
  float: none !important;
  margin: 6px auto 0 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  max-width: 420px;                /* match card width */
}
/* Reduce horizontal gap between event cards */
.blogpt-events .article-list.cols-3 .row {
  --bs-gutter-x: 10px !important; /* default is 30px; try 10-20px for narrower spacing */
}

/* Optional: make cards slightly narrower and centered */
.blogpt-events .col-lg-4 {
  flex: 0 0 auto;
  width: 31% !important;  /* adjust between 31–33% depending on spacing */
}

/* If you want the entire grid centered */
.blogpt-events .article-list.cols-3 {
  justify-content: center !important;
}
/* --- Tighten horizontal spacing on Events grid --- */
.blogpt-events .article-list.cols-3 .row {
  margin-left: -5px !important;
  margin-right: -5px !important;
  --bs-gutter-x: 10px !important;   /* reduce Bootstrap gutter */
}

/* Make columns occupy more space and remove extra padding */
.blogpt-events .col-lg-4,
.blogpt-events .article-list .item {
  padding-left: 5px !important;
  padding-right: 5px !important;
  width: 33.333% !important; /* keep 3 columns but narrower gaps */
  box-sizing: border-box !important;
}

/* Ensure the container itself doesn’t add wide padding */
.blogpt-events #sp-component,
.blogpt-events .com-content-category-blog {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ===== EVENTS: tighten the card spacing on the category blog grid ===== */
/* Make sure your Events menu item has Page Class: pt-events */


/* Kill Bootstrap column paddings & widths under that row */
body.pt-events .article-list > .row > [class^="col"],
body.pt-events .article-list > .row > [class*=" col"],
body.pt-events .article-list > .row > [class^="col-"],
body.pt-events .article-list > .row > [class*=" col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  float: none !important;
}
/* Medium screens: go 2-up */
@media (min-width: 768px) and (max-width: 1199.98px) {
  body.pt-events .article-list > .row {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Mobile: 1-up */
@media (max-width: 767.98px) {
  body.pt-events .article-list > .row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}
/* Optional: tighten the white card itself to match the new spacing */
body.pt-events .article-list article.item {
  margin: 0 !important;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  overflow: hidden;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

body.pt-events .article-list article.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Ensure images fill the card width cleanly */
body.pt-events .article-list article.item .item-image img,
body.pt-events .article-list article.item .img-intro img,
body.pt-events .article-list article.item .article-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Keep title centered */
body.pt-events .article-list .article-header h2,
body.pt-events .article-list .article-header .article-title {
  text-align: center !important;
  margin: 10px auto 12px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}
/* Center product titles on Products category blog */
body.pt-products .blog-items h2.item-title,
body.pt-products .blog-items .item-title,
body.pt-products .blog-items .article-title {
    text-align: center !important;
}

body.pt-products .blog-items h2.item-title a,
body.pt-products .blog-items .item-title a,
body.pt-products .blog-items .article-title a {
    display: inline-block !important;
    text-align: center !important;
}
/* Center product titles for new Joomla structure */
body.pt-products .com-content-category-blog .article-header h4,
body.pt-products .com-content-category-blog .article-header h4 a {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#sp-title .sp-page-title-heading,
#sp-title .sp-page-title-heading span,
#sp-title h1,
#sp-title h1 span {
  color: #F04511 !important;
  font-weight: 700 !important;
  font-size: 36px !important;   /* adjust: 32–64px */
  line-height: 1.2
}
/* ===== OVERRIDE: move EVENTS title + breadcrumb up ===== */
.pt-events .sp-page-title .container{
  justify-content:flex-start !important;
  padding-top:200px !important;   /* adjust 20–120px */
}
/* EVENTS: breadcrumb size */
.pt-events .breadcrumb,
.pt-events .breadcrumb a,
.pt-events .breadcrumb span {
  font-size: 20px !important;
} 

/* === EVENTS ONLY: reduce image size === */
/* === EVENTS page ONLY: make intro images smaller === */
body.pt-events.com-content.view-category.layout-blog .article-intro-image img,
body.pt-events.com-content.view-category.layout-blog .item-image img,
body.pt-events.com-content.view-category.layout-blog .img-intro img,
body.pt-events.com-content.view-category.layout-blog .article-body img {
  width: 100% !important;
  max-width: 320px !important;   /* <-- change: 180 / 220 / 260 */
  height: auto !important;
  display: block !important;
  margin: 0 auto 8px !important;
}

/* center the wrapper (optional but recommended) */
body.pt-events.com-content.view-category.layout-blog .article-intro-image,
body.pt-events.com-content.view-category.layout-blog .item-image,
body.pt-events.com-content.view-category.layout-blog .img-intro {
  text-align: center !important;
}

/* === EVENTS PAGE: tighten spacing between cards === */
/* Requires Page Class: pt-events */


/* Remove extra padding added by columns */
body.pt-events .article-list > .row > [class*="col-"] {
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-bottom: 0 !important;
}

/* Remove extra spacing inside each article card */
body.pt-events .article-list article.item {
  margin: 0 !important;
  padding: 10px 8px !important;   /* tighter card padding */
}

/* Optional: slightly narrower cards (helps reduce white space) */
body.pt-events .com-content-category-blog article {
  max-width: 460px !important;   /* adjust 260–320 */
  margin: 0 auto !important;
}
/* EVENTS: real tight grid (no fake empty space) */
body.pt-events .article-list > .row{
  display: grid !important;
  grid-template-columns: repeat(3, 480px) !important; /* card column width */
  gap: 40px !important;                               /* real gap */
  justify-content: center !important;                 /* center whole grid */
}

/* IMPORTANT: let the card fill the grid column */
body.pt-events .com-content-category-blog article{
  width: 100% !important;
  max-width: none !important;   /* overrides your max-width:360px */
  margin: 0 !important;
}
/* Tablet: 2 columns */
@media (max-width: 1199px) {
  body.pt-events .article-list > .row {
    grid-template-columns: repeat(2, 340px) !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  body.pt-events .article-list > .row {
    grid-template-columns: 1fr !important;
  }
}