/* =================================================== */
/*                 File: home.css                      */
/*                 HOME PAGE STYLES                    */
/*                 Page ID: 7                          */
/* =================================================== */


/* =============================== */
/* SECTION – TECHNOLOGIES OVERVIEW */
/* =============================== */

/* Technologies section base */
#home-technologies {
  /* background-color: #ffffff; */
  border-top: 1px solid var(--bering-dark-grey);
  /* padding-top: 2.7rem;
  padding-bottom: 3rem; */
}

/* heading alignment */
#home-technologies .elementor-widget-heading .elementor-heading-title {
  text-align: left;
  /* margin-bottom: 1.6rem; */
}

/* Base grid: 2×2 on desktop */
#home-technologies .tech-grid {

  display: grid;
  
  /* 2 cards per row on desktop */
  /* grid-template-columns: repeat(2, minmax(0, 1fr)); */ 
  grid-template-columns: repeat(2, minmax(280px, 520px));

  /* Base spacing (good for standard laptops) */
  column-gap: 2.4rem !important; /* space between columns */
  row-gap: 2.8rem !important; /* space between rows */

  align-items: stretch;
  justify-content: center !important;
}

/* Elementor tablet breakpoint – still 2 columns */
@media (max-width: 1024px) {
  #home-technologies .tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Elementor mobile breakpoint – stack into 1 column */
@media (max-width: 767px) {
  #home-technologies .tech-grid {
    grid-template-columns: 1fr;
    row-gap: 2rem; /* mobile portrait vertical spacing */
  }
}

/* Widescreen ≥1367px – a bit more breathing space */
@media (min-width: 1367px) {
  #home-technologies .tech-grid {
    column-gap: 3rem;
    row-gap: 3rem;
  }
}

/* Tablet Landscape: 1025–1200px */
@media (max-width: 1200px) and (min-width: 1025px) {
  #home-technologies .tech-grid {
    column-gap: 2rem;
    row-gap: 2.4rem;
  }
}

/* Tablet Portrait: 881–1024px */
@media (max-width: 1024px) and (min-width: 881px) {
  #home-technologies .tech-grid {
    column-gap: 2rem;
    row-gap: 2.6rem;
  }
}

/* Mobile Landscape: 768–880px (still 2 columns) */
@media (max-width: 880px) and (min-width: 768px) {
  #home-technologies .tech-grid {
    row-gap: 2.4rem;
  }
}

/* Tech cards become flatter rows with a left accent */
#home-technologies .tech-card {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 1rem 0.6rem 0.8rem 1.2rem;
  box-shadow: none;
  text-align: left;

  /* IMPORTANT: clip the accent bar to the rounded card */
  overflow: hidden;
}

/* accent bar – now perfectly aligned inside the card */
#home-technologies .tech-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0; /* start at top edge of card */
  bottom: 0; /* end at bottom edge of card */
  width: 3px;
  background: var(--bering-accent);
}
/* END SECTION TECHNOLOGIES OVERVIEW */
/* ================================= */

/* =========================== */
/* SECTION – SERVICES OVERVIEW */
/* =========================== */

#home-services {
  /* background-color: var(--bering-light-green); */
  /* padding-top: 3rem;
  padding-bottom: 3.5rem; */
}

#home-services .elementor-widget-heading .elementor-heading-title {
  text-align: center;
  /* margin-bottom: 1.8rem; */
}


/* Grid wrapper for the 5 cards – now flex, like Services */
#home-services .services-intro-grid {
  /* margin-top: 2.5rem; */
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 1.75rem;
}

/* Base: 3 cards per row on desktop */
#home-services .services-intro-grid > .service-card {
  box-sizing: border-box;
  flex: 0 1 calc(33.333% - 1.17rem);
  width: auto !important; /* override Elementor full-width */
}

/* Tablet Landscape (≤1200px): 2 cards per row */
@media (max-width: 1200px) {
  #home-services .services-intro-grid > .service-card {
    flex: 0 1 calc(50% - 0.9rem);
  }
}

/* Mobile (≤767px): 1 card per row */
@media (max-width: 767px) {
  #home-services .services-intro-grid > .service-card {
    flex: 0 1 100%;
  }
}

/* ============================================= */
/* HARD OVERRIDE – HOME SERVICES INTRO GRID      */
/* (matches Services page behavior)              */
/* ============================================= */

#home-services .services-intro-grid.e-con.e-flex {
  display: flex !important;
  flex-direction: row !important;   /* stop any vertical stacking */
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* Make sure cards behave as flex columns, not full-width blocks */
#home-services .services-intro-grid.e-con.e-flex > .service-card.e-con {
  box-sizing: border-box;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  flex-basis: calc(33.333% - 1.17rem) !important;
  width: auto !important;
}

/* Tablet Landscape (≤1200px): 2 cards per row */
@media (max-width: 1200px) {
  #home-services .services-intro-grid.e-con.e-flex > .service-card.e-con {
    flex-basis: calc(50% - 0.9rem) !important;
  }
}

/* Mobile (≤767px): 1 card per row */
@media (max-width: 767px) {
  #home-services .services-intro-grid.e-con.e-flex > .service-card.e-con {
    flex-basis: 100% !important;
  }
}

/* END HARD OVERRIDE – HOME SERVICES INTRO GRID */
/* ============================================ */

/* Individual service cards on Home (updated) */
#home-services .service-card {
  background: #ffffff;
  border: 1px solid var(--bering-dark-grey);
  border-radius: 12px;
  padding: 1.6rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  /* new smoother animation */
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

/* accent gradient bar */
#home-services .service-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bering-accent), var(--bering-accent-hover));
}

/* hover */
#home-services .service-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}

/* END SECTION SERVICES OVERVIEW */
/* ============================= */

/* ================================ */
/* SECTION – WHY WORK WITH BERING  */
/* ================================ */

#home-why {
  /* padding-top: 3rem;
  padding-bottom: 3.25rem; */
}

/* Intro paragraph under the H2 */
#home-why .text-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* List block spacing */
#home-why .elementor-element-22a4c82 {
  /* margin-top: 2rem; */
}

/* Bullet lines inside the list text editor */
#home-why .elementor-element-22a4c82 .elementor-widget-text-editor p {
  margin: 0 0 0.35rem;
  line-height: 1.55;
}
/* END SECTION WHY WORK WITH BERING */
/* ================================ */

/* ============================== */
/* SECTION - CLIENTS AND PARTNERS */
/* ============================== */

#home-clients {
  /* padding-top: 3rem;
  padding-bottom: 3.5rem; */
}

/* Center heading + intro text in this section */
#home-clients .elementor-widget-heading,
#home-clients .elementor-widget-text-editor {
  text-align: center;
}

/* Optional: keep the intro line nicely narrow */
#home-clients .elementor-widget-text-editor h5 {
  /* max-width: 680px; */
  margin: 0.75rem auto 0;
  font-weight: 400;
}

/* Logo strip layout */
#home-clients .clients-logos {
  /* margin-top: 2.4rem; */
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.6rem; /* row gap / column gap */
  align-items: center;
  justify-content: center;
}

/* Logo "badges" */
#home-clients .client-logo {
  width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

  opacity: 0.9;
  filter: grayscale(100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

/* Make sure logos fit nicely in the badge */
#home-clients .client-logo img {
  max-width: 90%;
  max-height: 80%;
  height: auto;
  width: auto;
}

/* Hover: lift + color reveal */
#home-clients .client-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  opacity: 1;
  filter: grayscale(0%);
}

/* Tablet tweaks */
@media (max-width: 1024px) {
  #home-clients {
    /* padding-top: 2.5rem;
    padding-bottom: 3rem; */
  }

  #home-clients .clients-logos {
    gap: 1.8rem 2.2rem;
  }

  #home-clients .client-logo {
    width: 140px;
    height: 65px;
  }
}

/* Mobile tweaks */
@media (max-width: 767px) {
  #home-clients {
    /* padding-top: 2.2rem;
    padding-bottom: 2.7rem; */
  }

  #home-clients .clients-logos {
    gap: 1.4rem 1.6rem;
  }

  #home-clients .client-logo {
    width: 130px;
    height: 60px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
  }
}
/* END SECTION CLIENTS AND PARTNERS */
/* ================================ */

/* ========================== */
/* SECTION – NEWS TEASER */
/* ========================== */

#home-news {
  /* background-color: var(--bering-light-green); */
  border-top: 1px solid var(--bering-dark-grey);
  border-bottom: 1px solid var(--bering-dark-grey);
}

/* Inner content band */
#home-news .container-inner {
  padding-bottom: 2.8rem; */
}

/* Centered heading */
#home-news .elementor-widget-heading {
  text-align: center;
  /* margin-bottom: 0.6rem; */
}

/* Optional eyebrow label above the H2 (if you add one later) */
#home-news .elementor-widget-heading .elementor-heading-title {
  margin: 0;
}

/* Intro text under the heading */
#home-news .elementor-widget-text-editor {
  max-width: 640px;
  margin: 0.2rem auto 1.6rem auto;
  text-align: center;
}

/* Button centered */
#home-news .elementor-widget-button {
  text-align: center;
}

/* END SECTION NEWS TEASER */
/* ======================= */

/* ======================== */
/* SECTION – CALL TO ACTION */
/* ======================== */

/* Constrain inner width & center everything */
#home-cta .container-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* CTA body text + note */
#home-cta .services-cta-text,
#home-cta .services-cta-note {
  max-width: 640px;
  margin: 0 auto 18px;
}

/* Base button styling (shared) */
#home-cta .elementor-widget-button.bering-btn-primary .elementor-button,
#home-cta .elementor-widget-button.bering-btn-secondary .elementor-button {
  border-radius: 999px;
  border-style: solid;
  border-width: 2px;
  padding: 0.7rem 1.8rem; /* baseline padding */
  font-weight: 600;
}

/* 🔧 Primary button gets +1px vertical padding */
#home-cta .elementor-widget-button.bering-btn-primary .elementor-button {
  padding-top: 12px !important;
  padding-bottom: 12px !important;

  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--bering-accent-hover) !important;
}

/* Secondary button: transparent + white outline */
#home-cta .elementor-widget-button.bering-btn-secondary .elementor-button {
  background-color: transparent;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Hover for both */
#home-cta .elementor-widget-button.bering-btn-primary .elementor-button:hover,
#home-cta .elementor-widget-button.bering-btn-secondary .elementor-button:hover {
  background-color: var(--bering-accent-hover) !important;
  border-color: var(--bering-accent-hover) !important;
  color: #ffffff !important;
}

/* ========================== */
/* END SECTION CALL TO ACTION */
/* ========================== */

/* End of file home.css */