/* ══ ARCHIVE PAGE — Inar Guide ════════════════════════════
   Inherits: CSS vars from header.php
   Fonts:    Cabinet Grotesk (display), Satoshi (body)
════════════════════════════════════════════════════════ */

/* ── Suppress Blocksy content wrappers adding top gap ── */
.site-main,.site-content,#content,.ct-container,.entry-content,
.content-area,.hfeed,.ig-arch-page{
  margin-top:0 !important;
  padding-top:0 !important;
}
:root{
  --ig-bg:#faf9f7; --ig-surface:#fff; --ig-border:#e8e6e1;
  --ig-text:#18181b; --ig-muted:#52525b; --ig-faint:#71717a;
  --ig-accent:#c2410c; --ig-accent-hover:#9a3412;
  --ig-accent-bright:#ea580c; --ig-accent-dim:rgba(194,65,12,.09);
  --ig-accent-border:rgba(194,65,12,.28); --ig-accent-light:#fff7ed;
  --ig-dark:#0f1117;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;
  --s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;
  --t-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --t-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --t-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --t-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;
  --sh-sm:0 1px 3px rgba(0,0,0,.06);
  --sh-md:0 4px 14px rgba(0,0,0,.09);
  --tr:180ms cubic-bezier(.16,1,.3,1);
  --font-display:'Cabinet Grotesk','Arial Black',sans-serif;
  --font-body:'Satoshi','Helvetica Neue',sans-serif;
}

/* ── Base reset (page-level) ── */
.ig-arch-page{
  background:var(--ig-bg);
  font-family:var(--font-body);
  color:var(--ig-text);
  min-height:100dvh;
}
.ig-arch-wrap{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(var(--s4),3vw,var(--s10));
}
.ig-arch-wrap--narrow{
  max-width:820px;
  margin-inline:auto;
  padding-inline:clamp(var(--s4),3vw,var(--s10));
}

/* ── Hero / page header ── */
.ig-arch-hero{
  background:var(--ig-dark);
  padding:clamp(var(--s5),2vw,var(--s8)) 0 clamp(var(--s6),2.5vw,var(--s10));
  position:relative;
  overflow:hidden;
}
/* Subtle grid pattern */
.ig-arch-hero::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
/* Radial accent glow */
.ig-arch-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 80% at 90% 50%,rgba(194,65,12,.12),transparent 70%);
  pointer-events:none;
}
.ig-arch-hero-inner{
  position:relative;z-index:1;
  /* Grid: text block on left, search pinned to right centre */
  display:grid;
  grid-template-columns:1fr 300px;
  align-items:center;
  column-gap:clamp(var(--s6),4vw,var(--s8));
}

/* Brand logo bubble — sits inline with the title row */
.ig-arch-brand-icon{
  width:clamp(48px,6vw,72px);
  height:clamp(48px,6vw,72px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  backdrop-filter:blur(4px);
}
.ig-arch-brand-icon img{
  width:clamp(26px,3.5vw,40px);
  height:clamp(26px,3.5vw,40px);
  object-fit:contain;
  filter:brightness(0) invert(1);
}

/* Text block: always in column 1 */
.ig-arch-hero-text{
  grid-column:1;
  grid-row:1;
  min-width:0;
  width:100%;
}
/* Title: prevent letter-per-line on mobile */
.ig-arch-hero-text *{
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Icon + breadcrumb on same row */
.ig-arch-hero-top-row{
  display:flex;
  align-items:center;
  gap:var(--s3);
  margin-bottom:var(--s3);
  flex-wrap:wrap;
}

/* Breadcrumb */
.ig-arch-breadcrumb{
  display:flex;align-items:center;gap:.4rem;
  font-size:var(--t-xs);
  color:rgba(220,222,230,.85);
  margin-bottom:0;
  flex-wrap:wrap;
}
.ig-arch-breadcrumb a{
  color:rgba(230,232,238,.9);
  text-decoration:none;
  font-weight:500;
}
.ig-arch-breadcrumb a:hover{color:var(--ig-accent-bright)}
/* Separator slash */
.ig-arch-breadcrumb span[aria-hidden]{color:rgba(255,255,255,.4)}
/* Current page — full brightness */
.ig-arch-breadcrumb span:not([aria-hidden]){color:#e8eaf0;font-weight:500}

.ig-arch-title{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,1.2rem + 2.5vw,3rem);
  font-weight:900;
  color:#f4f3f1;
  letter-spacing:-.03em;
  line-height:1.05;
  margin-bottom:var(--s3);
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}
.ig-arch-title strong{color:var(--ig-accent-bright)}

.ig-arch-sub{
  font-size:var(--t-sm);
  color:#c4c6d0;
  max-width:58ch;
  line-height:1.7;
  margin-bottom:var(--s5);
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Stats row */
.ig-arch-stats{
  display:flex;
  gap:var(--s5);
  flex-wrap:wrap;
}
.ig-arch-stat{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--t-xs);
  color:rgba(196,198,208,.8);
}
.ig-arch-stat strong{
  font-weight:700;
  color:#f4f3f1;
  margin-right:2px;
}

/* Search within archive — naturally occupies grid column 2 */
.ig-arch-search{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-full);
  height:44px;
  width:100%; /* fills the 300px grid column */
  overflow:hidden;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.ig-arch-search:focus-within{
  border-color:var(--ig-accent-bright);
  box-shadow:0 0 0 3px rgba(234,88,12,.18);
}
.ig-arch-search input{
  flex:1;background:none;border:none;outline:none;
  padding:0 var(--s4);
  font-family:var(--font-body);font-size:var(--t-sm);
  color:#f4f3f1 !important;
  -webkit-text-fill-color:#f4f3f1 !important;
  caret-color:var(--ig-accent-bright);
  min-width:0;
}
.ig-arch-search input::placeholder{color:rgba(255,255,255,.35) !important;opacity:1}
.ig-arch-search button{
  flex-shrink:0;width:38px;height:40px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(196,198,208,.7);background:none;border:none;cursor:pointer;
}
.ig-arch-search button:hover{color:#f4f3f1}

/* ── Siblings strip (more brands) ── */
.ig-arch-siblings{
  background:var(--ig-surface);
  border-bottom:1px solid var(--ig-border);
  padding:var(--s2) 0; /* tighter — only 8px top+bottom */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ig-arch-siblings::-webkit-scrollbar{display:none}
.ig-arch-siblings-inner{
  display:flex;
  align-items:center;
  gap:var(--s2);
  white-space:nowrap;
}
.ig-arch-sib-label{
  font-size:var(--t-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ig-faint);
  flex-shrink:0;
  padding-right:var(--s2);
}
.ig-arch-sib{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .85rem;
  background:var(--ig-bg);
  border:1px solid var(--ig-border);
  border-radius:var(--r-full);
  color:var(--ig-muted);
  font-size:.82rem;font-weight:500;
  text-decoration:none;
  flex-shrink:0;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.ig-arch-sib:hover{
  background:var(--ig-accent-light);
  border-color:var(--ig-accent-border);
  color:var(--ig-accent);
}
.ig-arch-sib img{
  width:14px;height:14px;object-fit:contain;
  display:block;flex-shrink:0;
}

/* ── Main content area ── */
.ig-arch-body{
  padding-block:clamp(var(--s8),4vw,var(--s12));
}
.ig-arch-layout{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:var(--s8);
  align-items:start;
}

/* ── Post list ── */
.ig-fw-list{
  display:flex;flex-direction:column;
  border:1px solid var(--ig-border);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-sm);
  background:var(--ig-surface);
}
.ig-fw-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s4);
  padding:var(--s3) var(--s5);
  background:var(--ig-surface);
  border-bottom:1px solid var(--ig-border);
  text-decoration:none;
  transition:background var(--tr);
}
.ig-fw-row:last-child{border-bottom:none}
.ig-fw-row:hover{background:var(--ig-accent-light)}
.ig-fw-row:hover .ig-fw-dl{background:var(--ig-accent);color:#fff;border-color:transparent}
.ig-fw-icon{
  width:40px;height:40px;
  border-radius:var(--r-md);
  background:var(--ig-bg);
  border:1px solid var(--ig-border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ig-fw-icon img{width:22px;height:22px;object-fit:contain}
.ig-fw-title-text{
  font-family:var(--font-display);
  font-size:var(--t-sm);font-weight:700;
  color:var(--ig-text);
  margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:54ch;
}
.ig-fw-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.ig-fw-tag{font-size:var(--t-xs);color:var(--ig-faint)}
.ig-fw-tag+.ig-fw-tag::before{content:'·';padding:0 var(--s2);color:var(--ig-faint)}
.ig-fw-dl{
  flex-shrink:0;
  height:32px;padding:0 var(--s3);
  border-radius:var(--r-full);
  border:1px solid var(--ig-accent-border);
  background:var(--ig-accent-dim);
  color:var(--ig-accent);
  font-size:var(--t-xs);font-weight:700;
  display:flex;align-items:center;gap:var(--s2);
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}

/* Empty state */
.ig-arch-empty{
  padding:clamp(var(--s10),6vw,var(--s12)) var(--s8);
  text-align:center;
  background:var(--ig-surface);
  border:1px solid var(--ig-border);
  border-radius:var(--r-xl);
}
.ig-arch-empty svg{margin:0 auto var(--s4);color:var(--ig-faint);opacity:.5}
.ig-arch-empty h3{font-family:var(--font-display);font-size:var(--t-lg);font-weight:800;margin-bottom:var(--s2)}
.ig-arch-empty p{color:var(--ig-muted);font-size:var(--t-sm);max-width:36ch;margin:0 auto var(--s6)}

/* Load more */
.ig-load-more-wrap{text-align:center;margin-top:var(--s6)}
.ig-load-more{
  height:44px;padding:0 var(--s8);
  border-radius:var(--r-full);
  border:1px solid var(--ig-border);
  background:var(--ig-surface);
  color:var(--ig-muted);
  font-family:var(--font-body);font-size:var(--t-sm);font-weight:600;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--s2);
  box-shadow:var(--sh-sm);
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.ig-load-more:hover{border-color:var(--ig-accent-border);color:var(--ig-accent);background:var(--ig-accent-light)}
.ig-load-more:disabled{opacity:.5;cursor:not-allowed}

/* Pagination */
.ig-arch-pagination{
  display:flex;justify-content:center;gap:var(--s2);
  margin-top:var(--s8);
  flex-wrap:wrap;
}
.ig-arch-pagination a,
.ig-arch-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 var(--s3);
  border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:600;
  text-decoration:none;
  border:1px solid var(--ig-border);
  background:var(--ig-surface);
  color:var(--ig-muted);
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.ig-arch-pagination a:hover{background:var(--ig-accent-light);border-color:var(--ig-accent-border);color:var(--ig-accent)}
.ig-arch-pagination span.current{background:var(--ig-accent);color:#fff;border-color:var(--ig-accent)}

/* ── Sidebar ── */
.ig-arch-sidebar{
  display:flex;flex-direction:column;gap:var(--s4);
  position:sticky;top:80px;
}
.ig-arch-card{
  background:var(--ig-surface);
  border:1px solid var(--ig-border);
  border-radius:var(--r-xl);
  padding:var(--s5);
  box-shadow:var(--sh-sm);
}
.ig-arch-card-title{
  font-family:var(--font-display);
  font-size:var(--t-sm);font-weight:800;
  color:var(--ig-text);
  margin-bottom:var(--s4);
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--ig-border);
}
/* Brand list in sidebar */
.ig-arch-brand-list{
  display:flex;flex-direction:column;gap:var(--s2);
}
.ig-arch-brand-link{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);
  border-radius:var(--r-md);
  text-decoration:none;
  transition:background var(--tr),color var(--tr);
}
.ig-arch-brand-link:hover{background:var(--ig-accent-light)}
.ig-arch-brand-link img{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.ig-arch-brand-link-name{flex:1;font-size:var(--t-sm);font-weight:500;color:var(--ig-text)}
.ig-arch-brand-link-count{
  font-size:var(--t-xs);font-weight:700;
  color:var(--ig-accent);
  background:var(--ig-accent-dim);
  border-radius:var(--r-full);
  padding:1px 7px;
}
.ig-arch-brand-link.current{background:var(--ig-accent-light)}
.ig-arch-brand-link.current .ig-arch-brand-link-name{color:var(--ig-accent);font-weight:700}

/* Sidebar CTA card removed — Flash Guides available in header nav + footer */

/* ── Responsive ── */
@media(max-width:900px){
  .ig-arch-layout{grid-template-columns:1fr}
  .ig-arch-sidebar{position:static;display:none}
  /* Collapse hero to single column on tablet/mobile */
  .ig-arch-hero-inner{
    grid-template-columns:1fr;
  }
  .ig-arch-search{
    width:100%;
    max-width:480px;
    height:44px;
  }
}
@media(max-width:600px){
  .ig-fw-row{grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s3) var(--s4)}
  .ig-fw-dl{display:none}
  .ig-fw-title-text{max-width:28ch}
  .ig-arch-title{
    letter-spacing:-.02em;
    font-size:clamp(1.5rem,5vw,2rem); /* tighter on small screens */
  }
  /* Brand icon smaller on mobile */
  .ig-arch-brand-icon{width:44px;height:44px}
  .ig-arch-brand-icon img{width:24px;height:24px}
  /* Hero icon sits inline with breadcrumb row on mobile */
  .ig-arch-hero-inner{row-gap:var(--s4)}
}