/* DUTCH DESIGN AGENCY — work.css
   Case-study template (projects/*) + projects index, cloned from the live
   Webflow site. Case study: Eiko-italic title, meta bar, full-bleed 16:9
   hero, intro 2-col, variable media blocks (16:9 rows in-gutter, 4:5 pairs,
   Vimeo where the source has a video code), inline start band, 2-up "other
   projects" grid. */

/* ---- Head ---- */
.case-main { padding-top: var(--s-lg); }
.case-head { padding: var(--s-xl) var(--gutter) 0; }
.case-title {
  font-family: var(--ff-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-3xl); line-height: 1.05;
  padding-bottom: var(--s-md);
}
.case-meta {
  display: flex; justify-content: space-between;
  border-top: var(--rule-dark);
  padding: 0.9375rem 0;
}
.case-meta p { font-size: var(--fs-xs); line-height: 1.5; text-transform: uppercase; }
@media (max-width: 767px) {
  .case-title { font-size: var(--fs-xl); }
  .case-meta p { font-size: var(--fs-2xs); }
}

/* ---- Media blocks ---- */
.case-media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--black);
}
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Live case videos match their wrapper's aspect (js-video-size == ratio),
   so the background iframe simply fills the box. */
.case-media iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; pointer-events: none;
}
.case-media.r-16x9 { aspect-ratio: 16 / 9; }
.case-media.r-4x5 { aspect-ratio: 4 / 5; }
.case-media.r-16x10 { aspect-ratio: 16 / 10; }
/* Framed media: 16:9 background image with a smaller 16:10 media centred
   on top (live .gl-video-wrapper-ontop blocks). */
.case-frame-inner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58.3%; aspect-ratio: 16 / 10;
  border-radius: var(--radius); overflow: hidden;
}
/* Phone-format inner media (live .mobile-placeholder.gl-r-mobile) */
.case-frame-phone {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 50%; aspect-ratio: 343 / 745;
  border-radius: var(--radius); overflow: hidden;
}
/* Responsive Vimeo sources (live js-video-code desktop/mobile) */
.case-media iframe.vid-m { display: none; }
@media (max-width: 767px) {
  .case-media iframe.vid-d { display: none; }
  .case-media iframe.vid-m { display: block; }
}
/* Responsive media variants (live gl-d-visible / gl-m-visible wrappers) */
.case-media.m-view { display: none; }
@media (max-width: 767px) {
  .case-media.d-view { display: none; }
  .case-media.m-view { display: block; }
}

.case-hero { width: 100%; }
.case-hero .case-media { border-radius: 0; }
.case-full { padding: 0 var(--gutter) 1.25rem; }
.case-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  padding: 0 var(--gutter) 1.25rem;
}
@media (max-width: 767px) { .case-pair { grid-template-columns: 1fr; } }

/* ---- Intro ---- */
.case-intro {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem;
  padding: var(--s-sm) var(--gutter) var(--s-3xl);
}
.case-intro .case-lead { font-size: var(--fs-md); line-height: 1.3; }
.case-intro .case-copy { display: flex; flex-direction: column; row-gap: 1.25rem; }
.case-intro .case-copy p { font-size: var(--fs-xs); line-height: 1.5; }
@media (max-width: 767px) {
  .case-intro { grid-template-columns: 1fr; row-gap: 2rem; padding-bottom: var(--s-xl); }
  .case-intro .case-lead { font-size: var(--fs-sm); }
}

/* ---- Previous / Next ---- */
.case-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem var(--gutter);
}
.case-nav a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-sm); line-height: 1.5; text-transform: uppercase;
}
.case-nav .n-arrow { width: 1.25rem; height: 1.25rem; overflow: hidden; flex: none; }
.case-nav .n-arrow-bar {
  display: flex; gap: 0.5rem; width: 3rem; height: 1.25rem;
  transform: translateX(-1.75rem); transition: transform 0.3s var(--ease-in-out);
}
.case-nav .n-arrow img { width: 1.25rem; height: 1.25rem; flex: none; padding: 5%; box-sizing: border-box; }
.case-nav a:hover .n-arrow-bar { transform: translateX(0); }
.case-nav .n-left .n-arrow img { transform: scaleX(-1); }
.case-nav .n-left .n-arrow-bar { transform: translateX(0); }
.case-nav .n-left:hover .n-arrow-bar { transform: translateX(-1.75rem); }

/* ---- Projects index ---- */
.plist-main { padding-top: var(--nav-h); }
.plist {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem; row-gap: 1.25rem;
  padding: 0 var(--gutter) var(--s-xl);
}
@media (max-width: 767px) { .plist { grid-template-columns: 1fr; } }

/* ---- Other projects ---- */
.case-others {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem;
  padding: 0 var(--gutter) var(--s-sm);
}
.case-card { display: block; }
.case-card .case-card-media {
  aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden;
}
.case-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.case-card:hover img { transform: scale(1.04); }
.case-card .caption { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0; }
.case-card .caption h2 { font-size: var(--fs-xs); font-weight: 300; line-height: 1.5; text-transform: uppercase; }
.case-card .caption h3 { font-size: var(--fs-xs); font-weight: 300; line-height: 1.5; }
@media (max-width: 767px) {
  .case-others { grid-template-columns: 1fr; row-gap: 2rem; }
  .case-card .case-card-media { aspect-ratio: 4 / 5; }
}