/* =====================================================================
   Eralux Projects — page-specific styles only — theme tokens come from
   design-system.css (mobile boundary: 900px — see --eralux-mobile-breakpoint)
   ===================================================================== */

:root {
  /* Local aliases → master theme tokens */
  --eralux-projects-ink: var(--ews-ink);
  --eralux-projects-paper: var(--ews-paper);
  --eralux-projects-deep: var(--ews-paper-2);
  --eralux-projects-muted: var(--ews-muted);
  --eralux-projects-line: var(--ews-line);
  --eralux-projects-accent: var(--ews-accent);
  --eralux-projects-gutter: var(--ews-gutter);
}

.eralux-projects-page,
.eralux-projects-page *,
.eralux-projects-modal,
.eralux-projects-modal * {
  box-sizing: border-box;
}

.eralux-projects-page {
  position: relative;
  left: 50%;
  width: calc(100vw - var(--ews-scrollbar, 0px));
  min-width: 320px;
  margin-left: calc(-50vw + var(--ews-scrollbar, 0px) / 2);
  background: var(--eralux-projects-paper);
  color: var(--eralux-projects-ink);
  overflow: visible;
}

.eralux-projects-page img {
  display: block;
  width: 100%;
}

.eralux-projects-page button {
  color: inherit;
}

.eralux-projects-title {
  /* Match the Contact Us heading rhythm. */
  margin: clamp(28px, 4vw, 59px) 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
}

.eralux-projects-filter-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--ews-paper-rgb), 0.98);
  border-bottom: 1px solid var(--eralux-projects-line);
  backdrop-filter: blur(12px);
}

.eralux-projects-filter-bar {
  width: 100%;
  min-height: 104px;
  margin: 0;
  padding: 18px var(--eralux-projects-gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

.eralux-projects-filter-label {
  flex: none;
  color: rgba(var(--ews-ink-rgb), 0.72);
}

.eralux-projects-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.eralux-projects-dropdown {
  position: relative;
  width: clamp(220px, 18vw, 310px);
}

.eralux-projects-dropdown-toggle {
  position: relative;
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(var(--ews-ink-rgb), 0.22);
  border-radius: var(--ews-radius);
  background: rgba(var(--ews-contrast-ink-rgb), 0.55);
  padding: 0 54px 0 19px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.eralux-projects-dropdown-toggle:hover {
  background: var(--ews-contrast-ink);
  border-color: rgba(var(--ews-ink-rgb), 0.42);
}

.eralux-projects-dropdown-toggle:focus-visible,
.eralux-projects-dropdown.is-open .eralux-projects-dropdown-toggle {
  outline: 0;
  border-color: var(--eralux-projects-ink);
  background: var(--ews-contrast-ink);
  box-shadow: 0 0 0 3px rgba(var(--ews-ink-rgb), 0.08);
}

.eralux-projects-dropdown-toggle:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}

.eralux-projects-dropdown.is-open .eralux-projects-dropdown-toggle:after {
  transform: translateY(-25%) rotate(225deg);
}

.eralux-projects-dropdown-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 7px;
  background: var(--ews-contrast-ink);
  border: 1px solid rgba(var(--ews-ink-rgb), 0.16);
  border-radius: var(--ews-radius);
  box-shadow: 0 18px 42px rgba(var(--ews-ink-rgb), 0.16);
  list-style: none;
}

.eralux-projects-dropdown-menu[hidden] {
  display: none;
}

.eralux-projects-dropdown-option {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--ews-radius);
  background: transparent;
  padding: 13px 12px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.eralux-projects-dropdown-option:hover,
.eralux-projects-dropdown-option:focus-visible {
  outline: 0;
  background: var(--eralux-projects-deep);
}

.eralux-projects-dropdown-option.is-selected {
  background: var(--eralux-projects-ink);
  color: var(--ews-contrast-ink);
}

.eralux-projects-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(310px, 32vw);
  margin-left: auto;
  border-bottom: 1px solid rgba(var(--ews-ink-rgb), 0.36);
  padding: 8px 0;
}

.eralux-projects-search svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.eralux-projects-search input {
  width: 100%;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0;
  background: transparent !important;
  padding: 0 !important;
  color: var(--eralux-projects-ink);
}

.eralux-projects-search input::placeholder {
  color: var(--ews-muted-ink);
  opacity: 1;
}

.eralux-projects-section {
  width: 100%;
  margin: 0;
  padding: 36px var(--eralux-projects-gutter) var(--ews-page-pad-bottom);
}

/* Alternating full-width rows: text on one side, image on the other; the
   sides swap on every visible row (`.is-reversed` is set by the script). */
.eralux-projects-grid {
  display: flex;
  flex-direction: column;
  /* Projects stack flush — no gap between tiles. */
  gap: 0;
}

.eralux-projects-card {
  width: 100%;
}

/* The tiles stack flush by design, so the rule between them is what
   separates one project from the next. On the first visible tile it would
   be a stray line under the filter bar, hence :not(:first-child) — and
   because filtering hides tiles with [hidden], the hidden ones are skipped
   so the rule never lands on the wrong one. */
.eralux-projects-card:not([hidden]) ~ .eralux-projects-card:not([hidden]) {
  border-top: 1px solid var(--eralux-projects-line);
}

.eralux-projects-card[hidden] {
  display: none;
}

/* Each project is one flush tile: a text panel and the image joined edge
   to edge (like a grid block), zigzagging sides row by row. */
.eralux-projects-card-link {
  display: grid;
  grid-template-columns: minmax(300px, 42%) 1fr;
  align-items: stretch;
  column-gap: 0;
  color: inherit;
  text-decoration: none;
}

/* Reversed rows swap BOTH the order and the column widths, so the image
   is always the wide (58%) side. Normal row: image spans 42% -> 100%;
   reversed row: image spans 0% -> 58%. Both images extend past the
   middle line, interlocking like the reference. */
.eralux-projects-card.is-reversed .eralux-projects-card-link {
  grid-template-columns: 1fr minmax(300px, 42%);
}

.eralux-projects-card.is-reversed .eralux-projects-card-link .eralux-projects-meta {
  order: 2;
}

.eralux-projects-card.is-reversed .eralux-projects-card-link .eralux-projects-media {
  order: 1;
}

.eralux-projects-media {
  position: relative;
  overflow: hidden;
  background: var(--eralux-projects-deep);
}

.eralux-projects-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(var(--ews-ink-rgb), 0.15));
  opacity: 0;
  transition: opacity 0.55s;
}

.eralux-projects-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.eralux-projects-card-link:hover .eralux-projects-media img {
  transform: scale(1.045);
}

.eralux-projects-card-link:hover .eralux-projects-media:after {
  opacity: 1;
}

.eralux-projects-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 60px);
  text-align: left;
}

.eralux-projects-meta h3 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.4vw, 38px);
}

/* The card shows its title and nothing else, so it needs to say out loud
   that it opens something. On hover (and on keyboard focus, which the
   image zoom alone never signalled) the cue rises into place, its rule
   draws itself left to right and the arrow steps forward. */
.eralux-projects-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin-top: 18px;
  color: var(--ews-accent-dark);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.eralux-projects-card-link:hover .eralux-projects-cue,
.eralux-projects-card-link:focus-visible .eralux-projects-cue {
  opacity: 1;
  transform: translateY(0);
}

.eralux-projects-cue-text {
  position: relative;
}

.eralux-projects-cue-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.eralux-projects-card-link:hover .eralux-projects-cue-text::after,
.eralux-projects-card-link:focus-visible .eralux-projects-cue-text::after {
  transform: scaleX(1);
}

.eralux-projects-cue svg {
  width: 22px;
  flex: 0 0 auto;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.eralux-projects-card-link:hover .eralux-projects-cue svg,
.eralux-projects-card-link:focus-visible .eralux-projects-cue svg {
  transform: translateX(5px);
}

/* No hover to reveal it on touch, so it simply stays visible there. */
@media (hover: none) {
  .eralux-projects-cue {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eralux-projects-cue,
  .eralux-projects-cue svg,
  .eralux-projects-cue-text::after {
    transition: none;
  }

  .eralux-projects-cue {
    opacity: 1;
    transform: none;
  }
}

.eralux-projects-empty {
  display: none;
  padding: 90px 20px;
  text-align: center;
  border: 1px solid var(--eralux-projects-line);
}

.eralux-projects-empty.is-visible {
  display: block;
}

.eralux-projects-card-link {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.eralux-projects-modal[hidden] {
  display: none;
}

.eralux-projects-modal {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 76px);
}

.eralux-projects-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--ews-ink-rgb), 0.72);
}

.eralux-projects-modal-panel {
  position: relative;
  width: min(86vw, 1280px);
  max-height: calc(100vh - clamp(48px, 10vw, 152px));
  max-height: calc(100dvh - clamp(48px, 10vw, 152px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ews-ink-rgb), 0.52) transparent;
  background: var(--eralux-projects-paper);
}

.eralux-projects-modal-panel::-webkit-scrollbar {
  width: 9px;
}

.eralux-projects-modal-panel::-webkit-scrollbar-track {
  background: transparent;
}

.eralux-projects-modal-panel::-webkit-scrollbar-thumb {
  background: rgba(var(--ews-ink-rgb), 0.48);
  border: 2px solid var(--eralux-projects-paper);
  border-radius: var(--ews-radius-pill);
}

.eralux-projects-modal-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--ews-ink-rgb), 0.72);
}

.eralux-projects-modal-controls {
  position: sticky;
  z-index: 4;
  top: 18px;
  float: right;
  display: flex;
  gap: 10px;
  margin: 18px 18px -62px 0;
}

.eralux-projects-modal-controls .eralux-projects-modal-close {
  position: static;
  float: none;
  margin: 0;
}

.eralux-projects-modal-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--eralux-projects-line);
  border-radius: 50%;
  background: rgba(var(--ews-paper-rgb), 0.96);
  box-shadow: 0 4px 18px rgba(var(--ews-ink-rgb), 0.1);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.eralux-projects-modal-expand svg {
  width: 18px;
  height: 18px;
}

.eralux-projects-modal-expand:hover,
.eralux-projects-modal-expand:focus-visible {
  outline: 0;
  background: var(--eralux-projects-ink);
  color: var(--eralux-projects-paper);
}

/* Expanded pop-up: almost the full viewport, centred with the SAME gap
   to every viewport edge (the modal container provides the gap). */
.eralux-projects-modal.is-expanded {
  padding: 20px;
}

.eralux-projects-modal.is-expanded .eralux-projects-modal-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
}

.eralux-projects-modal-close {
  position: sticky;
  z-index: 4;
  top: 18px;
  float: right;
  margin: 18px 18px -62px 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--eralux-projects-line);
  border-radius: 50%;
  background: rgba(var(--ews-paper-rgb), 0.96);
  box-shadow: 0 4px 18px rgba(var(--ews-ink-rgb), 0.1);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.eralux-projects-modal-close:hover,
.eralux-projects-modal-close:focus-visible {
  outline: 0;
  background: var(--eralux-projects-ink);
  color: var(--eralux-projects-paper);
}

.eralux-projects-modal-body {
  padding: clamp(36px, 4vw, 64px);
}

.eralux-projects-modal-heading {
  margin-bottom: 38px;
  padding-right: 120px;
}

.eralux-projects-gallery {
  /* Masonry: the column count adapts to the pop-up width. */
  columns: 280px;
  column-gap: 14px;
  margin: 0 0 48px;
}

.eralux-projects-gallery-title {
  margin: 0 0 18px;
}

.eralux-projects-modal-featured {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.eralux-projects-gallery img {
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  break-inside: avoid;
  object-fit: cover;
}

.eralux-projects-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 44px);
  margin-bottom: 48px;
}

.eralux-projects-detail {
  min-width: 0;
  padding: 0;
  /* Full width: no maximum text width inside the pop-up. */
  max-width: none;
}

.eralux-projects-detail + .eralux-projects-detail {
  border: 0;
}

.eralux-projects-products-title {
  margin: 0 0 14px;
}

.eralux-projects-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.eralux-projects-product {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.eralux-projects-product-image {
  aspect-ratio: 1;
  background: var(--eralux-projects-deep);
}

.eralux-projects-product-image img {
  height: 100%;
  object-fit: contain;
}

body.eralux-projects-modal-open {
  overflow: hidden;
}

@media (max-width: 1050px) {
  .eralux-projects-filter-shell {
    position: static;
  }

  /* Once the label, the dropdown and the search no longer fit on one
	   line, the label moves up on its own and the two CONTROLS stay side
	   by side and vertically centred. Placing all three items explicitly
	   is what fixes the old layout: with only `grid-column: 1/-1` on the
	   filters, auto-placement pushed the search down to a third row,
	   where `margin-left: auto` left it floating on its own. */
  .eralux-projects-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    row-gap: 12px;
  }

  .eralux-projects-filter-label {
    grid-area: 1 / 1 / 2 / -1;
  }

  .eralux-projects-filters {
    grid-area: 2 / 1 / 3 / 2;
  }

  .eralux-projects-search {
    grid-area: 2 / 2 / 3 / 3;
    justify-self: end;
    width: min(100%, 360px);
    margin-left: 0;
  }

  .eralux-projects-dropdown {
    width: min(300px, 100%);
  }

  .eralux-projects-modal {
    padding: 24px;
  }

  .eralux-projects-modal-panel {
    width: min(92vw, 1040px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }

  .eralux-projects-modal-body {
    padding: 42px 34px;
  }

  .eralux-projects-gallery {
    columns: 2 210px;
  }

  .eralux-projects-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================================
   Mobile — single desktop/mobile boundary (900px — see --eralux-mobile-breakpoint)
   ===================================================================== */

@media (max-width: 900px) {
  .eralux-projects-search {
    width: 100%;
    margin-left: 0;
  }

  /* Phones: one control per row, all left-aligned and full width. */
  .eralux-projects-filter-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .eralux-projects-filter-label {
    grid-area: auto;
  }

  .eralux-projects-filters {
    display: grid;
    grid-area: auto;
    width: 100%;
    gap: 10px;
  }

  .eralux-projects-search {
    grid-area: auto;
  }

  .eralux-projects-dropdown {
    width: 100%;
  }

  .eralux-projects-dropdown-menu {
    position: static;
    margin-top: 8px;
    max-height: 260px;
  }

  .eralux-projects-section {
    padding-top: 24px;
    padding-bottom: 72px;
  }

  .eralux-projects-grid {
    gap: 34px;
  }

  /* Mobile: every project stacks — image first, then the text. The
	   reversed-row selector is repeated here because its desktop rule
	   (which swaps the column widths) is more specific than a plain
	   mobile override and would otherwise keep two columns on phones. */
  .eralux-projects-card-link,
  .eralux-projects-card.is-reversed .eralux-projects-card-link {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .eralux-projects-meta {
    padding: 20px 18px 26px;
  }

  .eralux-projects-meta h3 {
    font-size: clamp(20px, 5.5vw, 26px);
  }

  .eralux-projects-card-link .eralux-projects-media,
  .eralux-projects-card.is-reversed .eralux-projects-card-link .eralux-projects-media {
    order: 1;
  }

  .eralux-projects-card-link .eralux-projects-meta,
  .eralux-projects-card.is-reversed .eralux-projects-card-link .eralux-projects-meta {
    order: 2;
  }

  .eralux-projects-media {
    aspect-ratio: 1.42/1;
  }

  .eralux-projects-modal {
    align-items: end;
    padding: 8px;
  }

  .eralux-projects-modal-panel {
    width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 3px;
  }

  .eralux-projects-modal-panel::-webkit-scrollbar {
    width: 6px;
  }

  .eralux-projects-modal-close {
    top: 10px;
    margin: 10px 10px -52px 0;
    width: 40px;
    height: 40px;
  }

  .eralux-projects-modal-body {
    padding: 28px 16px 36px;
  }

  .eralux-projects-modal-heading {
    margin-bottom: 26px;
    padding-right: 44px;
  }

  .eralux-projects-details {
    gap: 28px;
    margin-bottom: 34px;
  }

  /* The panel already fills the screen at this width, so expanding it
	   does nothing. Hide the control rather than offer a no-op. */
  .eralux-projects-modal-expand {
    display: none;
  }

  .eralux-projects-gallery {
    columns: 1;
    max-width: none;
    margin-bottom: 34px;
  }

  /* Full width, own aspect ratio. Capping the height at 260px and
	   letting object-fit: contain letterbox the photo left a band of the
	   panel background down each side of every landscape shot, which is
	   the narrow, floating look this used to have on a phone. */
  .eralux-projects-gallery img {
    width: 100%;
    height: auto;
    max-height: none;
    background: transparent;
  }

  .eralux-projects-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 390px) {
  .eralux-projects-products {
    grid-template-columns: 1fr;
  }

  .eralux-projects-product-image {
    aspect-ratio: 1.15/1;
  }
}