/* SKS blog landing — ported from the Scottish_Kilt_Blog_standalone prototype (Blog landing view).
   Layout is inline on the elements; this file carries the hover states, line clamps and the
   responsive rules. Markup: templates/pages/blog.html; logic: assets/sks/js/sks-blog-landing.js
   (renders featured tiles, the paged grid and search/filter from content/sks/blog-index-*.json). */

/* Neutralise Cornerstone's .body > .container wrapper, same as sks-blog-article.css. */
.body > .container:has(.sks-blog-landing) { padding-left: 0; padding-right: 0; max-width: none; }
.body:has(.sks-blog-landing) { margin-top: 0 !important; padding-top: 0 !important; }

.sks-blog-landing { container: skbl / inline-size; background: #fff; font-family: Jost, sans-serif; color: #1A1A1A; -webkit-font-smoothing: antialiased; }
/* hidden must beat inline display:grid/flex — without this the empty-state box
   (hidden + style="display:grid") rendered under the grid on every load */
.sks-blog-landing [hidden] { display: none !important; }
.sks-blog-landing *, .sks-blog-landing *::before, .sks-blog-landing *::after { box-sizing: border-box; min-width: 0; }
.sks-blog-landing a { color: #B8520A; text-decoration: none; }
.sks-blog-landing a:hover { color: #8F3F07; }
.sks-blog-landing :focus-visible { outline: 2px solid #B8520A; outline-offset: 2px; }
/* the search field + term select already sit in bordered boxes — no focus ring on top */
.sks-blog-landing .skb-filter input:focus, .sks-blog-landing .skb-filter input:focus-visible,
.sks-blog-landing .skb-filter select:focus, .sks-blog-landing .skb-filter select:focus-visible { outline: none !important; box-shadow: none !important; }
.sks-blog-landing button { font-family: inherit; cursor: pointer; }
.sks-blog-landing img { display: block; }
.sks-blog-landing h1, .sks-blog-landing h2, .sks-blog-landing h3, .sks-blog-landing h4 { font-family: inherit; color: inherit; text-transform: none; }
.sks-blog-landing p, .sks-blog-landing li { font-family: inherit; font-size: inherit; line-height: inherit; }

/* interaction states (prototype .skb-*) */
.skb-tl { transition: color .15s; }
.skb-tl:hover { color: #B8520A !important; }
.skb-imgl img { transition: transform .4s; }
.skb-imgl:hover img { transform: scale(1.03); }
.skb-soc { transition: background .15s; }
.skb-soc:hover { background: #F5F0E8 !important; }
.skb-soc span { transition: transform .15s; }
.skb-soc:hover span { transform: translateY(-1px); }
.skb-btn-p:hover { background: #9A4408 !important; color: #fff !important; }
.skb-btn-w:hover { background: #F5F0E8 !important; color: #1A1A1A !important; }
.skb-btn-o:hover { border-color: #fff !important; }
.skb-ghost:not([disabled]):hover { border-color: #B8520A !important; color: #B8520A !important; }
.skb-pgnum:hover { border-color: #B8520A !important; }
.skb-vbox { transition: transform .18s, box-shadow .18s; }
.skb-vbox:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.35) !important; color: #1A1A1A; }
.skb-readl { text-decoration: underline; text-underline-offset: 4px; }
.skb-readl:hover { color: #B8520A !important; }

/* excerpt line clamps */
.skb-lc2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.skb-lc3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* ---- responsive ---- */
@container skbl (max-width: 1100px) {
  .skb-vbox { display: none !important; }
  .skb-herobox { padding-right: 48px !important; }
}
@container skbl (max-width: 1023px) {
  .skb-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .skb-h1 { font-size: 38px !important; }
  .skb-h2 { font-size: 26px !important; }
  .skb-filter { flex-wrap: wrap; }
  .skb-filter-lbl { width: 100%; }
  /* mobile rows: search input full width, then term select stretching beside the Search button */
  .skb-f-q { flex: 1 1 100% !important; }
  .skb-f-term { flex: 1 1 auto !important; min-width: 0; }
  .skb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 24px !important; }
  .skb-featrow { display: flex !important; flex-direction: column !important; }
  .skb-fcard { margin: -56px 16px 0 !important; padding: 24px !important; }
  .skb-bridge { flex-direction: column; align-items: flex-start !important; }
}
@container skbl (max-width: 760px) {
  .skb-feat { grid-template-columns: 1fr !important; }
}
@container skbl (max-width: 639px) {
  .skb-hero { height: 340px !important; }
  .skb-feat .skb-imgl { height: 250px !important; }
  /* date · read-time on one line, tag on its own line */
  .skb-meta { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; }
  .skb-meta > span:first-child { white-space: nowrap; }
  .skb-herobox { padding: 24px !important; }
  .skb-h1 { font-size: 30px !important; }
  .skb-grid { grid-template-columns: 1fr !important; }
  .skb-fcard { margin: -40px 12px 0 !important; }
  .skb-pager-text { display: none !important; }
  .skb-tiles { grid-template-columns: 1fr !important; grid-template-rows: none !important; height: auto !important; }
  .skb-tiles .skb-tile { height: 200px; }
  .skb-tiles .skb-tile:first-child { grid-row: auto !important; height: 260px; }
}