/* =====================================================================
   MYTESTCART — public content pages (About, Blog, Terms, Privacy)
   ---------------------------------------------------------------------
   Loaded AFTER landing.css, which supplies the palette, the nav and the
   footer. This file only adds what a text page needs: a page header band
   and readable prose. These pages used to inherit the orange Bootstrap
   theme through Front/layout/master.php; they are on the same Satoshi +
   blue system as everything else now.
   ===================================================================== */

/* ---------- Page header band ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:66px 0 54px;
  background:
    radial-gradient(circle at 10% 20%,rgba(83,147,207,.14),transparent 30%),
    radial-gradient(circle at 90% 14%,rgba(83,147,207,.11),transparent 28%),
    linear-gradient(135deg,#F7FBFE 0%,#FFFFFF 58%,#F5FAFD 100%);
  border-bottom:1px solid var(--border);
  text-align:center;
}
.page-hero:after{
  content:"";position:absolute;width:520px;height:520px;
  right:-220px;top:-270px;border:1px solid rgba(83,147,207,.12);border-radius:50%;
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{
  color:var(--navy);font-size:44px;line-height:1.12;letter-spacing:-1.6px;
  font-weight:700;margin:0 auto 12px;max-width:820px;
}
.page-hero p{margin:0 auto;max-width:620px;color:var(--muted);font-size:14px;line-height:1.8}

/* ---------- Prose ---------- */
.prose{width:min(820px,100%);margin:0 auto;padding:66px 0 84px}
.prose.wide{width:min(1180px,calc(100% - 48px))}
.prose h2{color:var(--navy);font-size:26px;letter-spacing:-.7px;font-weight:700;margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{color:var(--navy);font-size:18px;font-weight:700;margin:28px 0 9px}
.prose p{color:#4A5A70;font-size:14px;line-height:1.85;margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 20px;padding:0}
.prose li{color:#4A5A70;font-size:14px;line-height:1.85;margin-bottom:7px}
.prose a{color:var(--blue-dark);font-weight:700}
.prose a:hover{text-decoration:underline}
.prose strong{color:var(--navy)}
.prose img{border-radius:16px;display:block;margin:22px 0}
.prose hr{border:0;border-top:1px solid var(--border);margin:32px 0}
.prose table{width:100%;border-collapse:collapse;margin-bottom:18px}
.prose th,.prose td{border:1px solid var(--border);padding:10px 12px;font-size:13px;text-align:left}
.prose th{background:#F8FAFC;color:var(--navy)}

/* A card for a self-contained block inside prose (feature lists etc). */
.prose-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:26px 28px;box-shadow:0 10px 30px rgba(27,55,92,.04);margin-bottom:18px}
.prose-card h3{margin-top:0}
.prose-card p:last-child{margin-bottom:0}

/* Two-up split used by the About page. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:44px}
.split img{width:100%;border-radius:20px;margin:0}

/* ---------- Blog ---------- */
.blog-wrap{padding:60px 0 84px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(27,55,92,.045);transition:transform .25s ease,box-shadow .25s ease}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(27,55,92,.09)}
.blog-card .thumb{height:180px;background:#EAF1F6;overflow:hidden}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0}
.blog-card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.blog-card h3{color:var(--navy);font-size:16px;font-weight:700;line-height:1.4;margin:0 0 8px}
.blog-card p{color:var(--muted);font-size:12px;line-height:1.7;flex:1;margin-bottom:16px}
.blog-card .read{align-self:flex-start;height:36px;padding:0 15px;border-radius:9px;display:inline-flex;align-items:center;background:var(--blue-soft);color:var(--blue-dark);font-size:11px;font-weight:800}
.blog-card .read:hover{background:#DFEFFB}

.blog-empty{text-align:center;padding:60px 20px;color:var(--muted);font-size:13px}

/* paginationjs, restyled to match. */
#pagination-container{display:flex;justify-content:center;margin-top:38px}
.paginationjs .paginationjs-pages li>a{border-radius:9px!important;color:var(--muted);font-size:12px;font-weight:700}
.paginationjs .paginationjs-pages li.active>a{background:var(--blue)!important;color:#fff!important}

/* Article body coming from the blog editor — content we do not control, so it
   is contained rather than styled element by element. */
.article-body{overflow-wrap:break-word}
.article-body img{max-width:100%;height:auto}
.article-cover{width:100%;max-height:420px;object-fit:cover;border-radius:20px;margin-bottom:28px}

.back-link{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;color:var(--blue-dark);font-size:12px;font-weight:800}

@media(max-width:760px){
  .page-hero{padding:48px 0 40px}
  .page-hero h1{font-size:32px;letter-spacing:-1px}
  .prose{padding:46px 0 62px}
  .split{grid-template-columns:1fr;gap:24px}
}

@media(max-width:480px){
  .page-hero{padding:38px 0 32px}
  .page-hero h1{font-size:26px;letter-spacing:-.6px}
  .page-hero p{font-size:14px}
  .prose{padding:36px 0 48px}
  .prose h2{font-size:22px;margin:30px 0 10px}
  .prose h3{font-size:16.5px}
  .prose p,.prose li{font-size:14.5px}
  .prose-card{padding:20px 18px}
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
}


/* ---------- Type scale raised to match the landing page ---------- */
.page-hero p{font-size:16px}
.prose p,.prose li{font-size:15.5px;line-height:1.85}
.prose h2{font-size:28px}
.prose h3{font-size:19px}
.prose-card{padding:28px 30px}
.blog-card h3{font-size:17.5px}
.blog-card p{font-size:13.5px;line-height:1.7}
.blog-card .read{height:40px;padding:0 17px;font-size:12.5px}
.back-link{font-size:13.5px}