/* -----------------------------------------------------------------------------
   Custom Properties
   --------------------------------------------------------------------------- */

:root {
  /* Transitions */
  --fadeDur: 3s;

  /* Spacing */
  --gutter: clamp(5rem, 1vw, 6rem);
  --thumb-min: 220px;
  --thumb-max: 240px;
  --title-spacing: 1rem;  /* Space after section titles */
  --footer-pad-top: .5rem;
  --footer-pad-bottom: 3.5rem; /* tweak me */

  /* Colors - centralized for consistency */
  --color-dark: #333;
  --color-darker: #323232;
  --color-active: #555;
  --color-inactive: #ccc;
  --color-white: #fff;
  --color-accent: #fff7e6;
}

/* Mobile spacing override */
@media (max-width: 767px) {
  :root {
    --gutter: clamp(1.75rem, 2vw, 2.5rem);
  }
}

/* -----------------------------------------------------------------------------
   Global Reset & Layout
   --------------------------------------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-white);
  font-family: system-ui, sans-serif;
}

body {
  display: flex;
  justify-content: center;
}

/* -----------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.site-header {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 1rem 1rem;
  background-color: var(--color-white);
  z-index: 10000;
}

.site-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, calc(2.083rem + 0.833vw), 2.75rem);
  color: var(--color-dark);
  margin: 0;
}

/* Phones: header scrolls, keep some top white space like desktop */
@media (max-width: 767px) {
  :root {
    /* tweak the first value if you want more/less space */
    --header-top-pad-mobile: clamp(2.5rem, 3.2vw, 1.6rem);
  }
  .site-header {
    position: relative;       /* scrolls on mobile */
    height: auto;
    align-items: flex-end;     /* keep title aligned to bottom edge */
    padding: var(--header-top-pad-mobile) 1rem 1.3rem;  /* <-- add top pad back */
  }
  .site-title {
    margin: 0;
    line-height: 1;
  }
}


/* -----------------------------------------------------------------------------
   Page Container
   --------------------------------------------------------------------------- */

.page-container {
  padding: 8rem var(--gutter) 0;  /* top offset for fixed header */
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Phones: remove top offset because header scrolls */
@media (max-width: 767px) {
  .page-container {
    padding: 0 var(--gutter) 0;
  }
}

/* -----------------------------------------------------------------------------
   Carousel
   --------------------------------------------------------------------------- */

.carousel {
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;

  /* Full-width carousel */
  margin-inline: calc(-1 * var(--gutter));
  width: calc(100% + 2 * var(--gutter));
}

.carousel .overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: none;
  opacity: 0;
  transition: opacity var(--fadeDur) ease-in-out;
}

.carousel .overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--fadeDur) ease-in-out;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

/* Mobile carousel adjustments */
@media (max-width: 767px) {
  .carousel {
    height: 60vh;
  }

  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

/* -----------------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------------- */

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.5rem;
  z-index: 5;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-inactive);
  cursor: pointer;
  transition: background 0.2s;
}

.dot.active {
  background: var(--color-active);
}

/* -----------------------------------------------------------------------------
   Project Summary
   --------------------------------------------------------------------------- */

.summary {
  margin-top: 2.5rem;
  text-align: center;
  padding: 0;
}

.summary-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, calc(1.333rem + 0.833vw), 1.75rem);
  line-height: 1.5;
  max-width: 40rem;
  margin: 2rem auto var(--title-spacing);
  text-align: center;
  color: var(--color-darker);
}

.summary p {
  max-width: 40rem;
  margin: 0 auto 1rem;
  color: var(--color-dark);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}

/* Remove bottom margin from last paragraph */
.summary p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Thumbnail Grid
   --------------------------------------------------------------------------- */

.ph-1 {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(var(--thumb-min), 25vw, var(--thumb-max)), 1fr)
  );
  margin: 4rem 0 4.5rem;
  padding: 0;
}

.ph-1 a {
  display: block;
  text-decoration: none;
}

.ph-1 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Tablet layout: 2 columns */
@media (min-width: 768px) and (max-width: 1279px) {
  .ph-1 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile layout: 1 column */
@media (max-width: 767px) {
  .ph-1 {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    margin: 3rem 0 4rem;
  }
}

/* -----------------------------------------------------------------------------
   Footer (aligned to summary width)
   --------------------------------------------------------------------------- */

.placeholder {
  min-height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-dark);
  width: 100%;
}

.ph-2 {
  background: var(--color-accent);
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
}

.site-footer {
  margin-top: 4.5rem;
  padding: var(--footer-pad-top) 0 var(--footer-pad-bottom);
  color: var(--color-dark);
  font-family: 'IBM Plex Sans', sans-serif;
  background: #fffcf7; /* soft off-white */
  box-shadow: 0 -1px 0 rgba(0,0,0,0.05) inset;
}

.footer-inner {
  max-width: 40rem; /* matches .summary p width */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.footer-right a {
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-right a:hover,
.footer-right a:focus-visible {
  color: var(--color-active);
  border-bottom-color: var(--color-active);
}

.sep { opacity: 0.5; padding: 0 0.15rem; }

/* Small screens: stack */
@media (max-width: 540px) {
  .footer-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-right {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Mobile footer polish — restores chip-style buttons */
@media (max-width: 540px) {
  .site-footer {
    padding-top: 0.6rem;         /* snug top */
    padding-bottom: 2.2rem;      /* comfy tap room */
  }

  /* Keep footer full-width with site gutter on phones */
  .footer-inner {
    max-width: none;
    padding-inline: var(--gutter, 1rem);
    gap: 0.6rem;
  }

  /* Links first, centered, wrap nicely */
  .footer-right {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;          /* row x column spacing */
  }

  /* Hide desktop separators on mobile */
  .footer-right .sep { display: none; }

  /* Bigger tap targets with subtle chip look */
  .footer-right a {
    display: inline-block;
    padding: 0.55rem 0.7rem;     /* ~44px hit target with line-height */
    line-height: 1.2;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    border-bottom: 0;            /* remove dotted underline */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  }

  .footer-right a:active { transform: translateY(1px); }
}

/* Mobile footer layout: center copyright, place it under the links */
@media (max-width: 540px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;      /* center everything */
    gap: 0.75rem;
  }

  /* Links first (top), centered, wrap nicely */
  .footer-right {
    order: 1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    width: 100%;
  }

  /* Copyright second (below), centered */
  .footer-left {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
  }

  /* Hide desktop separators on mobile */
  .footer-right .sep { display: none; }
}

/* Ultra-narrow phones: switch to a 2×2 grid for perfect balance */
@media (max-width: 380px) {
  .footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .footer-right a { text-align: center; }
}

/* -----------------------------------------------------------------------------
   Modals (centered popups)
   --------------------------------------------------------------------------- */

.no-scroll { overflow: hidden; } /* Prevent body scroll when modal open */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
}

.modal[hidden],
.modal-backdrop[hidden] {
  display: none !important;
}

.modal-dialog {
  max-width: min(42rem, calc(100% - 2*var(--gutter)));
  background: var(--color-white);
  color: var(--color-dark);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 1.25rem 1.25rem 1rem;
  font-family: 'IBM Plex Sans', sans-serif;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.modal-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  margin: 0 0 0.5rem;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--color-darker);
}

.modal p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.modal a {
  color: var(--color-dark);
  text-decoration: underline;
}

.modal-close {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fafafa;
  cursor: pointer;
  font-size: 0.9rem;
}

.modal-close:hover,
.modal-close:focus-visible { background: #f0f0f0; }

/* -----------------------------------------------------------------------------
   Layout fix: ensure body flows vertically (avoid horizontal flex pushing content)
   --------------------------------------------------------------------------- */

body { 
  display: block;
}

/* Prevent layout shift when scrollbars appear/disappear */
html { scrollbar-gutter: stable; }