/* =========================================
   MODERN OWL CAROUSEL – PROJECT CARDS
   Images 1500 x 758 are shown in full (no crop)
========================================= */
.projects-container{
  width: 100%;
  margin: 0 auto;
}
.project-card {
  padding: 0;
  background: #0d0f12;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}

.pc-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Owl + images ---------- */
.pc-owl,
.pc-owl .owl-stage-outer,
.pc-owl .owl-stage,
.pc-owl .owl-item {
  width: 100%;
}

/* Keeps the stage on its own layer so the zoom doesn't repaint the card */
.pc-owl .owl-stage-outer {
  overflow: hidden;
  transform: translateZ(0);
}

.pc-slide {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1500 / 758; /* exact image ratio => nothing is cropped */
  background: #0d0f12;
}

.pc-owl .pc-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop */
  user-select: none;
  -webkit-user-drag: none;
  transform: scale(1) translateZ(0);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* SLOW ZOOM-IN on every slide (1 -> 1.12, 10s).
   Each image starts at scale(1), so it is shown uncropped at first.
   The animation keeps running during the fade, so the image never snaps
   back while it is still on screen. */
.pc-owl .owl-item.active .pc-image,
.pc-owl .owl-item.owl-animated-in .pc-image,
.pc-owl .owl-item.owl-animated-out .pc-image {
  animation-name: pcZoomIn;
  animation-duration: 10s; /* slow zoom: 8–12s range */
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

@keyframes pcZoomIn {
  from { transform: scale(1) translateZ(0); }
  to   { transform: scale(1.12) translateZ(0); }
}

/* Pause (not speed up) on hover – changing duration mid-run causes a jump */
.pc-gallery:hover .pc-owl .owl-item.active .pc-image,
.pc-gallery:hover .pc-owl .owl-item.owl-animated-in .pc-image,
.pc-gallery:hover .pc-owl .owl-item.owl-animated-out .pc-image {
  animation-play-state: running;
}

/* Smooth cross-fade between slides.
   Only the OUTGOING slide fades (on top). The incoming slide stays fully
   visible underneath, so there is no dark "dip" in the middle of the fade. */
.pc-owl .owl-item { animation-fill-mode: both; }

.pc-owl .owl-item.owl-animated-in  { z-index: 0; }
.pc-owl .owl-item.owl-animated-out { z-index: 1; }

.pc-owl .pcFadeIn {
  animation: pcHold 1s linear both; /* keeps Owl's animationend event, no opacity dip */
}
.pc-owl .pcFadeOut {
  animation: pcFadeOut 1s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: opacity;
}

@keyframes pcHold    { from { opacity: 1; } to { opacity: 1; } }
@keyframes pcFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Dark gradient so bottom text/buttons stay readable (per slide) */
.pc-slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Side arrows that stay fixed while slides change */
.pc-side-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  margin-top: -21px;
}

.pc-side-arrow.pc-prev { left: 20px; }
.pc-side-arrow.pc-next { right: 20px; }

.pc-owl .owl-item.active .pc-slide .pc-info,
.pc-owl .owl-item.active .pc-slide .pc-controls {
  animation: pcFadeIn 1.1s ease both;
}

/* ---------- Status chip ---------- */
.pc-gallery .project-status {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pc-gallery .status-completed { background: rgba(34, 160, 90, 0.75); }
.pc-gallery .status-running   { background: rgba(230, 140, 20, 0.8); }

/* ---------- Info (bottom-left) ---------- */
.pc-info {
  position: absolute;
  left: 22px;
  bottom: 20px;
  right: 230px;
  z-index: 4;
  color: #fff;
  transform: translateY(0);
  transition: transform 0.4s ease;
}

.pc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.pc-number { font-weight: 700; }

.pc-line {
  width: 34px;
  height: 2px;
  background: #fff;
  transform-origin: left;
  transition: width 0.4s ease;
}

.pc-gallery:hover .pc-line { width: 56px; }

.pc-title {
  margin: 0;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.25;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.pc-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.pc-location svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Controls (bottom-right) ---------- */
.pc-controls {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pc-arrows { display: flex; gap: 8px; }

.pc-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.pc-arrow svg,
.pc-details-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-arrow:hover {
  background: #fff;
  color: #111;
  transform: scale(1.1);
}

.pc-arrow:active { transform: scale(0.94); }

.pc-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #111;
  background: #fff;
  border-radius: 999px;
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background 0.3s ease, color 0.3s ease;
}

.pc-details-btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; }

.pc-details-btn:hover {
  background: #1A6469; /* change to your brand colour */
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.pc-details-btn:hover svg { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .pc-info { right: 20px; bottom: 70px; }
  .pc-controls { left: 16px; right: 16px; bottom: 14px; justify-content: space-between; }
  .pc-arrow { width: 38px; height: 38px; }
  .pc-details-btn { height: 38px; padding: 0 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-owl .owl-item .pc-image { animation: none !important; }
}

/* =========================================
   CONTAINER OVERRIDE – filters + images = 1500px
   (scoped to the projects section so the footer keeps its own width)
========================================= */


/* one card per row so each 1500px image fills the container */
.projects-section .projects-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* =========================================
   SEARCH + FILTERS (1500px wide, modern)
========================================= */
.projects-section .projects-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto 32px;
}

.projects-section .toolbar-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 180px;          /* selects share the row evenly */
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.projects-section .toolbar-control.search-control { flex: 2 1 320px; } /* search is wider */

.projects-section .toolbar-control:hover,
.projects-section .toolbar-control:focus-within {
  border-color: var(--green-1);    /* brand colour */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.projects-section .toolbar-control svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #6b7280;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.projects-section .toolbar-control input,
.projects-section .toolbar-control select {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: #111827;
  cursor: pointer;
}

.projects-section .toolbar-control input { cursor: text; }

.projects-section .clear-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  height: 50px;
  padding: 0 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #1A6469;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.projects-section .clear-filters svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.projects-section .clear-filters:hover {
  background: var(--green-1);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .projects-section .toolbar-control,
  .projects-section .toolbar-control.search-control { flex: 1 1 100%; }
  .projects-section .clear-filters { flex: 1 1 100%; }
}