/* ==========================================================================
   Jon Swan — Portfolio
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Bebas+Neue&display=swap');

:root {
  --color-black: #111111;
  --color-gray-headline: #555555;
  --color-gray-body: #1a1a1a;
  --color-card-bg: #f4f4f4;
  --color-border: #e5e5e5;
  --color-white: #ffffff;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', 'Inter', sans-serif;

  --page-max: 1170px;
  --page-pad: 80px;

  /* normalized rhythm for all Work case-study pages */
  --section-gap: 96px;
  --block-gap: 32px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-gray-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

/* Hairline outline for any image with white/light edges, per client note */
img.hairline {
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid #4A6CF7;
  outline-offset: 2px;
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

@media (max-width: 900px) {
  :root { --page-pad: 24px; --section-gap: 64px; }
}

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

.site-header {
  padding: 32px var(--page-pad) 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
}

.site-header .wrap {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  gap: 32px;
}

.site-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-black);
}

.site-nav a[aria-current="page"] {
  border-bottom: 2px solid var(--color-black);
  padding-bottom: 2px;
}

/* ---------- Work dropdown ---------- */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  padding: 8px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}

/* Invisible bridge closing the gap between the trigger and the menu, so
   moving the mouse from one to the other doesn't briefly leave the hoverable
   area and cause the menu to close before it can be reached. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
}

.nav-dropdown-menu a {
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 500;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--color-card-bg);
}

@media (max-width: 900px) {
  .nav-dropdown-menu {
    left: auto;
    right: 0;
    transform: translateY(4px);
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    transform: translateY(8px);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 80px var(--page-pad) 32px;
  text-align: center;
}

.site-footer p {
  font-size: 0.75rem;
  font-weight: 600;
  color: #444;
  margin: 0;
}

/* ---------- Headline pairs (gray lead-in + black body) ---------- */

.headline-pair {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  max-width: 900px;
  margin: 64px auto 56px;
}

.headline-pair .lead {
  color: var(--color-gray-headline);
}

.headline-pair .body {
  color: var(--color-black);
  font-weight: 400;
}

@media (max-width: 700px) {
  .headline-pair { font-size: 1.7rem; }
}

/* ---------- Case study pages (normalized spacing) ---------- */

.case-header {
  text-align: center;
  margin: 64px auto 0;
}

.case-header img.case-logo {
  max-height: 56px;
  width: auto;
  margin: 0 auto 40px;
}

.case-intro {
  max-width: 940px;
  margin: 0 auto var(--section-gap);
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
}

.case-section {
  margin-bottom: var(--section-gap);
}

.case-video {
  position: relative;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: var(--section-gap);
  background: #eee;
}

.case-video.hairline::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2; /* sits above the iframe, which otherwise visually covers a plain outline */
}

.case-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

.case-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--block-gap);
  margin-bottom: var(--section-gap);
}

.case-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--block-gap);
  margin-bottom: var(--section-gap);
}

.case-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--block-gap);
  margin-bottom: var(--section-gap);
}

/* When a row mixes images of different native aspect ratios (e.g. a square
   ad next to a landscape ad next to a tall portrait ad), match their heights
   without cropping: each image scales to the row's fixed height (via the
   --row-height custom property) and keeps its own natural width, so widths
   in the row won't be equal — only the heights match. Uses flex instead of
   grid since grid would force equal column widths. */
.case-grid-3.match-height,
.case-grid-2.match-height {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto; /* safety net: if content is ever too wide for the row height chosen, it scrolls instead of wrapping and overlapping content below */
  height: var(--row-height, 400px);
}

.case-grid-3.match-height img,
.case-grid-2.match-height img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

.case-full img {
  width: 100%;
  height: auto;
}

.case-full {
  margin-bottom: var(--section-gap);
}

.case-video-thumb {
  position: relative;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
}

.case-video-thumb.hairline::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}

.case-video-thumb iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .case-grid-3 { grid-template-columns: 1fr; }
  .case-grid-2 { grid-template-columns: 1fr; }
  .case-grid-2x2 { grid-template-columns: 1fr; }
  .case-grid-3.match-height,
  .case-grid-2.match-height {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .case-grid-3.match-height img,
  .case-grid-2.match-height img {
    height: auto;
    width: 100%;
  }
}

.case-visit {
  text-align: center;
  margin-bottom: var(--section-gap);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 28px;
  border-radius: 999px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:hover {
  background: #2a2a2a;
  transform: translateY(-1px);
}