/* ==========================================================================
   Andron.com — portfolio theme (overwrites portfolio-static/style.css on build)
   Matches the unified site: navy/blue/gold, Segoe UI, glass nav, page-hero,
   polished cards, and clean case-study typography.
   ========================================================================== */
:root{
  --ink:#1a2233; --muted:#5b6577; --line:#e7ebf2;
  --brand:#2b6cb0; --brand-deep:#1f3a5f; --accent:#e8b931;
  --paper:#fff; --soft:#f5f7fb;
}
*{box-sizing:border-box;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  margin:0; padding:0; color:var(--ink); line-height:1.65; background:#fff;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}

/* The cross-section nav is injected at build time; neutralize its old-theme
   offset (it assumed a 2rem body padding) so it sits flush above the hero. */
body .ax-nav{margin-top:0; margin-bottom:0;}

/* ---- Page hero (portfolio index) ---------------------------------------- */
.px-hero{
  position:relative; overflow:hidden;
  width:100vw; margin-left:calc(50% - 50vw);
  padding:66px 24px 72px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#1f3a5f 0%,#2b6cb0 55%,#4a90c2 120%);
}
.px-hero::before{
  content:''; position:absolute; inset:-50%;
  background:radial-gradient(ellipse at 72% 30%,rgba(232,185,49,.16) 0%,transparent 50%);
}
.px-hero-inner{position:relative; z-index:1; max-width:780px; margin:0 auto;}
.px-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; font-weight:700; color:#fff; opacity:.85; margin-bottom:14px;
}
.px-hero h1{
  font-size:clamp(2rem,4.4vw,3rem); font-weight:300; letter-spacing:-.02em;
  line-height:1.12; margin:0 0 .35em; color:#fff;
}
.px-hero h1 strong{font-weight:800;}
.px-hero p{color:rgba(255,255,255,.92); font-size:1.1rem; max-width:600px; margin:0 auto;}

/* ---- Grid + cards ------------------------------------------------------- */
.px-wrap{max-width:1100px; margin:0 auto; padding:56px 24px 24px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:26px;}
.card{
  position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 40px rgba(20,30,55,.08);
  transition:transform .18s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 50px -18px rgba(20,30,55,.3);}
.card img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  background:linear-gradient(135deg,#1f3a5f,#2b6cb0 70%,#e8b931);
}
.card .no-thumb{
  aspect-ratio:16/10;
  background:linear-gradient(135deg,#1f3a5f,#2b6cb0 70%,#e8b931);
}
.card h2{font-size:1.1rem; margin:16px 18px 4px; color:var(--brand-deep); line-height:1.25;}
.card time{display:block; color:var(--muted); font-size:.85rem; padding:0 18px 18px; margin:0;}

/* ---- Case-study pages --------------------------------------------------- */
header:not(.px-hero){max-width:820px; margin:0 auto; padding:30px 24px 0;}
header:not(.px-hero) a{color:var(--brand); font-weight:600; font-size:.95rem;}
header:not(.px-hero) a:hover{text-decoration:underline;}
article{max-width:820px; margin:0 auto; padding:8px 24px 50px;}
article h1{
  font-size:clamp(1.8rem,3.6vw,2.4rem); color:var(--brand-deep);
  line-height:1.18; margin:.4em 0 .2em;
}
article > time{color:var(--muted); font-size:.92rem; display:block; margin-bottom:1.2rem;}
article .featured{
  display:block; width:100%; margin:1.5rem 0; border-radius:14px;
  box-shadow:0 14px 44px -16px rgba(20,30,55,.4);
}
.content{font-size:1.05rem; color:var(--ink);}
.content p{margin:0 0 1.05em;}
.content a{color:var(--brand); font-weight:600;}
.content a:hover{text-decoration:underline;}
.content h2{font-size:1.4rem; color:var(--brand-deep); margin:1.6em 0 .4em;}
.content img{margin:1.2rem 0; border-radius:10px;}
.site-embed{
  margin:1.6rem 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff;box-shadow:0 10px 30px rgba(20,30,55,.08);
}
.site-embed-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.site-embed-url{color:var(--muted);font-weight:600}
.site-embed-bar a{color:var(--brand);font-weight:600}
.site-embed-preview{display:block;line-height:0;background:#111}
.site-embed-preview img{width:100%;height:auto;display:block}

@media(max-width:600px){
  .px-hero{padding:50px 16px 56px;}
  .px-wrap{padding:40px 18px 18px;}
}