/* products-services.css
   Edge-to-edge Products & Services styles (paste into this file).
   If your theme already contains typography/variables, adapt colors/sizes accordingly.
*/

.ps-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.ps-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 420ms cubic-bezier(.2,.9,.2,1); z-index: 0; opacity: 1; }
.ps-bg--front { opacity: 1; }
.ps-bg--back { opacity: 0; }

.ps-inner { position: relative; z-index: 2; max-width: 1350px; margin: 0 auto; padding: 36px 20px; box-sizing: border-box; }
.ps-title { margin: 0 0 14px 0; font-family: 'open_sansbold', sans-serif; font-size: 22px; color: #25311a; text-align: center; }

.ps-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.ps-column { display: block; min-height: 360px; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 6px 18px rgba(16,20,10,0.06); transition: transform 260ms ease, box-shadow 260ms ease; text-decoration: none; color: inherit; background: transparent; }
.ps-column-inner { height: 100%; display:flex; flex-direction:column; }
.ps-col-image { flex:1 1 auto; background-size: cover; background-position: center; min-height:220px; transition: transform 420ms ease; }
.ps-col-overlay { position:absolute; inset:0; background: rgba(6,7,6,0.18); transition: background 260ms ease; }
.ps-col-content { position: relative; padding: 18px; z-index: 3; }
.ps-col-heading { font-weight:700; font-family:'open_sansbold',sans-serif; font-size:18px; margin-bottom:6px; }
.ps-column:hover, .ps-column:focus { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16,20,10,0.12); }
.ps-column:hover .ps-col-overlay, .ps-column:focus .ps-col-overlay { background: rgba(6,7,6,0.28); }
.ps-column:hover .ps-col-image, .ps-column:focus .ps-col-image { transform: scale(1.04); }
.ps-column:focus { outline: none; box-shadow: 0 10px 26px rgba(16,20,10,0.12), 0 0 0 3px rgba(148,0,0,0.12); }

@media (max-width:1199px) { .ps-grid { grid-template-columns: repeat(3,1fr); } .ps-column { min-height:320px; } }
@media (max-width:767px) { .ps-inner { padding:20px 14px; } .ps-grid { grid-template-columns:1fr; gap:12px; } .ps-column { min-height:220px; border-radius:4px; } .ps-title { text-align:left; margin-left:6px; font-size:18px; } }

/* visually hidden helper */
.sr-only { position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
/* Make the Products/Services section truly full-bleed and align with the hero slideshow */
.ps-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  padding: 0; /* remove outer white gutters */
  overflow: visible;
  z-index: 10;
}

/* Keep inner content aligned with site container (same max-width as hero) */
.ps-section .ps-inner {
  max-width: 1350px;
  margin: 0 auto;
  padding: 24px 15px; /* small breathing padding to match hero inner */
  box-sizing: border-box;
}

/* Background layers should cover the same height as the slideshow (JS sync below will set explicit height) */
.ps-section .ps-bg {
  width: 100%;
  background-size: cover;
  background-position: center center;
  min-height: 420px; /* fallback; JS will override to the hero height */
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1);
}

/* Tile layout: force content to the bottom using flex so title/buttons stick to bottom */
.ps-section .ps-column {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.ps-section .ps-column-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* keeps .ps-col-content at the bottom */
  height: 100%;
  box-sizing: border-box;
}

/* content block sits at bottom and animates up on hover/focus */
.ps-section .ps-col-content {
  z-index: 3;
  padding: 18px;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  transform: translateY(0);
  box-sizing: border-box;
}

/* Slide up the content on hover/focus (adjust amount to taste) */
.ps-section .ps-column:hover .ps-col-content,
.ps-section .ps-column:focus-within .ps-col-content {
  transform: translateY(-36%); /* raises the content up from the bottom */
}

/* Darken overlay slightly on hover to keep text readable */
.ps-section .ps-column:hover .ps-col-overlay,
.ps-section .ps-column:focus-within .ps-col-overlay {
  background: rgba(0,0,0,0.32);
}

/* Align the grid cells so tiles sit flush to bottom */
.ps-section .ps-grid {
  display: grid;
  align-items: end;
  gap: 14px;
}

/* Small responsive tweaks */
@media (max-width: 1199px) {
  .ps-section .ps-inner { padding: 18px; }
}
@media (max-width: 767px) {
  .ps-section .ps-inner { padding: 12px; }
  .ps-section .ps-bg { min-height: 280px; }
  .ps-section .ps-column { min-height: 220px; }
  .ps-section .ps-column:hover .ps-col-content { transform: translateY(-18%); }
}
/* === Make products section exactly match the hero slideshow (edge-to-edge) === */
.ps-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  padding: 0;                 /* remove outer gutters */
  overflow: visible;
  z-index: 10;
}

/* Constrain inner content to the same max width as the hero but remove large side padding */
.ps-section .ps-inner {
  max-width: 1350px;         /* matches hero inner */
  margin: 0 auto;
  padding: 18px 12px;        /* small breathing room only */
  box-sizing: border-box;
}

/* Ensure background layers fill the same height as the slideshow */
.ps-section .ps-bg {
  background-size: cover;
  background-position: center center;
  min-height: 420px; /* fallback; JS sync (if present) can set exact height */
}

/* Force grid/tiles to align to the bottom and remove inner gutters */
.ps-section .ps-grid {
  display: grid;
  gap: 14px;
  align-items: end;          /* keeps tiles flush to the bottom */
}

/* Tile internals: keep content at bottom and animate up on hover */
.ps-section .ps-column {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: block;
}

.ps-section .ps-column-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pushes .ps-col-content to bottom */
  height: 100%;
  box-sizing: border-box;
}

.ps-section .ps-col-content {
  z-index: 3;
  padding: 18px;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  transform: translateY(0);
  box-sizing: border-box;
}

/* Slide the content up on hover/focus (adjust percentage if you want more/less movement) */
.ps-section .ps-column:hover .ps-col-content,
.ps-section .ps-column:focus-within .ps-col-content {
  transform: translateY(-36%);
}

/* Darken overlay slightly on hover for legibility */
.ps-section .ps-column:hover .ps-col-overlay,
.ps-section .ps-column:focus-within .ps-col-overlay {
  background: rgba(0,0,0,0.32);
}

/* Small screens: smaller heights and slightly smaller translate */
@media (max-width: 767px) {
  .ps-section .ps-inner { padding: 12px; }
  .ps-section .ps-bg { min-height: 280px; }
  .ps-section .ps-column { min-height: 220px; }
  .ps-section .ps-column:hover .ps-col-content { transform: translateY(-18%); }
}

/* Safety override: if any ancestor adds horizontal padding, remove it for this section */
.ps-section,
.ps-section .ps-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-id-1570 .box-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.page-id-1570 .box-item.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}