/* ═════════════════════════════════════════════════════════════════════
   SKS TARTAN GUIDE — regional/heritage tartan-guide pages
   Used by Highland / Lowland / Border / Island / Argyll / American /
   Canadian / Irish County / Welsh tartans templates.

   Body content for each page is pasted into Shopify's page editor
   (HTML view) — content files live at /tartan-guide-content/{slug}.html.
   This stylesheet is the only place classes are defined. Class names
   match the prototype's `.ssk-cb-*` so pasted markup just works.
   All rules scoped under .sks-tartan-guide.
   ═════════════════════════════════════════════════════════════════════ */

.sks-tartan-guide {
  --tg-ivory:    #F5F0E8;
  --tg-cream-l:  #FEF3EC;
  --tg-white:    #FFFFFF;
  --tg-onyx:     #1A1A1A;
  --tg-body:     #4A4440;
  --tg-muted:    #615E59;
  --tg-amber:    #A8380A;
  --tg-amber-h:  #B8520A;
  --tg-amber-d:  #783A0A;
  --tg-slate-d:  #1E2D3B;
  --tg-rule:     rgba(74,68,64,.12);
  --tg-rule-soft:rgba(74,68,64,.1);

  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--tg-body);
  line-height: 1.6;
  padding-top: 60px;
}

/* Clan cards that resolve to a real tartan collection (added by JS via [data-clan])
   get cursor + a smoother hover. Cards without a resolved URL stay non-interactive. */
.sks-tartan-guide a.ssk-cb-clan {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: none;
}
.sks-tartan-guide a.ssk-cb-clan:hover {
  text-decoration: none;
  color: inherit;
}

.sks-tartan-guide .ssk-cb {
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 0 24px;
}

.sks-tartan-guide .ssk-cb * { box-sizing: border-box; }

.sks-tartan-guide .ssk-cb h2,
.sks-tartan-guide .ssk-cb h3,
.sks-tartan-guide .ssk-cb h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--tg-onyx);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.sks-tartan-guide .ssk-cb h2 { font-size: 34px; }
.sks-tartan-guide .ssk-cb h3 { font-size: 24px; margin-top: 36px; }
.sks-tartan-guide .ssk-cb h4 { font-size: 18px; margin: 0 0 6px; }

.sks-tartan-guide .ssk-cb p { margin: 0 0 14px; font-size: 15.5px; }
.sks-tartan-guide .ssk-cb a {
  color: var(--tg-amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(168,56,10,.3);
  transition: .2s;
}
.sks-tartan-guide .ssk-cb a:hover {
  color: var(--tg-amber-h);
  border-bottom-color: var(--tg-amber-h);
}

/* ─── HERO ─── */
.sks-tartan-guide .ssk-cb-hero {
  background: var(--tg-ivory);
  border-radius: 10px;
  padding: 36px 40px;
  margin-bottom: 28px;
  border: 1px solid var(--tg-rule-soft);
}
.sks-tartan-guide .ssk-cb-eyebrow {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tg-amber);
  font-weight: 600;
  margin: 0 0 12px;
}
.sks-tartan-guide .ssk-cb-hero h2 { font-size: 36px; margin-bottom: 14px; }
.sks-tartan-guide .ssk-cb-hero h2 em {
  font-style: italic;
  color: var(--tg-amber);
  font-weight: 500;
}
.sks-tartan-guide .ssk-cb-intro {
  font-size: 16.5px;
  color: var(--tg-body);
  line-height: 1.65;
  max-width: 780px;
  margin: 0;
}

/* ─── FACTS GRID (4 stat tiles) ─── */
.sks-tartan-guide .ssk-cb-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.sks-tartan-guide .ssk-cb-fact {
  background: var(--tg-white);
  border: 1px solid var(--tg-rule);
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
}
.sks-tartan-guide .ssk-cb-fact-n {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--tg-onyx);
  display: block;
  line-height: 1.1;
  margin-bottom: 4px;
}
.sks-tartan-guide .ssk-cb-fact-l {
  font-size: 12px;
  color: var(--tg-muted);
  letter-spacing: .04em;
  line-height: 1.35;
  display: block;
}

/* ─── CLANS GRID (2-column clan cards) ─── */
.sks-tartan-guide .ssk-cb-clans { margin-top: 28px; }
.sks-tartan-guide .ssk-cb-clan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.sks-tartan-guide .ssk-cb-clan {
  background: var(--tg-white);
  border: 1px solid var(--tg-rule);
  border-radius: 8px;
  padding: 20px 22px;
  transition: .2s;
}
.sks-tartan-guide .ssk-cb-clan:hover {
  border-color: var(--tg-amber);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.sks-tartan-guide .ssk-cb-clan h4 { margin: 0 0 4px; color: var(--tg-onyx); }
.sks-tartan-guide .ssk-cb-clan-meta {
  font-size: 11.5px;
  color: var(--tg-amber);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.sks-tartan-guide .ssk-cb-clan p {
  margin: 0;
  font-size: 14px;
  color: var(--tg-body);
  line-height: 1.55;
}

/* ─── BUYER GUIDE (amber-rail panel with bullets) ─── */
.sks-tartan-guide .ssk-cb-buyer {
  background: var(--tg-cream-l);
  border-left: 3px solid var(--tg-amber);
  border-radius: 6px;
  padding: 24px 28px;
  margin-top: 28px;
}
.sks-tartan-guide .ssk-cb-buyer h3 {
  margin-top: 0;
  font-size: 21px;
  color: var(--tg-amber-d);
}
.sks-tartan-guide .ssk-cb-buyer ul {
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
}
.sks-tartan-guide .ssk-cb-buyer li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(168,56,10,.15);
  font-size: 14.5px;
  line-height: 1.5;
}
.sks-tartan-guide .ssk-cb-buyer li:last-child { border-bottom: none; }
.sks-tartan-guide .ssk-cb-buyer li strong {
  color: var(--tg-onyx);
  font-weight: 600;
}

/* ─── DARK CTA PANEL ─── */
.sks-tartan-guide .ssk-cb-cta {
  background: var(--tg-slate-d);
  color: var(--tg-ivory);
  border-radius: 10px;
  padding: 32px 36px;
  margin-top: 32px;
  text-align: center;
}
.sks-tartan-guide .ssk-cb-cta h3 { color: #fff; margin-top: 0; }
.sks-tartan-guide .ssk-cb-cta p { color: #C4B8A4; margin-bottom: 20px; }
.sks-tartan-guide .ssk-cb-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.sks-tartan-guide .ssk-cb-cta-row a {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: .2s;
}
.sks-tartan-guide .ssk-cb-cta-row a:hover {
  background: var(--tg-amber);
  border-color: var(--tg-amber);
  color: #fff;
}
.sks-tartan-guide .ssk-cb-cta-row a.ssk-cb-primary {
  background: var(--tg-amber);
  border-color: var(--tg-amber);
}
.sks-tartan-guide .ssk-cb-cta-row a.ssk-cb-primary:hover {
  background: var(--tg-amber-h);
  border-color: var(--tg-amber-h);
}

/* ─── HONEST DISCLAIMER (dashed rules above + below) ─── */
.sks-tartan-guide .ssk-cb-honest {
  font-size: 13.5px;
  color: var(--tg-muted);
  font-style: italic;
  padding: 14px 0;
  border-top: 1px dashed rgba(74,68,64,.2);
  border-bottom: 1px dashed rgba(74,68,64,.2);
  margin: 24px 0;
}

/* ─── MOBILE ─── */
@media (max-width: 768px) {
  .sks-tartan-guide .ssk-cb { padding: 0 16px; }
  .sks-tartan-guide .ssk-cb-hero { padding: 24px 22px; }
  .sks-tartan-guide .ssk-cb-hero h2 { font-size: 26px; }
  .sks-tartan-guide .ssk-cb h3 { font-size: 21px; }
  .sks-tartan-guide .ssk-cb-facts { grid-template-columns: repeat(2, 1fr); }
  .sks-tartan-guide .ssk-cb-clan-grid { grid-template-columns: 1fr; }
  .sks-tartan-guide .ssk-cb-cta { padding: 24px 20px; }
  .sks-tartan-guide .ssk-cb-buyer { padding: 18px 20px; }
}