/*
CHANGE LOG
File: static/css/iplan-thesis-cards.css
Purpose: iPlan story-card styles (source: iplan.nsgia.com /static/css/thesis_cards.css), used only by templates/truck-stop-light.html.
Version History:
2026-10-20 v1.0 - Copied unchanged from https://iplan.nsgia.com (Michael: the Truck Stop Light landing page must look identical to iPlan's).
*/
/* thesis_cards.css - iplan.nsgia.com
   /var/www/html/iplan.nsgia.com/static/css/thesis_cards.css
   2026-09-17 (Michael): /opportunity (thesis) rebuilt to match the /investor quick start
   and cityplan.nsgia.com. Each beat is one full-width image with a SMALL, SHORT overlay
   (eyebrow + one line) bottom-anchored on the image, and the supporting sentence folds into
   an accordion below. Ported from cityplan's visual_story.css (.story-card / .hero-overlay),
   adapted to iplan design tokens; uses iplan's native <details class="acc"> so no JS.
   Cards cap at --wide and center, same width treatment as the investor quick-start images
   (retires the old 80vw investor-story band on this page). */

.thesis-story{ max-width:var(--wide); margin:0 auto; }

.thesis-hero{ margin:8px 0 30px; }
.thesis-hero .kicker{ margin:0 0 .5rem; font-size:.8rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted,#637383); }
.thesis-hero h1{ margin:0 0 .85rem; font-size:clamp(2rem,4vw,3.3rem); line-height:1.03;
  letter-spacing:-.02em; color:var(--ink,#18364d); }
.thesis-hero .lead{ margin:0; max-width:72ch; font-size:clamp(1.05rem,1.3vw,1.2rem);
  line-height:1.55; color:var(--ink,#18364d); }

.story-card{ margin:0 0 26px; border:1px solid var(--line,#ccd7df); border-radius:10px;
  overflow:hidden; background:#fff; box-shadow:0 3px 15px rgba(0,0,0,.06); }

.feature-image{ position:relative; width:100%; }
.feature-image img{ display:block; width:100%; height:auto; }

/* small, short overlay: bottom-left caption with a legibility scrim */
.hero-overlay{ position:absolute; left:0; right:0; bottom:0; padding:16px 20px 14px;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6);
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.12) 60%, rgba(0,0,0,0)); }
.hero-overlay .eyebrow{ display:block; margin:0 0 .22rem; font-size:.72rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; opacity:.92; }
.hero-overlay .line{ display:block; margin:0; max-width:36ch; font-weight:600;
  font-size:clamp(1.05rem,1.6vw,1.5rem); line-height:1.16; }

/* accordion sits flush under the image; iplan's .acc styles the summary/body */
.story-card details.acc{ margin:0; border-top:1px solid var(--line,#ccd7df); border-radius:0;
  max-width:none; }

.thesis-close{ max-width:72ch; margin:34px auto 8px; }
.thesis-close .eyebrow{ margin:0 0 .4rem; font-size:.8rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted,#637383); }
.thesis-close h2{ margin:0 0 .6rem; font-size:clamp(1.6rem,2.4vw,2.3rem); line-height:1.1;
  letter-spacing:-.015em; color:var(--ink,#18364d); }
.thesis-close p{ margin:0; font-size:1.05rem; line-height:1.6; color:var(--ink,#18364d); }

@media (max-width:560px){
  .hero-overlay{ padding:12px 14px 11px; }
  .hero-overlay .line{ font-size:1.05rem; }
}