/* Case-study (item) pages, build 05: hero with the overlapping featured image, facts panel, story sections, tools list, gallery, previous and next, lightbox.
   Loaded only on portfolio pages (Adams_Page_Assets: marker `adams-cs-`). The band, card, section head, button and closing band are the Home components. Values are tokens from tokens.css. */

/* Hero: the inner hero with a headline sized for a long title, and the featured image overlapping the next section. */
.adams-cs-hero { padding-bottom: 0; overflow: visible; overflow-x: clip; }
.adams-cs-hero .eyebrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.adams-cs-hero .adams-phero-copy { max-width: none; }
.adams-cs-hero h1.adams-phero-h1 { max-width: 50rem; font-size: clamp(2.25rem, 5vw, 3.5rem); }
.adams-cs-sum { margin-top: 1.25rem; max-width: 44rem; font-size: 1.375rem; line-height: 1.5; color: var(--muted-dark); }
.adams-cs-feature { position: relative; z-index: 2; display: grid; place-items: center; margin: 2.25rem 0 -5rem; aspect-ratio: 16 / 8; width: 100%; overflow: hidden; border: .25rem solid var(--panel); border-radius: var(--radius); background: var(--grad-soft); box-shadow: 0 2rem 3.5rem -1.5rem rgba(0, 0, 0, .55); }
.adams-cs-feature .wp-block-image { margin: 0; width: 100%; height: 100%; }
.adams-cs-feature a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.adams-cs-feature img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.adams-cs-feature:has(a:hover) img { transform: scale(1.04); }
.adams-cs-feature .adams-card-ph { padding: 1rem; font-size: clamp(1.75rem, 4vw, 3rem); text-align: center; }
@media (max-width: 40rem) { .adams-cs-feature { aspect-ratio: 4 / 3; } }
.adams-band.adams-cs-after { padding-top: clamp(7rem, 12vw, 9rem); }

/* Body: facts panel beside the story. */
.adams-cs-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 52rem) { .adams-cs-body { grid-template-columns: 1fr; } }
.adams-cs-facts { position: sticky; top: 6rem; display: grid; gap: 1.2rem; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-top: .3rem solid var(--teal); border-radius: var(--radius); }
@media (max-width: 52rem) { .adams-cs-facts { position: static; } }
.adams-cs-fact-label { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.adams-cs-fact-value { margin-top: .3rem; font-size: 1.0625rem; line-height: 1.5; }
.adams-cs-facts .adams-btns { margin-top: .3rem; }
.adams-cs-facts .adams-btn, .adams-cs-facts .adams-btn .wp-block-button__link { width: 100%; justify-content: center; }
.adams-cs-visit .icon { rotate: -45deg; }

/* Story: per-item sections, each a heading with an icon chip, then paragraphs, a diamond list or the tools list. */
.adams-cs-story { display: grid; gap: 1rem; }
.adams-cs-section { display: grid; gap: 1rem; margin-top: 2rem; }
.adams-cs-section:first-child { margin-top: 0; }
.adams-cs-h2 { display: flex; align-items: center; gap: .9rem; }
.adams-cs-chip { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .85rem; background: color-mix(in srgb, var(--teal) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line)); }
.adams-cs-chip .icon { font-size: 1.7rem; }
.adams-cs-section p { max-width: 46rem; }
.adams-cs-diamonds { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.adams-cs-diamonds > li { position: relative; padding-left: 2rem; }
.adams-cs-diamonds > li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: .65rem; height: .65rem; transform: rotate(45deg); border-radius: .12rem; background: linear-gradient(135deg, #0A5655, #14B8B2); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--teal) 14%, transparent); }
.adams-cs-tools { display: grid; gap: .9rem; }
.adams-cs-tool { padding: .9rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-left: .25rem solid var(--teal); border-radius: var(--radius); }
.adams-cs-tool-name { font-family: var(--font-display); font-weight: 700; }
.adams-cs-tool-text { margin-top: .15rem; color: var(--muted); }

/* Gallery. */
.adams-cs-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 52rem) { .adams-cs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: one column, full width; the thumbnail shows the top of the screenshot, where the page starts. */
@media (max-width: 40rem) { .adams-cs-gallery { grid-template-columns: minmax(0, 1fr); } .adams-cs-thumb img { object-position: top; } }
.adams-cs-thumb { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--grad-soft); transition: border-color .25s, transform .3s, box-shadow .3s; }
.adams-cs-thumb a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.adams-cs-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adams-cs-thumb:hover, .adams-cs-thumb:focus-within { border-color: var(--teal); transform: translateY(-.35rem); box-shadow: var(--glow); }
.adams-cs-thumb a:focus-visible, .adams-cs-feature a:focus-visible { outline: .1875rem solid var(--teal); outline-offset: -.1875rem; }

/* Previous and next. */
.adams-cs-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 44rem) { .adams-cs-pn { grid-template-columns: 1fr; } }
.adams-cs-pn a { position: relative; overflow: hidden; display: grid; align-items: center; gap: 1rem 1.1rem; padding: 1.1rem 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .3s, border-color .3s, box-shadow .3s; }
.adams-cs-pn a.is-prev { grid-template-columns: auto minmax(0, 1fr) minmax(0, 9.5rem); }
.adams-cs-pn a.is-next { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto; }
.adams-cs-pn a:hover, .adams-cs-pn a:focus-visible { transform: translateY(-.3rem); border-color: var(--teal); box-shadow: var(--glow); }
.adams-cs-pn a:focus-visible { outline: .1875rem solid var(--teal); outline-offset: .1875rem; }
.adams-cs-pn-lbl { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.adams-cs-pn-ttl { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; }
.adams-cs-pn-th { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--grad-soft); font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center; color: color-mix(in srgb, var(--teal) 45%, var(--ink)); }
.adams-cs-pn-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.adams-cs-pn-ar .icon { font-size: 2rem; transition: transform .3s; }
.adams-cs-pn a.is-prev:hover .adams-cs-pn-ar .icon { transform: translateX(-.4rem); }
.adams-cs-pn a.is-next:hover .adams-cs-pn-ar .icon { transform: translateX(.4rem); }
@media (max-width: 44rem) { .adams-cs-pn a.is-prev, .adams-cs-pn a.is-next { grid-template-columns: auto minmax(0, 1fr); } .adams-cs-pn-th { grid-column: 1 / -1; order: -1; } .adams-cs-pn a.is-next .adams-cs-pn-ar { order: 1; } }

/* More projects: head with the "All projects" link. */
.adams-cs-more a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.adams-cs-more .icon { font-size: 1.2rem; transition: transform .25s; }
.adams-cs-more a:hover .icon { transform: translateX(.3rem); }
@media (max-width: 40rem) { .adams-cs-more a { min-height: 2.75rem; } }

/* Legacy items (no blocks yet): the stored body sits in a content band under the title hero. */
.adams-cs-legacy { max-width: 52rem; }

@media (prefers-reduced-motion: reduce) { .adams-cs-feature img, .adams-cs-thumb, .adams-cs-pn a, .adams-cs-pn-ar .icon { transition: none; } }

/* Lightbox (built by case-study-lightbox.js; self-hosted, no third-party request). */
dialog.adams-lb { border: 0; padding: 0; background: transparent; max-width: min(64rem, 94vw); width: 100%; color: var(--off); }
dialog.adams-lb::backdrop { background: rgba(15, 22, 21, .88); }
.adams-lb-inner { position: relative; display: grid; gap: .75rem; }
.adams-lb-img { display: grid; place-items: center; max-height: 78vh; background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.adams-lb-img img { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; }
.adams-lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.0625rem; }
.adams-lb-nav { display: flex; gap: .5rem; }
.adams-lb button { font: inherit; font-weight: 700; font-size: 1.0625rem; background: var(--off); color: var(--ink); border: 0; border-radius: var(--radius); padding: .6rem 1rem; cursor: pointer; }
.adams-lb button:hover { background: var(--mint-light); }
.adams-lb :focus-visible { outline: .1875rem solid var(--mint-light); outline-offset: .1875rem; }
@media (prefers-reduced-motion: no-preference) { dialog.adams-lb[open] { animation: adams-lb-in .2s ease; } @keyframes adams-lb-in { from { opacity: 0; } to { opacity: 1; } } }

/* Lightbox on phones (build 09m): the dialog fills the viewport. Top bar: caption and Close. Middle: the screenshot at full width, scrolling vertically. Bottom bar: Previous and Next.
   The bar and nav wrappers become `display: contents` so their children sit in the grid; the markup (and the desktop layout above) is unchanged. No touch-action, so pinch zoom stays on. */
@media (max-width: 40rem) {
	html.adams-lb-open { overflow: hidden; }
	dialog.adams-lb { max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: none; margin: 0; background: var(--ink); overflow: hidden; }
	.adams-lb-inner { height: 100vh; height: 100dvh; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "cap close" "img img" "prev next"; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
	.adams-lb-bar, .adams-lb-nav { display: contents; }
	.adams-lb-cap { grid-area: cap; align-self: center; padding: .75rem 1rem; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
	.adams-lb-close { grid-area: close; justify-self: end; align-self: center; margin: .5rem 1rem .5rem 0; min-width: 5rem; min-height: 2.75rem; }
	.adams-lb-img { grid-area: img; display: block; max-height: none; border-radius: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.adams-lb-img img { width: 100%; max-width: none; max-height: none; height: auto; }
	.adams-lb-prev, .adams-lb-next { min-height: 2.75rem; margin: .5rem; }
	.adams-lb-prev { grid-area: prev; }
	.adams-lb-next { grid-area: next; }
}