/* =========================================================
   ENCORE • GLOBAL CUSTOM.CSS (FULL FILE)
   Last update: About page slider "safe mode" + Blog cards
   ========================================================= */


/* =========================================================
   SECTION A — BLOG-TEST (Itemid=272)
   Card layout (as provided) — unchanged logic, EN comments
   ========================================================= */

body.itemid-272 .blog-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 16px;
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.itemid-272 .blog-card .blog-intro-image {
  width: 100%;
  aspect-ratio: 1000 / 417;
  object-fit: cover;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin: 0;
  padding: 0;
}

body.itemid-272 .blog-card .entry-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: #f36b21;
  text-transform: uppercase;
  margin-bottom: 12px;
}
body.itemid-272 .blog-card .entry-title a { text-decoration: none; color: #f36b21; }
body.itemid-272 .blog-card .entry-title a:hover { color: #d85f1d; }

body.itemid-272 .blog-card .blog-info {
  font-size: 14px;
  margin-bottom: 16px;
  color: #555;
}
body.itemid-272 .blog-card .blog-info .label { color: #f36b21; font-weight: 700; }
body.itemid-272 .blog-card .blog-info .divider { margin: 0 6px; color: #999; }

body.itemid-272 .blog-card .blog-introtext {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
}

body.itemid-272 .blog-card p.readmore a {
  color: #f36b21;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.itemid-272 .blog-card p.readmore a::after {
  content: "→";
  transition: transform .15s ease;
}
body.itemid-272 .blog-card p.readmore a:hover { text-decoration: underline; }
body.itemid-272 .blog-card p.readmore a:hover::after { transform: translateX(3px); }

@media (max-width: 640px){
  body.itemid-272 .blog-card .blog-intro-image {
    height: 260px !important;
    aspect-ratio: auto;
  }
}


/* =========================================================
   SECTION B — ABOUT PAGE (Itemid=108)
   Goal: make the hero slider ALWAYS visible (safe mode),
   even if Carousel JS doesn’t initialize.
   NOTE: SP Page Builder Carousel Pro uses .sppb-item-has-bg
         with background-image (not <img>).
   ========================================================= */

/* B0) Remove any template top gap only on About */
body.itemid-108 #sp-main-body,
body.itemid-108 .sp-page-builder .page-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* B1) Keep the default boxed layout for now (no full-bleed),
       so we stabilize visibility first */
body.itemid-108 #sp-main-body .container {
  max-width: 1170px;
  padding-left: 15px;
  padding-right: 15px;
}

/* B2) Target the exact section that holds the slider */
body.itemid-108 #section-id-1762877681606 {
  position: relative;
  margin: 0 0 24px 0;       /* spacing under the hero */
  padding: 0;
  overflow: hidden;         /* crop bleed if any */
}

/* B3) Kill inner gutters in the hero section */
body.itemid-108 #section-id-1762877681606 .sppb-container-inner,
body.itemid-108 #section-id-1762877681606 .sppb-row-container,
body.itemid-108 #section-id-1762877681606 .sppb-row,
body.itemid-108 #section-id-1762877681606 [class*="sppb-col-"] {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: none;
}

/* B4) Force the carousel to be visible even without JS */
body.itemid-108 #section-id-1762877681606 .sppb-carousel,
body.itemid-108 #section-id-1762877681606 .sppb-carousel-inner {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* B5) CRITICAL: give the slide backgrounds a HEIGHT
       (because they are background-image DIVs) */
body.itemid-108 #section-id-1762877681606 .sppb-item-has-bg {
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  /* Safe heights — adjust if you want taller/shorter */
  min-height: 420px;           /* desktop default */
}

/* Reasonable heights for other viewports */
@media (max-width: 1199.98px){
  body.itemid-108 #section-id-1762877681606 .sppb-item-has-bg { min-height: 380px; }
}
@media (max-width: 991.98px){
  body.itemid-108 #section-id-1762877681606 .sppb-item-has-bg { min-height: 320px; }
}
@media (max-width: 575.98px){
  body.itemid-108 #section-id-1762877681606 .sppb-item-has-bg { min-height: 260px; }
}

/* B6) Ensure inner containers don’t collapse the height */
body.itemid-108 #section-id-1762877681606 .sppb-carousel-item,
body.itemid-108 #section-id-1762877681606 .sppb-carousel-item .sppb-carousel-item-inner,
body.itemid-108 #section-id-1762877681606 .sppb-carousel-pro-inner-content {
  position: relative !important;
  display: block !important;
  min-height: 1px; /* avoid zero-height wrappers */
}

/* B7) Keep arrows inside the hero when JS is active */
body.itemid-108 #section-id-1762877681606 .sppb-carousel-control.left  { left: 16px !important; }
body.itemid-108 #section-id-1762877681606 .sppb-carousel-control.right { right: 16px !important; }

/* B8) Breathing space below the hero (in case modules follow) */
body.itemid-108 #section-id-1762877681606 + * { margin-top: 24px; }


/* =========================================================
   SECTION C — (OPTIONAL) FULL-BLEED MODE FOR ABOUT HERO
   When you confirm the hero is visible and stable, you can
   UNCOMMENT this block to make it span edge-to-edge.
   =========================================================
   
   body.itemid-108 #sp-main-body .container {
     max-width: 100% !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
   body.itemid-108 #section-id-1762877681606{
     margin-left: calc(50% - 50vw) !important;
     margin-right: calc(50% - 50vw) !important;
   }
*/