/* Project detail: full editorial case-study layout.
   This intentionally uses the same shell variables as the homepage. */
:is(#detail-modal, #case-study) {
  --detail-gutter: var(--page-gutter, 32px);
  --detail-shell: var(--page-shell, 1504px);
  color: #0b1220;
}

:is(#detail-modal, #case-study) .case-shell-container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--detail-shell) !important;
  margin-inline: auto !important;
  padding-inline: var(--detail-gutter) !important;
}

:is(#detail-modal, #case-study) .detail-topbar { min-height: 68px; }
:is(#detail-modal, #case-study) #detail-back { font-size: 14px; font-weight: 600; color: #52617a; }
:is(#detail-modal, #case-study) #detail-close { min-width:auto; height:auto; border:0; border-radius:0; padding:0; background:transparent; }
#cs-hero, #detail-hero, #cs-tags, #detail-tags { display: none !important; }

/* Kept in the DOM for the existing scroll/keyboard logic. */
:is(#detail-modal, #case-study) .case-study-nav { display: none !important; }

:is(#detail-modal, #case-study) .case-readable {
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  max-width: var(--detail-shell) !important;
  margin-inline: auto !important;
  padding: 32px var(--detail-gutter) 40px !important;
}

:is(#detail-modal, #case-study) .detail-project-info {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #e0e9f4 !important;
  border-radius: 12px;
  background: #eff6ff;
}
:is(#detail-modal, #case-study) .detail-project-info > div { min-width: 0; padding: 25px 36px; }
:is(#detail-modal, #case-study) .detail-project-info > div + div { border-left: 1px solid #cfdceb; }
:is(#detail-modal, #case-study) .detail-project-info p:first-child {
  margin: 0 0 8px !important; color: #66758d !important; font-size: 11px !important;
  font-weight: 700 !important; line-height: 1.2; letter-spacing: .11em !important; text-transform: uppercase !important;
}
:is(#detail-modal, #case-study) .detail-project-info p:last-child {
  margin: 0 !important; color: #11182a; font-size: 21px !important; font-weight: 650 !important;
  line-height: 1.25; overflow-wrap: anywhere;
}

:is(#detail-modal, #case-study) .detail-story {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px !important;
}
:is(#detail-modal, #case-study) .detail-story > :not([hidden]) ~ :not([hidden]) { margin-top: 0 !important; }
:is(#detail-modal, #case-study) .detail-editorial-section {
  min-height: 174px; padding: 25px 32px !important; border: 1px solid #dce6f2 !important;
  border-radius: 10px; background: #fff; scroll-margin-top: 90px;
}
:is(#detail-modal, #case-study) .detail-editorial-section > p:first-child {
  margin: 0 0 9px !important; color: #145bff !important; font-size: 13px !important;
  font-weight: 750 !important; line-height: 1.2; letter-spacing: .08em !important; text-transform: uppercase;
}
:is(#detail-modal, #case-study) .detail-editorial-section > p:last-child {
  margin: 0 !important; color: #5c6a83 !important; font-size: 15px !important; line-height: 1.48 !important;
}
:is(#detail-modal, #case-study) .detail-editorial-section.is-section-active { background: #f8fbff; border-color: #a9c7ff !important; }

:is(#detail-modal, #case-study) #detail-gallery-section {
  margin: 28px 0 10px !important; color: #66758d !important; font-size: 12px !important;
  font-weight: 700 !important; letter-spacing: .1em !important;
}
:is(#detail-modal, #case-study) #detail-gallery-grid { width: 100%; }

:is(#detail-modal, #case-study) .case-cta {
  display: flex !important; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 16px !important; padding: 20px 36px !important; border: 1px solid #e0e9f4 !important;
  border-radius: 10px !important; background: #eff6ff !important; box-shadow: none !important;
}
:is(#detail-modal, #case-study) .case-cta p { margin-bottom: 4px !important; }
:is(#detail-modal, #case-study) .case-cta h3 { margin: 0; font-size: 22px !important; }
:is(#detail-modal, #case-study) .case-cta a { border-radius: 4px !important; white-space: nowrap; }

:is(#detail-modal, #case-study) .detail-project-nav {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important;
  margin-top: 12px !important; border-top: 1px solid #dce6f2; border-bottom: 1px solid #dce6f2;
}
:is(#detail-modal, #case-study) :is(#detail-prev, #detail-next, #cs-prev, #cs-next) {
  min-height: 82px; padding: 18px 20px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: 0;
}
:is(#detail-modal, #case-study) :is(#detail-next, #cs-next) { border-left: 1px solid #dce6f2 !important; text-align: right; }
:is(#detail-modal, #case-study) :is(#detail-prev, #detail-next, #cs-prev, #cs-next):hover { color: #145bff; }

@media (max-width: 900px) {
  :is(#detail-modal, #case-study) .detail-story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#detail-modal, #case-study) .detail-project-info > div { padding: 22px 24px; }
}
@media (max-width: 640px) {
  :is(#detail-modal, #case-study) { --detail-gutter: 20px; }
  :is(#detail-modal, #case-study) .case-readable { padding-top: 20px !important; padding-bottom: 28px !important; }
  :is(#detail-modal, #case-study) .detail-project-info { grid-template-columns: 1fr; }
  :is(#detail-modal, #case-study) .detail-project-info > div { padding: 18px 20px; }
  :is(#detail-modal, #case-study) .detail-project-info > div + div { border-top: 1px solid #cfdceb; border-left: 0; }
  :is(#detail-modal, #case-study) .detail-project-info p:last-child { font-size: 18px !important; }
  :is(#detail-modal, #case-study) .detail-story { grid-template-columns: 1fr; gap: 10px !important; }
  :is(#detail-modal, #case-study) .detail-editorial-section { min-height: 0; padding: 21px 20px !important; }
  :is(#detail-modal, #case-study) .case-cta { align-items: flex-start; flex-direction: column; padding: 20px !important; }
  :is(#detail-modal, #case-study) .detail-project-nav { grid-template-columns: 1fr; }
  :is(#detail-modal, #case-study) :is(#detail-next, #cs-next) { border-top: 1px solid #dce6f2 !important; border-left: 0 !important; }
}

#case-study [data-close-case][aria-label="Close case study"] {
  width: auto;
  height: auto;
  min-width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #52617a;
  font-size: 14px;
  font-weight: 600;
}
#case-study [data-close-case][aria-label="Close case study"] svg { display: none; }
@media (prefers-reduced-motion: reduce) { :is(#detail-modal, #case-study) * { scroll-behavior: auto !important; transition: none !important; } }

/* Two-column project detail: media is kept as the visual anchor, while the
   project story remains readable alongside it. */
:is(#detail-modal, #case-study) .case-readable {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "title meta"
    "divider divider"
    "media story"
    "cta navigation";
  align-items: start;
  column-gap: 22px;
  row-gap: 20px;
  padding-top: 26px !important;
}

:is(#detail-modal, #case-study) .detail-top-divider {
  grid-area: divider;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  height: 1px;
  background: #dce6f2;
}

:is(#detail-modal, #case-study) .detail-heading {
  grid-area: title;
  align-self: end;
  margin: 0;
  color: #0b1220;
  font-family: var(--font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(34px, 3.25vw, 58px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .98;
}

:is(#detail-modal, #case-study) .detail-project-info {
  grid-area: meta;
  align-self: end;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
:is(#detail-modal, #case-study) .detail-project-info > div { padding: 6px 0 6px 32px; }
:is(#detail-modal, #case-study) .detail-project-info > div + div { border-left: 1px solid #d7e0ec; }
:is(#detail-modal, #case-study) .detail-project-info p:first-child { margin-bottom: 5px !important; font-size: 10px !important; }
:is(#detail-modal, #case-study) .detail-project-info p:last-child { font-size: 15px !important; font-weight: 650 !important; }

:is(#detail-modal, #case-study) .detail-media-column { grid-area: media; min-width: 0; }
:is(#detail-modal, #case-study) .detail-media-column,
:is(#detail-modal, #case-study) .detail-story { border-top: 0; padding-top: 0; }
:is(#detail-modal, #case-study) #detail-gallery-grid { width: 100%; }
:is(#detail-modal, #case-study) .detail-media-gallery { display: grid; gap: 12px; }
:is(#detail-modal, #case-study) .detail-gallery-feature,
:is(#detail-modal, #case-study) .detail-gallery-thumb {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #edf1f6;
  cursor: pointer;
}
:is(#detail-modal, #case-study) .detail-gallery-feature {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: min(100%, 620px);
  justify-self: start;
  background: #fff;
  border: 1px solid #dce6f2;
}
:is(#detail-modal, #case-study) .detail-gallery-feature :is(img, video),
:is(#detail-modal, #case-study) .detail-gallery-thumb :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
:is(#detail-modal, #case-study) .detail-gallery-thumbnails {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
:is(#detail-modal, #case-study) .detail-gallery-thumbnails::-webkit-scrollbar { display: none; }
:is(#detail-modal, #case-study) .detail-gallery-rail { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
:is(#detail-modal, #case-study) .detail-gallery-rail-button { display: grid !important; visibility: visible !important; opacity: 1 !important; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #d7e0ec; border-radius: 3px; color: #145bff; background: #fff; cursor: pointer; }
:is(#detail-modal, #case-study) .case-gallery-control { visibility: visible !important; pointer-events: auto !important; opacity: 1 !important; }
:is(#detail-modal, #case-study) .case-gallery-toolbar { display: flex !important; visibility: visible !important; }
:is(#detail-modal, #case-study) .detail-gallery-rail-button:hover, :is(#detail-modal, #case-study) .detail-gallery-rail-button:focus-visible { border-color: #145bff; outline: 0; }
:is(#detail-modal, #case-study) .detail-gallery-rail-button svg { display: block; }
:is(#detail-modal, #case-study) .detail-gallery-rail-progress { height: 2px; overflow: hidden; background: #e4ebf4; }
:is(#detail-modal, #case-study) .detail-gallery-rail-progress span { display: block; width: 100%; height: 100%; background: #145bff; transition: width .2s ease; }
:is(#detail-modal, #case-study) .detail-gallery-thumb {
  flex: 0 0 96px;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  transition: border-color .18s ease, opacity .18s ease;
}
:is(#detail-modal, #case-study) .detail-gallery-thumb:hover,
:is(#detail-modal, #case-study) .detail-gallery-thumb:focus-visible,
:is(#detail-modal, #case-study) .detail-gallery-thumb.is-active { border-color: #145bff; opacity: 1; outline: 0; }
:is(#detail-modal, #case-study) .detail-gallery-thumb:not(.is-active) { opacity: .82; }

:is(#detail-modal, #case-study) .detail-story {
  grid-area: story;
  display: block !important;
  border: 1px solid #dce6f2;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
:is(#detail-modal, #case-study) .detail-story > :not([hidden]) ~ :not([hidden]) { margin-top: 0 !important; }
:is(#detail-modal, #case-study) .detail-editorial-section {
  min-height: 0;
  padding: 25px 32px !important;
  border: 0 !important;
  border-bottom: 1px solid #dce6f2 !important;
  border-radius: 0;
  transition: background-color .18s ease;
}
:is(#detail-modal, #case-study) .detail-editorial-section:hover,
:is(#detail-modal, #case-study) .detail-editorial-section:focus-within { border-left: 3px solid #145bff !important; padding-left: 29px !important; background: #f4f8ff; }
:is(#detail-modal, #case-study) .detail-editorial-section:last-child { border-bottom: 0 !important; }
:is(#detail-modal, #case-study) .detail-editorial-section.is-section-active {
  border-left: 3px solid #145bff !important;
  padding-left: 29px !important;
  background: #f4f8ff;
}

:is(#detail-modal, #case-study) #detail-gallery-section { display: none !important; }
:is(#detail-modal, #case-study) .case-cta {
  grid-area: cta;
  margin-top: 4px !important;
  min-height: 110px;
  border-radius: 4px !important;
}
:is(#detail-modal, #case-study) .detail-project-nav {
  grid-area: navigation;
  align-self: stretch;
  margin: 4px 0 0 !important;
  border-top: 1px solid #dce6f2;
  border-bottom: 1px solid #dce6f2;
}

@media (max-width: 900px) {
  :is(#detail-modal, #case-study) .case-readable {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "meta" "divider" "media" "story" "cta" "navigation";
    row-gap: 18px;
  }
  :is(#detail-modal, #case-study) .detail-heading { font-size: 42px; }
  :is(#detail-modal, #case-study) .detail-top-divider { width: 100% !important; }
  :is(#detail-modal, #case-study) .detail-project-info > div { padding-left: 20px; }
  :is(#detail-modal, #case-study) .detail-gallery-feature { aspect-ratio: 16 / 10; min-height: 0; }
}

@media (max-width: 640px) {
  :is(#detail-modal, #case-study) .case-readable { padding-top: 20px !important; row-gap: 16px; }
  :is(#detail-modal, #case-study) .detail-heading { font-size: 35px; }
  :is(#detail-modal, #case-study) .detail-project-info { grid-template-columns: 1fr !important; }
  :is(#detail-modal, #case-study) .detail-project-info > div { padding: 13px 0 !important; }
  :is(#detail-modal, #case-study) .detail-project-info > div + div { border-top: 1px solid #d7e0ec; border-left: 0; }
  :is(#detail-modal, #case-study) .detail-gallery-thumbnails { gap: 8px; }
  :is(#detail-modal, #case-study) .detail-editorial-section { padding: 20px !important; }
  :is(#detail-modal, #case-study) .detail-editorial-section.is-section-active { padding-left: 17px !important; }
}