/* ---------------------------------------------------------------------------
   Guides index. Ported from the original articles page so the generated
   listing looks identical to the hand-built one.

   Loaded ONLY by /articles/ - several class names (.hero, .card, .cta) also
   exist in site.css for the article pages, and these must not leak into them.
--------------------------------------------------------------------------- */

.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dk-accent);display:flex;align-items:center;gap:10px;margin-bottom:18px}

.eyebrow::before{content:"";width:24px;height:3px;background:var(--electric);border-radius:2px;flex:none}

.arw{line-height:1;transition:transform .18s ease}

.btn:hover .arw{transform:translateX(4px)}


/* hero */
.hero{background:var(--deep);color:var(--deep-ink);position:relative;overflow:hidden}

.hero h1{font-size:clamp(34px,4.6vw,58px);color:var(--dk-strong);font-stretch:104%;letter-spacing:-.03em}

.hero p{color:var(--deep-muted);font-size:17.5px;margin-top:18px;max-width:52ch}

.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid rgba(var(--dk-rgb),.16);border-radius:8px;overflow:hidden;background:rgba(var(--dk-rgb),.05)}

.hstat{padding:18px 16px;border-left:1px solid rgba(var(--dk-rgb),.14)}

.hstat:first-child{border-left:0}


/* toolbar */
.tools{position:sticky;top:76px;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}

.search{display:flex;align-items:center;gap:10px;flex:1;min-width:240px;border:1px solid var(--line-strong);border-radius:100px;padding:0 16px;background:var(--ground);transition:border-color .16s ease,box-shadow .16s ease}

.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--bright-soft)}

.search svg{flex:none;color:var(--muted)}

.search input{border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:15px;padding:12px 0;width:100%}

.search input:focus{outline:none}

.chips{display:flex;gap:7px;flex-wrap:wrap}

.chip{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--muted);cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}

.chip:hover{color:var(--ink);border-color:var(--line-strong)}

.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#FFF}

.chip b{font-weight:600;opacity:.6;margin-left:6px}

.chip[aria-pressed="true"] b{opacity:.75}

.count{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}


/* sections */
.sec{padding-block:56px}

.sec--paper{background:var(--surface);border-top:1px solid var(--line)}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}

.sec-head h2{font-size:clamp(22px,2.4vw,30px)}

.sec-head .eyebrow{margin-bottom:0}


/* ---------------------------------------------------------------------
   Thumbnails. Every AutoSEO article ships a 1344x768 featured image, but
   claude.ai blocks images loaded from kchomeoffers.com, so the slot renders
   a styled placeholder here. On WordPress, drop the real image inside:

     <span class="thumb">
       <?php the_post_thumbnail( 'medium_large', array(
             'alt'     => esc_attr( get_the_title() ),
             'loading' => 'lazy',
       ) ); ?>
       <span class="tag"><?php echo esc_html( $topic_label ); ?></span>
     </span>

   .thumb img is already styled to cover the slot at the right ratio.
--------------------------------------------------------------------- */
.thumb{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;flex:none;
  background:linear-gradient(135deg,#051D33 0%,#0B3D6B 55%,#0F5FA8 100%);
}

/* the photo sits above the placeholder grid + watermark below it */
.thumb img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}

.card:hover .thumb img,.pick:hover .thumb img{transform:scale(1.03)}

.thumb img{transition:transform .4s cubic-bezier(.2,.6,.3,1)}

.thumb::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(var(--dk-rgb),.085) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(0deg,rgba(var(--dk-rgb),.065) 0 1px,transparent 1px 42px);
}

.thumb::after{
  content:"";position:absolute;right:-10px;bottom:-14px;width:104px;height:104px;opacity:.17;
  background:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linejoin='round'%3e%3cpath d='M24 9 L38 20 L38 39 L10 39 L10 20 Z'/%3e%3cpath d='M19 39 L19 27 L29 27 L29 39'/%3e%3c/svg%3e") center/contain no-repeat;
}

.thumb .tag{
  position:absolute;left:12px;top:12px;z-index:1;
  background:rgba(4,18,31,.72);color:#9BD8FF;border:1px solid rgba(var(--dk-rgb),.2);
}


/* start-here row */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

.pick{display:flex;flex-direction:column;gap:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}

.pick::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--electric);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.3,0,.2,1)}

.pick:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-strong);text-decoration:none}

.pick:hover::after{transform:scaleX(1)}

.pick h3{font-size:19.5px;line-height:1.24}

.pick p{font-size:14px;color:var(--muted)}

.pick:hover .pick__more .arw{transform:translateX(4px)}


/* article list */
.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.card{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}

.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong);text-decoration:none}

.card.is-hidden{display:none}

.tag{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:5px 9px;border-radius:100px;background:var(--bright-soft);color:var(--bright)}

.card h3{font-size:16.5px;line-height:1.3}

.card p{font-size:13.5px;color:var(--muted)}

.empty{display:block;padding:60px 24px;text-align:center;border:1px dashed var(--line-strong);border-radius:8px;background:var(--surface)}

.empty h3{font-size:21px;margin-bottom:10px}

.empty p{color:var(--muted);font-size:14.5px}


/* cta + footer */
.cta{background:var(--deep);color:var(--deep-ink);position:relative;overflow:hidden;border-top:1px solid var(--dk-edge)}

.cta h2{font-size:clamp(26px,3.4vw,40px);color:var(--dk-strong)}

.cta p{color:var(--deep-muted);font-size:16.5px;margin-top:14px;max-width:48ch}

/* ---------------------------------------------------------------------------
   Rules that were missed in the first port. Without them the page still has
   colour and type but no box model: the hero stats fell full-width under the
   headline, the toolbar lost its padding and stacked, and the card bodies had
   no padding at all. Values are taken verbatim from the original page.
--------------------------------------------------------------------------- */

/* hero decoration + the two-column headline/stats split */
.hero__fx{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(45% 60% at 78% 30%,rgba(15,165,245,.30),transparent 70%),
  radial-gradient(40% 60% at 10% 90%,rgba(0,77,159,.42),transparent 70%)}

.hero__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(var(--dk-rgb),.06) 1px,transparent 1px);
  background-size:calc(100% / 8) 100%;
  -webkit-mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent 80%);
  mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent 80%)}

.hero__in{position:relative;padding-block:64px 60px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end}

.hstat__n{font-family:Archivo,Helvetica,Arial,sans-serif;font-stretch:114%;font-weight:800;font-size:28px;line-height:1;color:var(--dk-strong);font-variant-numeric:tabular-nums}

.hstat__l{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--deep-muted);margin-top:8px}

/* search + chips + count on one padded row */
.tools__in{display:flex;align-items:center;gap:16px;padding-block:16px;flex-wrap:wrap}

/* pick + card interiors */
.pick__body{display:flex;flex-direction:column;gap:12px;padding:24px 26px 26px;flex:1}

.pick__k{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bright)}

.pick__more{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:8px}

/* overrides site.css, which styles the same class for the article pages */
.card__body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}

.card__more{margin-top:auto;padding-top:4px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:7px}

/* closing call to action */
.cta__fx{position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 80% at 85% 25%,rgba(15,165,245,.3),transparent 70%)}

.cta__in{position:relative;padding-block:66px;display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:36px;align-items:center}

.cta__btns{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1020px){
  .hero__in{grid-template-columns:1fr;gap:34px;padding-block:52px 48px}
  .picks,.list{grid-template-columns:1fr 1fr}
  .cta__in{grid-template-columns:1fr;padding-block:52px}
  .tools{top:76px}
}
@media (max-width:680px){
  .topbar__tag{display:none}
  .picks,.list{grid-template-columns:1fr}
  .hstats{grid-template-columns:1fr}
  .hstat{border-left:0;border-top:1px solid rgba(var(--dk-rgb),.14)}
  .hstat:first-child{border-top:0}
  .tools__in{gap:12px}
  .count{width:100%}
  .sec{padding-block:44px}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.pick:hover,.card:hover{transform:none}
  .thumb img,.card:hover .thumb img,.pick:hover .thumb img{transform:none;transition:none}
}

/* ---------- pagination (new: six guides per page) ---------- */
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:16px;padding-block:14px 4px}
.pager[hidden]{display:none}
.pager button{
  min-width:38px;height:38px;padding:0 11px;border-radius:var(--radius);cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pager button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#FFFFFF}
.pager button:disabled{opacity:.4;cursor:default}
.pager__gap{color:var(--muted);padding-inline:2px}
@media (max-width:640px){
  .pager button{min-width:34px;height:34px;font-size:12px;padding:0 8px}
}