/* =============================================================
   Global reset and basic setup
   This stylesheet preserves the typographic and color styling
   found in the original portfolio while introducing custom
   components for the project folders.  It is referenced by
   `index_updated.html` and can live alongside your existing
   stylesheets without interfering with them.
   ============================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fbe2e4;
  font-family: sans-serif;
  min-height: 100vh;
  /* Ensure the base font size scales nicely across devices by setting a
     reasonable root size.  Individual components will override this using
     responsive clamp() declarations. */
}

/* Page title */
.client-name {
  font-family: "adobe-caslon-pro", serif;
  font-weight: 700;
  font-style: italic;
  /* clamp(min, preferred, max) picks a value between the min and max that
     grows with the viewport width.  2rem yields an accessible size on
     small phones, 7vw tracks the screen width for intermediate sizes, and
     4.5rem caps the growth on large monitors. */
  font-size: clamp(2rem, 7vw, 4.5rem);
  margin: 2rem;
  color: #e96891;
  line-height: 1.1;
}

/* Two‑column layout */
.main-content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  padding: 2rem;
  align-items: flex-start;
}

/* Biography box */
.left-box {
  position: sticky;
  top: 2rem;
  flex: 0 0 300px;
  padding: 1.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: flex-start;
  border: 3px solid #e96891;
}

.left-box h2 {
  font-family: "adobe-caslon-pro", serif;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.2;
}

.left-box p {
  font-family: "forma-djr-micro", sans-serif;
  margin-bottom: 1rem;
  line-height: 1.5;
  font-size: 1rem;
}

.links-container {
  font-family: "adobe-caslon-pro", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.2rem, 6vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.links-container a {
  color: #e96891;
  text-decoration: none;
}

/* Right column containing the folders */
.folder-column {
  display: flex;
  flex-direction: column;
  /* Stretch children horizontally so width: 100% takes effect.  Individual
     project folders use auto margins to centre themselves. */
  align-items: stretch;
  gap: 1rem;
  flex: 1;
  padding: 0;
}

/* Textual swash ligatures – from original design */
.swash-letter {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh" 1;
}

/* =============================================================
   Custom folder components
   Each project folder is built from a container with a tab and
   body div.  Adjust the dimensions and margins here to fine‑tune
   the overlapping effect.
   ============================================================= */

/* Remove underline from the entire folder link */
.project-folder-link {
  text-decoration: none;
  /* Make the link itself a block element so the entire folder is clickable */
  display: block;
}

/* Outer container for each folder */
/* Outer container for each folder */
.project-folder {
  position: relative;
  width: 100%;
  max-width: 40rem;
  /* Height scales between 8rem on very narrow screens and 16rem on wide ones,
     with 35vw as the fluid portion.  This prevents folders from becoming
     either too squat or excessively tall. */
  height: clamp(8rem, 35vw, 16rem);
  /* Create a stacked overlap effect by moving subsequent folders upwards by
     half their height.  On mobile this margin is reset via media query. */
  margin-top: calc(-0.5 * clamp(8rem, 35vw, 16rem));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  /* Centre folders horizontally within the column */
  margin-left: auto;
  margin-right: auto;
}

/* Ensure the first folder doesn’t overlap anything above it */
/* The first folder should not overlap anything above it. */
.project-folder:first-of-type {
  margin-top: 0;
}

/* Body of the folder */
.project-folder .folder-body {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75%;
  background-color: #f392aa;
  border: 3px solid #e96891;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  z-index: 1;
}

/* Tab at the top of the folder */
.project-folder .folder-tab {
  position: absolute;
  top: -3px;
  left: 2rem;
  width: 45%;
  height: 25%;
  background-color: #f392aa;
  border: 3px solid #e96891;
  border-bottom: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  z-index: 2;
  /* Centre the label text inside the tab */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label text sitting on the folder body */
.project-folder .folder-label {
  /* When nested inside the tab the label does not need absolute
     positioning.  We reuse the typographic styling here. */
  position: static;
  font-family: "forma-djr-micro", sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.8rem);
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none; /* allow the link to be clickable without interference */
}

/* Hover effect that mimics the pop‑out animation from the original design */
.project-folder:hover {
  transform: translateY(-25px);
  z-index: 1000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Stack the main sections vertically on phones and tablets */
  .main-content {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }
  /* Biography becomes full width and loses its sticky behaviour */
  .left-box {
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-width: 2px;
  }
  /* Centre the client name and reduce margins for mobile */
  .client-name {
    text-align: center;
    margin: 1rem 0;
  }
  /* Column of folders now fills the available width; extra padding allows
     folders to breathe on small screens */
  .folder-column {
    width: 100%;
    gap: 1rem;
    padding: 0 0.5rem;
    margin-top: 0;
  }
  /* Reset the overlap effect and adjust the folder size.  The height
     scales fluidly with the viewport width and never exceeds 12rem. */
  .project-folder {
    width: 100%;
    max-width: none;
    height: clamp(8rem, 40vw, 12rem);
    margin-top: 0;
  }
  /* Adjust the tab dimensions to better fit narrower folders */
  .project-folder .folder-tab {
    left: 1rem;
    width: 60%;
    height: 30%;
  }
  /* Tweak the label size further for mobile */
  .project-folder .folder-label {
    font-size: clamp(0.9rem, 4vw, 1.4rem);
  }
  /* Remove the hover pop‑out effect on touch devices */
  .project-folder:hover {
    transform: none;
  }
  /* Stack the résumé and LinkedIn links vertically when there isn’t enough horizontal space */
  .links-container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* =============================================================
   Modal overlay styles
   The modal overlay allows project pages to be displayed inline
   without leaving the home page.  It appears when a folder is
   clicked and hides when dismissed.
   ============================================================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: #fbe2e4;
  border: 3px solid #e96891;
  border-radius: 6px;
  width: 80%;
  max-width: 1000px;
  height: 80%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-iframe {
  flex: 1;
  width: 100%;
  border: none;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 2.5rem;
  line-height: 1;
  background: transparent;
  border: none;
  color: #e96891;
  cursor: pointer;
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    height: 90%;
  }
}