/*
 * Shared case-study template (resources/views/frontend/casestudy/template.blade.php),
 * base layer. Ported from the approved new-design references; class names keep
 * their reference prefixes (cs-, tw1-...tw16-). Per-study styles live in
 * new-layout/css/case-study/<slug>.css. See also case-study-sections.css.
 *
 * Tailwind utilities in the Blade cover layout; this file holds what they
 * can't express cleanly: the old-workflow chain, the numbered challenge
 * rail, the device stage and the scroll reveal. Tokens are the site's (primary #00B26B,
 * dark #050806). Text on green uses the deeper #007A4A so it clears WCAG AA
 * (#00B26B on white is 2.8:1; #007A4A is 5.4:1). Small type never drops
 * below 12px or 60% opacity. Loaded only on this page via @section('styles').
 */

/* ------------------------------------------------------------------ */
/* Bento metric tiles: white / light grey, one solid green accent      */
/* ------------------------------------------------------------------ */
.cs-tile { position: relative; display: flex; flex-direction: column; min-height: 200px; overflow: hidden; padding: 26px 24px 24px; border-radius: 24px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 16px 32px -28px rgba(0, 0, 0, .25); }
.cs-tile--accent { background: #007A4A; border-color: transparent; color: #fff; }
.cs-tile__num { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #111; }
.cs-tile__label { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #333; }
.cs-tile__ctx { margin-top: 8px; padding-top: 10px; font-size: 15px; line-height: 1.45; color: rgba(0, 0, 0, .65); }
.cs-tile--accent .cs-tile__num, .cs-tile--accent .cs-tile__label { color: #fff; }
.cs-tile--accent .cs-tile__ctx { color: rgba(255, 255, 255, .88); }
@media (max-width: 639px) {
  .cs-tile { min-height: 0; padding: 16px 14px 14px; border-radius: 16px; }
  .cs-tile__num { font-size: 34px; }
  .cs-tile__label { margin-top: 6px; font-size: 12px; letter-spacing: .06em; }
  .cs-tile__ctx { font-size: 15px; line-height: 1.4; }
}
@media (min-width: 768px) { .cs-tile__num { font-size: 52px; } }


/* ------------------------------------------------------------------ */
/* Old workflow: the agent → paper → re-entry chain (light)             */
/* ------------------------------------------------------------------ */
.cs-chain { display: grid; gap: 8px; }
.cs-chain__step {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .1);
}
.cs-chain__num {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: #F3F4F6; font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .7);
}
.cs-chain__step b { display: block; font-weight: 600; font-size: 15px; color: #111; }
.cs-chain__step small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: rgba(0, 0, 0, .65); }
.cs-chain__step--pain { border-color: rgba(222, 75, 71, .55); background: #FFEDEB; box-shadow: inset 4px 0 0 #DE4B47; }
.cs-chain__step--pain .cs-chain__num { background: #D04643; color: #fff; /* darker than TW #DE4B47 so white text passes 4.5:1 */ }
.cs-chain__key { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 4px; background: #FFEDEB; border: 1px solid rgba(222, 75, 71, .55); box-shadow: inset 2px 0 0 #DE4B47; vertical-align: -1px; }
@media (min-width: 1024px) {
  .cs-chain { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
  .cs-chain__step { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px 20px; border-radius: 0; border-right: 0; }
  .cs-chain__step--pain { box-shadow: inset 0 4px 0 #DE4B47; }
  .cs-chain__step:first-child { border-radius: 16px 0 0 16px; }
  .cs-chain__step:last-child { border-radius: 0 16px 16px 0; border-right: 1px solid rgba(0, 0, 0, .1); }
  .cs-chain__step::after {
    content: ""; position: absolute; right: -7px; top: 50%; z-index: 1; width: 12px; height: 12px;
    border-top: 1px solid rgba(0, 0, 0, .25); border-right: 1px solid rgba(0, 0, 0, .25);
    transform: translateY(-50%) rotate(45deg); background: inherit;
  }
  .cs-chain__step:last-child::after { display: none; }
}

/* ------------------------------------------------------------------ */
/* Challenge rail: large numeral, sticky heading                        */
/* ------------------------------------------------------------------ */
.cs-challenge { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.cs-challenge:last-child { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.cs-challenge__num { font-size: 36px; font-weight: 600; line-height: 1; color: #007A4A; letter-spacing: -.02em; }
@media (min-width: 768px) {
  .cs-challenge { grid-template-columns: 110px minmax(0, 1fr); gap: 32px; padding: 40px 0; }
  .cs-challenge__num { font-size: 64px; }
}

/* ------------------------------------------------------------------ */
/* Device stage: storefront + phones                                    */
/* ------------------------------------------------------------------ */
.cs-stage { position: relative; }
.cs-browser {
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45);
}
.cs-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F3F4F4; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.cs-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }   /* macOS traffic lights */
.cs-browser__bar i:nth-child(2) { background: #FEBC2E; }
.cs-browser__bar i:nth-child(3) { background: #28C840; }
.cs-browser__bar span { margin: 0 auto; padding: 3px 14px; border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); font-size: 12px; color: #595959; }
.cs-browser img { display: block; width: 100%; height: auto; }
/* hero: the browser takes the phone's full height (grid items-stretch) and the storefront crops from the top */
.cs-browser--fill { display: flex; flex-direction: column; }
.cs-browser--fill img { flex: 1 1 auto; min-height: 0; height: 100%; object-fit: cover; object-position: center top; }   /* the capture matches the mock's aspect, so this is a no-op crop */
/* device frame for real app screenshots */
.cs-phone { border-radius: 24px; padding: 8px; background: #0B100D; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cs-phone img { display: block; width: 100%; height: auto; border-radius: 17px; }
/* hero: the device keeps its real proportions (never stretched) and sits on the browser's baseline;
   when the device is the taller of the pair the browser fills and crops (see .cs-browser--fill),
   when the browser is taller the device is simply shorter, bottom-aligned */
.cs-phone--hero { align-self: end; padding: 7px; border-radius: 24px; }
.cs-phone--hero img { border-radius: 18px; }

/* official listing frames: 6-up on desktop, a snap scroller on phones */
.cs-app-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
.cs-app-strip li { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); background: #F3F5F8; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .45); }
.cs-app-strip img { display: block; width: 100%; height: auto; }
@media (max-width: 1023px) { .cs-app-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .cs-app-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 16px -16px 0; padding: 20px 16px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cs-app-strip::-webkit-scrollbar { display: none; }
  .cs-app-strip li { flex: 0 0 42%; scroll-snap-align: start; }
}

/* testimonial pull-quote: light weight, generous leading, a large green opening mark hung in the margin */
.cs-quote { position: relative; padding-top: 44px; }
.cs-quote::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 27px; background: url("../img/case-study/truewholesale/quote-mark.svg") center / contain no-repeat; opacity: .9; }

/* ------------------------------------------------------------------ */
/* Type roles: eyebrow (section kicker), label (table/meta), note        */
/* (footnote). Sized and coloured to clear AA; eyebrows are <span>s      */
/* inside their heading, never their own <p>.                           */
/* ------------------------------------------------------------------ */
.cs-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #007A4A; }
.cs-eyebrow--light { color: #4ED39C; }   /* on the dark hero/CTA bands: 8.9:1 on #050806 */
.cs-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .65); }
.cs-label--accent { color: #007A4A; }
.cs-small { font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .65); }
.cs-small--dark { color: rgba(0, 0, 0, .85); }
.cs-small--light { color: rgba(255, 255, 255, .75); }
/* one body size and one grey for every paragraph (CTO B2) */
.cs-body { font-size: 17px; line-height: 1.6; color: rgba(0, 0, 0, .85); }
.cs-body--light { color: rgba(255, 255, 255, .85); }
/* two heading sizes: sections, and the two CTA cards (CTO B1) */
.cs-h2 { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.cs-h2--cta { font-size: 28px; }
@media (min-width: 768px) { .cs-h2 { font-size: 40px; } .cs-h2--cta { font-size: 44px; } }
/* anchored sections land below the fixed header */
.cs-tws section[id], .cs-tws [id].cs-anchor, .cs-tws h2[id] { scroll-margin-top: 88px; }


/* ------------------------------------------------------------------ */
/* Buttons: both styles 54px tall with a 16px label (CTO B4).          */
/* The primary's 2px ring is part of its 54px.                         */
/* ------------------------------------------------------------------ */
.cs-btn { min-height: 54px; }
@media (max-width: 639px) { .cs-btn { width: 100%; } }

/* text link with the arrow glyph: used where a link should not compete with the CTAs (CTO C1) */
.cs-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 15px; font-weight: 600; color: #007A4A; text-decoration: none; }
.cs-textlink:hover { text-decoration: underline; }
a.cs-textlink:focus-visible { outline: 2px solid #007A4A; outline-offset: 3px; border-radius: 4px; }

/* whole-card links: an arrow in the corner and a hover lift, no repeated label (CTO C7, E) */
.cs-card { text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.cs-card:hover { transform: translateY(-2px); border-color: rgba(0, 178, 107, .6); box-shadow: 0 16px 32px -24px rgba(0, 0, 0, .3); }
.cs-card:focus-visible { outline: 2px solid #007A4A; outline-offset: 3px; }
.cs-card__arrow { position: absolute; right: 16px; top: 16px; width: 18px; height: 18px; background-color: #00744A; transition: transform .25s;
  -webkit-mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; }
.cs-card:hover .cs-card__arrow { transform: translate(2px, -2px); }
@media (min-width: 768px) { .cs-card__arrow { right: 20px; top: 20px; } }

/* ------------------------------------------------------------------ */
/* Scroll reveal (case-study.js adds .is-inview). Hidden only once a script in the page head has set  */
/* html.cs-js (so no JS = all content visible), and never in the first section (the hero, above the fold). */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html.cs-js .cs-tws > section:not(:first-child) .cs-reveal, html.cs-js .cs-tws > .cs-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(0, 0, .58, 1), transform .65s cubic-bezier(0, 0, .58, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  html.cs-js .cs-tws > section:not(:first-child) .cs-reveal.is-inview, html.cs-js .cs-tws > .cs-reveal.is-inview { opacity: 1; transform: none; }
}