/* ==========================================================================
   TOEIC.ai blog — layout ported from the OneIELTS blog + article template,
   recoloured onto the TOEIC.ai v4 token set in styles.css.

   Structure mirrored from oneielts.com/blog and oneielts.com/ielts:
     - listing: centred hero, white rounded panel, pill category filter,
       3-up card grid with media block, title, excerpt, date + category.
     - article: 3-column grid — sticky TOC + share rail, centre prose,
       right sidebar with the CTA card and the tools list. Back-to-top FAB.

   Accent is TOEIC.ai indigo (--claret), not the OneIELTS pink.
   Loaded after styles.css so the tokens below already exist.
   ========================================================================== */

:root{
  --blog-line:#e9e9f2;
  --blog-panel-radius:18px;
  --blog-card-radius:12px;
  --rail-l:222px;
  --rail-r:264px;
}

/* ---------- shared shell ------------------------------------------------ */

.blog-wrap{max-width:1200px;margin:0 auto;padding:0 22px}

/* ==========================================================================
   1. LISTING  (/blog)
   ========================================================================== */

.blog-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:64px 0 84px;
  background:
    radial-gradient(680px 300px at 12% 0%, #efeefe 0%, rgba(239,238,254,0) 70%),
    radial-gradient(680px 300px at 88% 6%, #e9f0ff 0%, rgba(233,240,255,0) 70%),
    var(--bone);
}
.blog-hero h1{
  font-size:clamp(2rem,4.4vw,3rem);line-height:1.16;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin:0 auto 14px;max-width:16ch;
}
.blog-hero p{
  font-size:1.0625rem;line-height:1.55;color:var(--body);
  max-width:52ch;margin:0 auto;
}
.blog-hero .count{
  display:inline-block;margin-top:22px;font-size:.8125rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}

.blog-panel{
  position:relative;z-index:2;margin:-48px auto 72px;
  background:var(--paper);border:1px solid var(--blog-line);
  border-radius:var(--blog-panel-radius);
  padding:30px 30px 40px;
  box-shadow:0 12px 40px rgba(20,21,57,.06);
}

.cat-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.cat-pill{
  appearance:none;border:1px solid transparent;cursor:pointer;
  font:inherit;font-size:.9375rem;font-weight:500;
  padding:9px 20px;border-radius:9999px;
  background:#f2f2f8;color:var(--ink2);
  transition:background .15s ease,color .15s ease;
}
.cat-pill:hover{background:#e8e8f4}
.cat-pill[aria-pressed="true"]{background:var(--claret);color:#fff}
.cat-pill:focus-visible{outline:2px solid var(--claret);outline-offset:2px}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}

.post-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--paper);border:1px solid var(--blog-line);
  border-radius:var(--blog-card-radius);padding:20px;
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.post-card:hover{border-color:var(--claret-edge);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(20,21,57,.07)}
.post-card:focus-visible{outline:2px solid var(--claret);outline-offset:3px}

.card-media{
  position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(135deg,var(--claret-soft) 0%,#e9f0ff 55%,#f2ecff 100%);
}
.card-media::after{
  content:"";position:absolute;inset:auto -30px -60px auto;width:150px;height:150px;
  border-radius:50%;background:rgba(75,63,212,.07);
}
.card-media span{
  position:relative;z-index:1;font-weight:700;font-size:1.0625rem;line-height:1.28;
  color:var(--ink);letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-media.s-sections{background:linear-gradient(135deg,#e9f0ff 0%,#eef4ff 60%,#f7f9ff 100%)}
.card-media.s-scores{background:linear-gradient(135deg,#f2ecff 0%,#f6f1ff 60%,#fbf9ff 100%)}
.card-media.s-prep{background:linear-gradient(135deg,#fdf1e0 0%,#fdf6ec 60%,#fffcf7 100%)}
.card-media.s-vs{background:linear-gradient(135deg,#e6f6f0 0%,#eefaf5 60%,#f8fdfb 100%)}

.post-card h2{font-size:1.125rem;line-height:1.55;font-weight:600;color:var(--ink);margin:0}
.post-card p{font-size:.9375rem;line-height:1.5;color:var(--body);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:4px}
.card-date{font-size:.8125rem;color:var(--faint)}
.card-cat{font-size:.75rem;font-weight:600;padding:5px 11px;border-radius:9999px;
  background:var(--claret-soft);color:var(--claret-hi);white-space:nowrap}
.no-results{padding:40px 4px;color:var(--muted);font-size:1rem}

/* ==========================================================================
   2. ARTICLE  (/<slug>)
   ========================================================================== */

.article-shell{background:var(--paper);padding:26px 0 72px}
.article-grid{
  display:grid;grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
  gap:30px;align-items:start;
}

/* --- left rail --- */
.rail-l{position:sticky;top:88px}
.toc{border:1px solid var(--blog-line);border-radius:var(--blog-card-radius);
  background:var(--paper);overflow:hidden}
.toc > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:14px 16px;font-weight:700;font-size:.9375rem;color:var(--claret);
}
.toc > summary::-webkit-details-marker{display:none}
.toc > summary::after{content:"›";margin-left:auto;font-size:1.25rem;line-height:1;
  transform:rotate(0deg);transition:transform .18s ease;color:var(--muted)}
.toc[open] > summary::after{transform:rotate(90deg)}
.toc ol{list-style:none;margin:0;padding:0 16px 16px;border-top:1px solid var(--blog-line);
  padding-top:12px;max-height:52vh;overflow-y:auto}
.toc li{margin:0 0 9px}
.toc li.lvl3{padding-left:14px}
.toc a{font-size:.8125rem;line-height:1.42;color:var(--body);text-decoration:none;display:block}
.toc a:hover{color:var(--claret);text-decoration:underline}

.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.share a{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;
  color:#fff;font-size:.8125rem;font-weight:700;text-decoration:none;letter-spacing:-.02em}
.share a:hover{opacity:.88}
.sh-fb{background:#1877f2}.sh-x{background:#141539}.sh-wa{background:#25d366}
.sh-in{background:#0a66c2}.sh-rd{background:#ff4500}

/* --- centre column --- */
.article-main{min-width:0}
.crumbs{font-size:.8125rem;color:var(--muted);margin:0 0 18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--claret);text-decoration:underline}
.crumbs .sep{margin:0 7px;color:var(--blog-line)}

.article-main h1{
  font-size:clamp(1.85rem,3.3vw,2.4rem);line-height:1.18;font-weight:700;
  letter-spacing:-.022em;color:var(--ink);margin:0 0 14px;
}

.hero-figure{
  position:relative;overflow:hidden;border-radius:var(--blog-card-radius);
  aspect-ratio:16/8.2;display:flex;align-items:center;padding:34px;margin:20px 0 18px;
  background:linear-gradient(135deg,var(--claret-soft) 0%,#e9f0ff 58%,#f5f3ff 100%);
}
.hero-figure::after{
  content:"";position:absolute;right:-70px;bottom:-110px;width:290px;height:290px;
  border-radius:50%;background:rgba(75,63,212,.06);
}
.hero-figure span{position:relative;z-index:1;font-size:clamp(1.15rem,2.2vw,1.6rem);
  font-weight:800;line-height:1.24;letter-spacing:-.02em;color:var(--ink);max-width:22ch}
.hero-figure .mark{position:absolute;right:22px;bottom:18px;z-index:1;
  font-size:.875rem;font-weight:700;color:var(--claret)}

.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.875rem;color:var(--muted);margin:0 0 24px}
.byline .avatar{width:28px;height:28px;border-radius:50%;background:var(--claret-soft);
  display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--claret)}
.byline b{color:var(--ink2);font-weight:600}
.byline .bar{color:var(--blog-line)}

.overview{background:var(--claret-soft);border-radius:var(--blog-card-radius);
  padding:18px 20px;margin:0 0 26px}
.overview h2{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 6px}
.overview p{font-style:italic;font-size:.9375rem;line-height:1.6;color:var(--ink2);margin:0}

.prose{font-size:1.0625rem;line-height:1.68;color:var(--body)}
.prose > p{margin:0 0 18px}
.prose h2{font-size:1.5rem;line-height:1.3;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;margin:36px 0 14px;scroll-margin-top:96px}
.prose h3{font-size:1.1875rem;line-height:1.35;font-weight:700;color:var(--ink2);
  margin:28px 0 12px;scroll-margin-top:96px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--claret);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--claret-hi)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 9px}
.prose ul li::marker{color:var(--claret)}
.prose ol li::marker{color:var(--claret);font-weight:700}
.prose .verified{font-size:.875rem;color:var(--muted);margin:0 0 22px}

.table-scroll{overflow-x:auto;margin:0 0 22px;border:1px solid var(--blog-line);
  border-radius:var(--blog-card-radius)}
.prose table{border-collapse:collapse;width:100%;font-size:.9375rem}
.prose thead th{background:var(--bone);text-align:left;font-weight:700;color:var(--ink);
  padding:12px 14px;border-bottom:1px solid var(--blog-line);white-space:nowrap}
.prose tbody td{padding:12px 14px;border-bottom:1px solid var(--blog-line);
  color:var(--body);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody tr:nth-child(even){background:#fafafd}

/* --- right sidebar --- */
.rail-r{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
.cta-card{background:var(--claret-soft);border-radius:var(--blog-card-radius);padding:20px}
.cta-card h2{font-size:1.125rem;line-height:1.35;font-weight:700;color:var(--ink);margin:0 0 14px}
.cta-card ul{list-style:none;margin:0 0 16px;padding:0}
.cta-card li{display:flex;gap:9px;font-size:.875rem;line-height:1.45;color:var(--ink2);margin:0 0 10px}
.cta-card li::before{content:"✓";flex:none;width:18px;height:18px;border-radius:50%;
  background:#12a56a;color:#fff;font-size:.6875rem;font-weight:700;display:grid;place-items:center;
  margin-top:1px}
.cta-card .btn{width:100%;justify-content:center}

.tools-card{border:1px solid var(--blog-line);border-radius:var(--blog-card-radius);padding:18px 20px}
.tools-card h2{font-size:1.0625rem;font-weight:700;color:var(--ink);margin:0 0 6px}
.tools-card a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--blog-line);
  font-size:.9375rem;font-weight:600;color:var(--claret);text-decoration:underline;
  text-underline-offset:2px}
.tools-card a:last-child{border-bottom:0}
.tools-card a::after{content:"›";font-size:1.1rem;color:var(--muted);text-decoration:none}

.next-read{margin-top:44px;border-top:1px solid var(--blog-line);padding-top:26px}
.next-read h2{font-size:1.25rem;font-weight:700;color:var(--ink);margin:0 0 16px}
.next-read .card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.next-read .post-card{padding:16px;gap:10px}
.next-read .post-card h2{font-size:1rem;line-height:1.45}

.to-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;
  background:var(--claret);color:#fff;display:grid;place-items:center;font-size:1.25rem;
  text-decoration:none;box-shadow:0 8px 22px rgba(75,63,212,.34);opacity:0;
  pointer-events:none;transition:opacity .2s ease}
.to-top.on{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--claret-hi)}

/* ---------- responsive -------------------------------------------------- */

@media (max-width:1080px){
  .article-grid{grid-template-columns:var(--rail-l) minmax(0,1fr)}
  .rail-r{position:static;grid-column:1 / -1;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
}
@media (max-width:820px){
  .article-grid{grid-template-columns:1fr;gap:22px}
  .rail-l{position:static}
  .toc ol{max-height:none}
  .blog-panel{padding:22px 18px 30px;margin:-36px auto 52px}
  .blog-hero{padding:48px 0 68px}
  .card-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .post-card,.to-top,.toc > summary::after{transition:none}
  .post-card:hover{transform:none}
}

/* --- visible FAQ inside an article --------------------------------------
   The hand-built pages carried FAQPage schema for Q&As that appeared nowhere
   on the page. Rich results require the answer to be visible, so the same
   Q&As now render here, using the accordion already defined in styles.css.
   The TOC's .toc details rules must not leak in, hence the scoping. */
.article-main .faq-block{margin:34px 0 0;border-top:1px solid var(--ink)}
.article-main .faq-block h2{border:0;margin:0 0 4px;padding-top:22px}
.article-main .faq-block details{border-bottom:1px solid var(--rule);padding:0}
.article-main .faq-block summary{padding:18px 0;font-size:16px}
.article-main .faq-block details p{margin:0 0 20px;max-width:66ch}

/* --- hero card as a real image file --------------------------------------
   Was a CSS gradient box with the title repeated inside it as a <span>, which
   put the H1 string in the DOM twice. Now /assets/blog/<slug>.svg, so it takes
   an alt attribute and a URL. Dimensions are fixed to stop layout shift. */
.hero-figure-img{margin:20px 0 18px;border-radius:var(--blog-card-radius);overflow:hidden}
.hero-figure-img img{display:block;width:100%;height:auto;aspect-ratio:16/8.2;object-fit:cover}

/* --- article page: breathing room for the left rail -----------------------
   The rails sat 30px from the prose inside a 1200px container, so on a wide
   screen there was ~200px of dead space on each side while the TOC crowded the
   text. On wide viewports the article grid gets wider than the listing, the gap
   opens up, and the left rail moves outward with it. The reading measure is
   capped so the prose does not stretch with the container.
   Scoped to .article-shell: /blog keeps its 1200px listing width. */
@media (min-width:1340px){
  .article-shell .article-grid{
    max-width:1340px;gap:46px;
    grid-template-columns:244px minmax(0,1fr) var(--rail-r);
  }
  .article-shell .article-main{max-width:760px}
}
@media (min-width:1560px){
  .article-shell .article-grid{max-width:1460px;gap:56px}
}
.toc a{font-size:.84375rem}          /* 13.5px: fewer wrapped lines in the rail */
.toc ol{padding:0 15px 15px}