/* ==========================================================================
   DMU Construction — Projects page

   Loads on top of css/index.css, which supplies the tokens, base styles,
   header, footer, quick-contact bar, the .index-btn button system and the
   back-to-top button.

   SCOPE NOTE — this page mirrors the "Recent Work" page on the live site.
   The page is a title followed by one titled photo slider per project,
   repeated down the page. Each slider is a large main stage with a
   thumbnail strip beneath it, and the photographs open in a Fancybox
   lightbox. There is no masthead image, no intro copy, no category filter,
   no cards and no closing CTA band: the photographs are the content, so the
   only furniture is the section heading above each slider.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared container
   Mirrors the container rule in index.css and services.css so the left
   content edge is identical from the header down to the footer base.
   -------------------------------------------------------------------------- */
.projects-head__inner,
.projects-gallery__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   2. Page title
   A plain type band rather than a hero — the first photographs should be
   visible almost immediately, as they are on the reference page.
   -------------------------------------------------------------------------- */
.projects-head {
  /* The header is position:fixed, so the title band must clear it by the full
     header height - the same offset the services and contact pages use. The
     --header-h token already follows the utility strip and bar as they shrink
     at 991px and 575px, so the clearance stays correct at every width. */
  padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px));
  padding-bottom: clamp(24px, 3vw, 40px);
  background: var(--dmu-paper);
}

.projects-head__title {
  font-size: clamp(2.25rem, 1.40rem + 3.60vw, 4rem);
  line-height: 1.08;
}

/* --------------------------------------------------------------------------
   3. Project gallery
   One section holds every project. Each project is a list item carrying its
   own slider, and the items sit two per row. The single background means the
   projects are separated by the gap and their headings rather than by the
   alternating paper/sand bands the stacked sections used.
   -------------------------------------------------------------------------- */
.projects-gallery {
  padding-top: clamp(8px, 1vw, 16px);
  padding-bottom: clamp(48px, 6vw, 96px);
  background: var(--dmu-paper);
}

/* The section still needs an accessible name, but a visible heading above
   the grid would duplicate the "Recent Work" title band directly above it. */
.projects-gallery__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- two projects per row -- */
.projects-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px) clamp(20px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Titles in a row differ wildly in length — "Bathroom Design Oxford" sits on
   one line where "Double Side / Rear Extension, Loft and Full Refurbishment"
   takes two — so a plain block title would start the two sliders in a row at
   different heights. Each item is a column stretched to the row height, and
   the title reserves two lines, so every stage in the row begins on the same
   line whatever its title does. */
.projects-gallery__item {
  min-width: 0; /* let the slider shrink inside the grid track */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.projects-gallery__item-title {
  margin-bottom: clamp(12px, 1.4vw, 20px);
  font-size: clamp(1.125rem, .98rem + .62vw, 1.5rem);
  line-height: 1.25;
  /* Two lines at the current font-size. A one-line title keeps the slack
     below it so both stages in the row still align. */
  min-height: calc(2 * 1.25em);
}

/* --------------------------------------------------------------------------
   4. Project slider
   Each project is a large main stage with a thumbnail strip beneath it,
   mirroring the reference page. Both are Swipers; the strip is wired to the
   stage as its `thumbs` controller, so clicking a thumbnail moves the stage
   and moving the stage highlights the thumbnail.
   -------------------------------------------------------------------------- */
.projects-slider {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* -- main stage -- */
/* The aspect ratio lives on the stage rather than on each image, so the stage
   is exactly the same height for every project whatever the photographs
   inside it are. The slides and links then fill that box, and the arrows and
   counter — positioned against this element — land identically in every
   gallery. */
.projects-slider__main {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--dmu-line);
}

.projects-slider__slide {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.projects-slider__link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.projects-slider__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
  .projects-slider__link:hover img { transform: scale(1.03); }
}

/* Before Swiper initialises, the slides are stacked in normal flow, which
   would flash a tall column of images. The slider is faded out rather than
   having its extra slides hidden: `display: none` would take them out of
   layout at the moment Swiper measures, so it would see a single slide and
   lock navigation. Opacity keeps every slide measurable.

   `.is-ready` is added immediately after the sliders are constructed, so
   this state lasts only for that first frame. */
.projects-slider:not(.is-ready):not(.is-fallback) {
  opacity: 0;
}

/* Without Swiper the slides stay in normal flow, so the fixed-ratio stage
   would clip every photograph after the first and there would be no arrows to
   reach them. In that one case the stage gives up its ratio and the images
   carry it individually, which is what they did before — the page degrades to
   a readable column of photographs rather than a single cropped frame. */
.projects-slider.is-fallback .projects-slider__main {
  aspect-ratio: auto;
  overflow: visible;
}

.projects-slider.is-fallback .projects-slider__slide,
.projects-slider.is-fallback .projects-slider__link {
  height: auto;
}

.projects-slider.is-fallback .projects-slider__link img {
  height: auto;
  aspect-ratio: 16 / 10;
}

/* The strip, arrows and counter are all slider controls; with no slider to
   drive them they are inert, and the arrows would sit over the first
   photograph in a column that no longer scrolls sideways. */
.projects-slider.is-fallback .projects-thumbs,
.projects-slider.is-fallback .projects-slider__nav,
.projects-slider.is-fallback .projects-slider__count {
  display: none;
}

/* -- arrows -- */
.projects-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(38px, 4vw, 52px);
  aspect-ratio: 1;
  margin-top: calc(clamp(38px, 4vw, 52px) / -2);
  padding: 0;
  color: var(--dmu-navy);
  background: rgba(255, 255, 255, .88);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.projects-slider__nav svg { width: 45%; height: 45%; }

.projects-slider__nav--prev { left: clamp(10px, 1.4vw, 20px); }
.projects-slider__nav--next { right: clamp(10px, 1.4vw, 20px); }

.projects-slider__nav:hover {
  color: #fff;
  background: var(--dmu-red);
}

.projects-slider__nav:focus-visible {
  outline: 2px solid var(--dmu-red);
  outline-offset: 3px;
}

.projects-slider__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* -- counter -- */
.projects-slider__count {
  position: absolute;
  right: clamp(10px, 1.4vw, 20px);
  bottom: clamp(10px, 1.4vw, 20px);
  z-index: 3;
  margin: 0;
  padding: 6px 12px;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(26, 28, 43, .62);
  border-radius: 999px;
}

/* -- thumbnail strip -- */
/* The strip is the last thing in the slider column and always sits directly
   under the stage, so the galleries share one bottom edge however many
   photographs a project has. */
.projects-thumbs {
  width: 100%;
  margin-top: clamp(10px, 1.4vw, 16px);
}

/* Swiper sets the slide width inline at slidesPerView 4, so no width here.
   The height is ours, though: it keeps every strip the same depth whether a
   project has seven photographs or twenty, and stops a short strip from
   collapsing against a taller neighbour in the same row. */
.projects-thumbs .swiper-wrapper {
  align-items: stretch;
}

.projects-thumbs__slide {
  overflow: hidden;
  height: auto; /* override Swiper's per-slide height so the ratio below wins */
  cursor: pointer;
  background: var(--dmu-line);
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* Matching the stage's ratio keeps a thumbnail a true miniature of the frame
   it selects, and makes the strip depth a fixed fraction of the stage width
   in every gallery. */
.projects-thumbs__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}

.projects-thumbs__slide:hover { opacity: .85; }

.projects-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: inset 0 0 0 3px var(--dmu-red);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
/* Two sliders side by side get cramped well before phone widths: at this
   point each stage is too small to read, so the projects stack instead. */
@media (max-width: 899px) {
  .projects-gallery__grid { grid-template-columns: minmax(0, 1fr); }

  /* Once the projects stack there is no neighbour to align to, so the title
     takes only the room it needs rather than always reserving two lines. */
  .projects-gallery__item-title { min-height: 0; }
}

@media (max-width: 767px) {
  /* A single stacked stage runs full-bleed-wide, so a slightly shallower
     frame keeps it from dominating the screen. The ratio stays on the stage
     so the thumbnails and controls follow it. */
  .projects-slider__main { aspect-ratio: 3 / 2; }
  .projects-thumbs__slide img { aspect-ratio: 3 / 2; }

  .projects-slider__count {
    padding: 4px 10px;
    font-size: .75rem;
  }
}

/* On touch the strip is swiped rather than clicked, so the arrows only get
   in the way of the photograph. */
@media (max-width: 479px) {
  .projects-slider__nav { display: none; }
}

/* --------------------------------------------------------------------------
   6. Fancybox — match the site's navy/red palette
   -------------------------------------------------------------------------- */
.fancybox__container {
  --fancybox-bg: rgba(26, 28, 43, .94);
  --fancybox-accent-color: var(--dmu-red);
}

.fancybox__caption {
  font-family: inherit;
  font-size: .9375rem;
}

/* Larger, more prominent prev/next arrows so they are easy to spot and hit.
   Fancybox v5 renders the arrows as .f-button.is-prev / .is-next in .fancybox__nav. */
.fancybox__nav .f-button.is-prev,
.fancybox__nav .f-button.is-next {
  --f-button-width: 60px;
  --f-button-height: 60px;
  --f-button-svg-width: 30px;
  --f-button-svg-height: 30px;
  --f-button-svg-stroke-width: 3;
  --f-button-color: #000;
  --f-button-hover-color: #000;
  --f-button-bg: #fff;
  --f-button-hover-bg: #fff;
  --f-button-active-bg: #fff;
  --f-button-svg-filter: none;
  --f-button-border: 2px solid rgba(0, 0, 0, .15);
  --f-button-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  --f-button-transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}

.fancybox__nav .f-button.is-prev:hover,
.fancybox__nav .f-button.is-next:hover {
  transform: translateY(-50%) scale(1.08);
  --f-button-border: 2px solid var(--dmu-red);
}

/* --------------------------------------------------------------------------
   7. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .projects-slider__link img { transition: none; }
  .projects-slider__link:hover img { transform: none; }
  .projects-thumbs__slide { transition: none; }
}