/* =========================================================
   Migrate Digital — Our Work Page Styles
   Depends on: migrate-tokens.css + home.css + services.css

   Each project is a "card" — white middle frames the
   screenshot with a matte of padding, grey top + bottom bars
   carry the plate label / year / scope / visit link. Same
   light-grey tonal language as the About letter panel.
   ========================================================= */


/* ---------- Local paper palette (scoped to .projects-slider) ---------- */
/* Declared on .projects-slider (not .project-card) so both the
   card internals AND the control bar / arrow boxes outside the
   card inherit the same paper tones. */

.projects-slider {
  --paper-1: #FFFFFF;   /* white surfaces — card middle + control bar */
  --paper-2: #F7F7F7;   /* grey surfaces — card head/foot + arrow boxes */
}


/* ==========================================================
   SECTION RHYTHM  ·  match the 120 / 154 cadence every other
   interior content section uses (services, process, about).
   ========================================================== */

.section-projects {
  padding-top: 120px;
  padding-bottom: 154px;
}


/* ==========================================================
   PROJECT CARD  ·  chassis + frame.
   White body, hairline border, subtle upward drop shadow so
   the card reads as a mounted plate on the cream page.
   ========================================================== */

.project-card {
  background: var(--paper-1);
  border: var(--rule) solid var(--hairline-2);
  overflow: hidden;
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.06);
}


/* ==========================================================
   CARD HEAD  ·  top grey bar with THREE zones.
   Left: bronze "Project 001" tag.
   Center: client name (ink, tracked caps).
   Right: year (ink-3).
   ========================================================== */

.card-head {
  background: var(--paper-2);
  padding: var(--sp-7) var(--sp-10); /* 16 / 24 */
  border-bottom: var(--rule) solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* center column stays content-width; 1fr flanks keep it truly centered */
  align-items: center;
  gap: var(--sp-7);
}

.card-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-1); /* 10 */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  color: var(--bronze-hi);
}
.card-tag .sq {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--bronze);
}

.card-client {
  justify-self: center;
  text-align: center;
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-4); /* 14 */
  letter-spacing: var(--track-ui-s);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.25;
}

.card-year {
  justify-self: end;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================
   CARD IMAGE  ·  padded white middle.
   Image sits inset from the card edge so the white frame
   reads as a matte. Hairline border around the image itself
   for editorial crispness.
   ========================================================== */

.card-image {
  background: var(--paper-1);
  padding: var(--sp-10); /* 24px matte around the screenshot */
}

.card-image img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule) solid var(--hairline);
}


/* ==========================================================
   CARD FOOT  ·  bottom grey bar.
   Left: scope. Right: Visit Site link (bronze).
   ========================================================== */

.card-foot {
  background: var(--paper-2);
  padding: var(--sp-7) var(--sp-10); /* 16 / 24 */
  border-top: var(--rule) solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
}

.cf-scope {
  color: var(--ink-3);
}

.cf-link {
  color: var(--bronze);
  transition: color 160ms ease;
}
.cf-link:hover {
  color: var(--bronze-hi);
}


/* ==========================================================
   PROJECTS SLIDER  ·  horizontal carousel showing ONE card at
   a time. CSS scroll-snap handles native swipe/trackpad; JS
   wires the prev / next / dot controls and state updates.

   Viewport is a horizontally-scrollable row; each slide is
   one viewport wide and snaps into place on release.
   ========================================================== */

.projects-slider {
  margin-top: var(--sp-13); /* 48px below the section-head */
}

.slider-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar (prev/next + dots replace it). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider-viewport::-webkit-scrollbar { display: none; }
.slider-viewport:focus {
  outline: none; /* focus-ring moves to the individual controls */
}

.slider-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}

.slider-slide {
  flex: 0 0 100%;
  min-width: 0;                /* let inner content shrink correctly */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* ==========================================================
   SLIDER CONTROLS  ·  prev / dots / next housed in their own
   framed grey bar beneath the card. Matches the card-head /
   card-foot tonal language (same --paper-2 grey + hairline +
   subtle drop-shadow) so the bar reads as a sibling control
   panel, not a loose cluster of buttons.
   ========================================================== */

.slider-controls {
  margin-top: var(--sp-10); /* 24px breathing room below the card */
  background: var(--paper-1);                 /* white bar */
  border: var(--rule) solid var(--hairline-2);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.06);
  padding: var(--sp-7) var(--sp-10); /* 16 / 24 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
}

.slider-btn {
  appearance: none;
  background: var(--paper-2);                 /* grey arrow box */
  border: var(--rule) solid var(--hairline-2);
  color: var(--ink);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  flex: 0 0 auto;
}

.slider-btn svg {
  width: 16px;
  height: 16px;
}

.slider-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.slider-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.slider-btn:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}


/* Dots — numeric tabs (001, 002, 003). Active one is bronze. */
.slider-dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-8); /* 18 */
}

.slider-dot {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-2); /* 11 */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  padding: var(--sp-3) var(--sp-4); /* 8 / 10 */
  position: relative;
  transition: color 160ms ease;
}

.slider-dot:hover { color: var(--bronze-hi); }

.slider-dot[aria-selected="true"] {
  color: var(--bronze);
}

/* Bronze underline on the active dot */
.slider-dot[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: -2px;
  height: 2px;
  background: var(--bronze);
}

.slider-dot:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 960px) {

  .section-projects {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  /* Tighten card bar padding + matte on mobile. */
  .card-head,
  .card-foot {
    padding: var(--sp-5) var(--sp-9); /* 12 / 20 */
  }
  .card-image {
    padding: var(--sp-7); /* 16 matte on mobile */
  }

  /* Tighter padding on the slider control bar + slimmer buttons
     so the bar doesn't feel oversized in a narrow viewport. */
  .slider-controls {
    padding: var(--sp-5) var(--sp-9); /* 12 / 20 */
  }
  .slider-btn {
    width: 40px;
    height: 40px;
  }
  .slider-dots {
    gap: var(--sp-5);
  }

}

@media (max-width: 560px) {

  /* Card head collapses to a stacked layout on very narrow
     screens — tag on top, client centered, year below — so
     long client names (e.g. "Alta Vista Master Builders")
     don't compete for the middle lane. */
  .card-head {
    grid-template-columns: 1fr;
    row-gap: var(--sp-3);
    text-align: center;
  }
  .card-tag,
  .card-year {
    justify-self: center;
  }

  /* Card foot also stacks on very narrow screens. */
  .card-foot {
    flex-wrap: wrap;
    row-gap: var(--sp-3);
  }

}