/* ==========================================================================
   Amin Zakaie Far — Portfolio Home (v2)
   Built directly from the supplied HOME_PAGE.odp / HOME_PAGE_FOR_PHONE.odp
   wireframes: crimson top bar, navy bottom bar, plain photo, thin navy
   dividers and card borders, capsule filter pills, flat navy card fills.
   No icons, shadows, or gradients beyond what was in the source file.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --crimson-600: #ae1c28;

  --navy-900: #14284d;
  --navy-800: #1a3568;
  --navy-700: #21468b;
  --navy-050: #eef1f8;

  --ink: #1a1a1e;
  --text-muted: #5b6072;
  --paper: #ffffff;
  --line: #21468b;

  --font-main: Arial, Helvetica, "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-name: clamp(1rem, 0.72rem + 1.2vw, 1.5rem);
  --fs-role: clamp(0.62rem, 0.5rem + 0.4vw, 0.78rem);
  --fs-pill: clamp(0.64rem, 0.54rem + 0.4vw, 0.8rem);
  --fs-title: clamp(0.85rem, 0.6rem + 1vw, 1.15rem);
  --fs-card-title: clamp(0.72rem, 0.58rem + 0.45vw, 0.9rem);
  --fs-contact: clamp(0.6rem, 0.5rem + 0.3vw, 0.74rem);

  --bar-h: clamp(6px, 0.8vh, 10px);
  --header-h: clamp(42px, 5.4vh, 62px);
  --shell-pad: clamp(10px, 1.6vh, 22px);
  --sidebar-w: clamp(208px, 20vw, 288px);
  --gap: clamp(10px, 1.4vh, 20px);

  --radius-card: 5px;
  --radius-pill: 999px;
  --border-w: 1.5px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;

  --vh: 1vh;
}

/* ---- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  color: var(--ink);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--crimson-600);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--navy-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  z-index: 100;
  transition: top var(--dur-fast) var(--ease);
  font-size: 0.85rem;
}
.skip-link:focus {
  top: 12px;
}

/* ---- App shell: crimson / navy frame bars + white document body ----------- */
.app-shell {
  height: calc(var(--vh) * 100);
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--bar-h) var(--header-h) 1fr var(--bar-h);
  overflow: hidden;
  background: var(--paper);
}

.frame-bar {
  width: 100%;
  height: 100%;
}
.frame-bar--top {
  background: var(--crimson-600);
}
.frame-bar--bottom {
  background: var(--navy-700);
}

/* ---- Header: dynamic document title ---------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 3vw, 40px);
}

.doc-title {
  font-weight: 700;
  font-size: var(--fs-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- Main layout ------------------------------------------------------------ */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gap);
  padding: var(--shell-pad) clamp(16px, 3vw, 40px);
  min-height: 0;
  overflow: hidden;
}

/* ---- Sidebar ------------------------------------------------------------- */
.sidebar-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--gap);
}

/* id-card and filters split the sidebar by explicit ratio (flex-basis:0)
   rather than by content size — this keeps both sections' internal
   flex:1 children (the photo; the pills) working against a definite,
   predictable height instead of silently collapsing to near-zero. */
.id-card {
  flex: 3 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.id-card__photo {
  flex: 1 1 40px;
  min-height: 0;
  position: relative;
  background: var(--navy-050);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.id-card__photo picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.id-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.id-card__identity {
  flex: 0 0 auto;
  text-align: center;
  padding: clamp(8px, 1.2vh, 14px) 10px clamp(6px, 1vh, 10px);
  border-bottom: var(--border-w) solid var(--navy-700);
}

.id-card__name {
  font-size: var(--fs-name);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink);
}

.id-card__role {
  margin-top: 3px;
  font-size: var(--fs-role);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.id-card__credentials {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vh, 16px);
  padding: clamp(10px, 1.8vh, 18px) 16px;
}

.id-card__credentials img {
  height: clamp(28px, 4.4vh, 46px);
  width: auto;
  object-fit: contain;
}

.id-card__contact {
  flex: 0 0 auto;
  text-align: center;
  padding: clamp(6px, 0.9vh, 10px) 10px;
  border-top: var(--border-w) solid var(--navy-700);
}

.id-card__email {
  display: block;
  font-size: var(--fs-contact);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.id-card__email:hover {
  color: var(--crimson-600);
}

.id-card__lang {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-contact);
  color: var(--ink);
}

.id-card__linkedin {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: var(--border-w) solid var(--navy-050);
  font-size: var(--fs-contact);
  font-weight: 600;
  color: var(--navy-700);
  transition: color var(--dur-fast) var(--ease);
}
.id-card__linkedin:hover {
  color: var(--crimson-600);
}

/* ---- Filter pills ------------------------------------------------------------ */
.filters {
  flex: 2 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: clamp(6px, 0.9vh, 10px);
}

.filters__label {
  flex: 0 0 auto;
  font-size: clamp(0.62rem, 0.5rem + 0.3vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin-bottom: clamp(6px, 1vh, 10px);
}

.filters__list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.8vh, 9px);
}

.filter-pill-wrap {
  flex: 1;
  min-height: 0;
}

.filter-pill {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(8px, 1vw, 14px);
  border: var(--border-w) solid var(--navy-700);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--navy-700);
  font-size: var(--fs-pill);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.filter-pill__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-pill:hover {
  background: var(--navy-050);
}

.filter-pill[aria-selected="true"] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}

.filter-pill[aria-selected="true"]:hover {
  background: var(--navy-800);
}

/* ---- Content: project grid --------------------------------------------------- */
.content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.project-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--gap);
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
  border: var(--border-w) solid var(--navy-900);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.project-card:hover,
.project-card:focus-visible {
  border-color: var(--crimson-600);
}

.project-card__media {
  flex: 1 1 auto;
  min-height: 0;
  /* White field behind every cover photo: object-fit:contain never crops
     a source image, so this is what shows as the "margin" around it. The
     padding below (a %, so it scales with the card itself) is what keeps
     that margin present and proportional across breakpoints, even when a
     photo's own aspect ratio already happens to fill the box. */
  background: var(--paper);
}

.project-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  padding: 7%;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  transition: transform var(--dur-fast) var(--ease);
}

.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img {
  transform: scale(1.035);
}

.project-card__body {
  flex: 0 0 auto;
  padding: clamp(6px, 1vh, 12px) clamp(8px, 1vw, 14px);
  /* Media and body are both white now (the photo sits on a white field,
     per the cover-image treatment above), so this line is what still
     marks where the photo area ends and the title starts. */
  border-top: var(--border-w) solid var(--navy-050);
}

.project-card__title {
  font-size: var(--fs-card-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Fixed to exactly two line-heights regardless of how many lines this
     card's own title actually needs, so every card's title box — and so
     every card overall, since media is flex:1 auto above it — ends up
     precisely the same height. */
  min-height: calc(1.25em * 2);
}

/* ==========================================================================
   Responsive: narrow / phone layout — follows the sequence in the user's
   mobile mockup (photo, name, logos, contact, category heading, pills,
   grid), compacted to fit one viewport with no scroll. The photo pairs
   with the name in one row purely to save vertical space; it stays a
   rectangle (not a circle) to match the source photo's shape.
   ========================================================================== */
@media (max-width: 760px) {
  :root {
    --header-h: clamp(40px, 6.5vh, 60px);
    --shell-pad: 10px;
    --gap: 6px;
  }

  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: var(--shell-pad) 12px;
  }

  .site-header {
    padding: 6px clamp(12px, 4vw, 24px);
  }

  .doc-title {
    white-space: normal;
    line-height: 1.25;
    font-size: clamp(0.64rem, 0.5rem + 1.5vw, 0.9rem);
  }

  .id-card {
    /* override base flex:3 1 0 — that ratio trick needs a definite-height
       parent (true on desktop); .sidebar-col is an auto-height grid row
       here, so a 0px basis would collapse to near-zero instead of sizing
       to content. */
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .id-card__photo {
    flex: 0 0 auto;
    width: clamp(44px, 11vw, 60px);
    height: clamp(54px, 14vw, 74px);
    margin: 4px 8px 4px 0;
  }

  .id-card__identity {
    flex: 1 1 auto;
    text-align: left;
    border-bottom: 0;
    padding: 4px 0;
  }

  .id-card__name {
    font-size: clamp(0.8rem, 0.6rem + 1.5vw, 1.05rem);
  }

  .id-card__credentials {
    flex-direction: row;
    flex: 1 1 100%;
    justify-content: center;
    gap: 18px;
    padding: 6px 0;
    border-top: var(--border-w) solid var(--navy-700);
  }

  .id-card__credentials picture {
    display: block;
    width: clamp(90px, 24vw, 148px);
  }

  .id-card__credentials img {
    display: block;
    width: 100%;
    height: auto;
  }

  .id-card__contact {
    flex: 1 1 100%;
    border-top: var(--border-w) solid var(--navy-700);
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 2px 8px;
    text-align: center;
  }

  .id-card__lang {
    margin-top: 0;
  }

  .id-card__linkedin {
    flex: 1 1 100%; /* forces its own row below the email/lang line */
    margin-top: 2px;
    padding-top: 2px;
    border-top: 0;
  }

  .filters {
    flex: 0 0 auto; /* content-based, same reasoning as .id-card above */
    padding-top: 6px;
  }

  .filters__label {
    margin-bottom: 6px;
  }

  .filters__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .filter-pill-wrap {
    flex: 0 1 auto;
  }

  .filter-pill {
    height: clamp(26px, 5vh, 34px);
    padding: 0 12px;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .project-card__body {
    padding: 4px 6px;
  }

  .project-card__title {
    -webkit-line-clamp: 1;
    font-size: clamp(0.62rem, 0.5rem + 1.4vw, 0.78rem);
    min-height: calc(1.25em * 1);
  }

  .project-card__media img {
    padding: 6%;
  }
}

/* Short-viewport safeguard: landscape phones / short windows.
   Pills already shrink via flex:1 + min-height:0 in the wide (desktop-
   style) layout, so this only needs to tighten spacing. */
@media (max-height: 480px) {
  .filters__list {
    gap: 4px;
  }
  .id-card__identity {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* Tablet portrait: keep sidebar, drop grid to 2 columns for proportion */
@media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}