/* styles/work.css — Work page + case studies on inanew.world. v2
   Every selector is scoped to .work-page or the six page IDs, so the blog is untouched.
   Pages: 2065 Work, 2066 WooAgent, 2067 Agentic Commerce, 2068 Extension Quality,
   2069 Payments Adoption, 2070 Checkout Conversion. */

/* Hide the theme-generated page title on Work pages (Mayland has no blank template).
   :has() fallback covers previews where the page-id body class is missing. */
.page-id-2065 .entry-header,
.page-id-2066 .entry-header,
.page-id-2067 .entry-header,
.page-id-2068 .entry-header,
.page-id-2069 .entry-header,
.page-id-2070 .entry-header,
body:has(.work-page) .entry-header { display: none; }

/* Hide the theme's footer widget area (Archives dropdown) on Work pages.
   It currently holds only the Archives widget; the blog keeps it. */
.page-id-2065 .widget-area,
.page-id-2066 .widget-area,
.page-id-2067 .widget-area,
.page-id-2068 .widget-area,
.page-id-2069 .widget-area,
.page-id-2070 .widget-area,
body:has(.work-page) .widget-area { display: none; }

/* Collapse the theme's vertical padding between the site header and the page band */
.page-id-2065 .site-main,
.page-id-2066 .site-main,
.page-id-2067 .site-main,
.page-id-2068 .site-main,
.page-id-2069 .site-main,
.page-id-2070 .site-main,
body:has(.work-page) .site-main { padding-top: 0 !important; padding-bottom: 0 !important; }
body:has(.work-page) .entry-content { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ============ The grid ============
   Mayland centers every non-aligned block at ~750px (max-width + margin auto).
   Inside .work-page we take layout over: a full-bleed band whose padding centers
   a 1200px content grid, and every block is forced flush to that grid. */

.work-page {
  background: #fafafa;
  color: #111;
  --work-gray: #8f8f8f;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  /* Near-full-bleed grid: big imagery like the reference site, with breathing
     room from the viewport edge. !important because Mayland's
     .wp-block-group.alignfull { padding: 16px } is more specific and was
     silently overriding the horizontal padding. */
  padding: 3rem clamp(1.5rem, 5vw, 5rem) 4rem !important;
}

/* WordPress injects .wp-block-group__inner-container at render; Mayland constrains
   its children to ~750px and centers them. Flatten all of it inside .work-page. */
.work-page > *,
.work-page .wp-block-group__inner-container,
.work-page .wp-block-group__inner-container > *,
.work-page .wp-block-columns,
.work-page .wp-block-group,
.work-page figure.wp-block-image {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cap the content grid on very wide screens and center it inside the band.
   Must come after the flatten rule above (same specificity — order decides). */
.work-page .wp-block-group__inner-container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.work-page .wp-block-columns { display: flex; gap: 1.5rem; }
.work-page .wp-block-column { min-width: 0; }
/* "Link to media file" wraps the img in an inline-block <a> that shrink-wraps
   to the 750px attribute width Photon writes; force it to fill the figure. */
.work-page figure.wp-block-image a { display: block; width: 100%; }
.work-page figure.wp-block-image img { width: 100%; height: auto; display: block; }

/* Display type never breaks mid-word */
.work-page h1, .work-page h2, .work-page h3 {
  word-break: normal;
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

/* ============ Work index ============ */

/* Hero name */
.work-page .work-hero-name {
  font-size: clamp(3.5rem, 13vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-transform: lowercase;
  text-align: left;
  margin-top: 0;
  margin-bottom: 3rem;
}
.work-page .work-hero-name em { font-weight: 500; }

/* Bio — centered, narrower than the grid (overrides the flush-grid rule above) */
.work-page .work-bio {
  max-width: 900px !important;
  margin: 0 auto 4rem !important;
}
.work-page .work-bio p { color: #6b6b6b; font-size: 0.95rem; line-height: 1.55; }

/* Selected Works heading row */
.work-page .work-sw-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.25rem; }
.work-page .work-sw-head h2 { font-size: 2rem; letter-spacing: -0.02em; margin: 0; }
.work-page .work-sw-range { color: var(--work-gray); font-size: 0.8rem; margin: 0; }

/* Grid tiles */
.work-page .work-grid-row { margin-bottom: 2.5rem; }
/* Images scale with the viewport: fill the column at every width (like the case
   study pages), which also keeps captions on the image's exact edges. The
   !important beats the CDN's 750px intrinsic width on the placeholder images. */
.work-page .work-tile figure.wp-block-image { margin: 0 !important; width: 100%; }
.work-page .work-tile figure.wp-block-image a { display: block; width: 100%; }
.work-page .work-tile img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.work-page .work-tile a:hover img { opacity: 0.88; }
.work-page .work-tile-cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6rem !important; margin-bottom: 0 !important; }
.work-page .work-tile-title { font-weight: 500; margin: 0; }
.work-page .work-tile-title a { text-decoration: none; color: inherit; }
.work-page .work-tile-year { color: var(--work-gray); font-size: 0.8rem; margin: 0; }
.work-page .work-tile-cat { color: var(--work-gray); font-size: 0.8rem; margin: 0.15rem 0 0 !important; }

/* ============ Case studies ============ */

.work-page .cs-crumb { font-size: 0.8rem; color: var(--work-gray); margin-bottom: 3rem; text-align: left; }
.work-page .cs-crumb a { color: var(--work-gray); text-decoration: none; }

.work-page .cs-titlerow { margin-top: 0; margin-bottom: 3rem; align-items: flex-start; }
.work-page .cs-title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  /* Optical alignment with the breadcrumb: Poppins capitals carry ~0.08em of
     left side bearing at display sizes. Tune in 0.01em steps if needed. */
  margin-left: -0.075em;
  overflow-wrap: normal;
}
.work-page .cs-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--work-gray);
  margin: 0 0 0.6rem !important;
}
.work-page .cs-titlerow p:not(.cs-label) { color: #555; line-height: 1.6; max-width: 38em; }

.work-page .cs-hero { margin-top: 1rem !important; }
.work-page .cs-two-up { margin: 1.5rem 0; }

.work-page .cs-meta { margin: 4rem 0; }
.work-page .cs-meta p { margin: 0; line-height: 1.6; }

.work-page .cs-about { margin: 4rem 0 2rem; }
.work-page .cs-bigh { font-size: 2.2rem; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.work-page .cs-about p, .work-page .cs-about li { color: #555; line-height: 1.6; }
.work-page .cs-about h3 { margin: 0 0 0.75rem; }
.work-page .cs-about h3 + h3, .work-page .cs-about ul + h3 { margin-top: 2rem; }

.work-page .cs-phase { margin: 3.5rem 0 0.5rem; }
.work-page .cs-phase h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.75rem; }
.work-page .cs-phase p { color: #555; line-height: 1.6; }

/* Impact + Outcome — same label grid as the Year/Role/Services meta.
   Rows carry both classes (cs-meta cs-impact / cs-meta cs-outcome) so they
   inherit the meta type styles; these rules only tighten row spacing. */
.work-page .cs-impact { margin: 4rem 0 0; }
.work-page .cs-impact + .cs-impact { margin-top: 2rem; }
.work-page .cs-outcome { margin: 4rem 0; }
.work-page .cs-outcome p:not(.cs-label) { max-width: 44em; }

/* ============ Mobile ============ */

@media (max-width: 781px) {
  .work-page .wp-block-columns { flex-wrap: wrap; }
  .work-page .wp-block-column { flex-basis: 100% !important; }
  .work-page .cs-phase .wp-block-column:empty,
  .work-page .cs-impact .wp-block-column:empty,
  .work-page .cs-outcome .wp-block-column:empty { display: none; }
}