/* blogs-ui.css — the listing's own controls: filters, sort, show more, back to
 * top. Hand-authored, unlike blogs.css which is generated and overwritten.
 *
 * Built only from tokens.css, per DESIGN-SYSTEM.md. The filter pills reuse the
 * tag-pill treatment already on the site (uppercase 12/700 on --sk-surface-3,
 * pill radius); the sort control reuses the secondary-button treatment; Show
 * more reuses the Get Guide pill so it reads as the same kind of action. The
 * active filter sits on --sk-violet-deep rather than --sk-violet, because
 * white on --sk-violet measures 4.33:1 and misses the AA floor.
 */

/* ---- the Recents header row ------------------------------------------------
 * Framer's heading block is a full-width flex row with the title in it. The
 * controls sit in the same row on desktop and tablet, and are hidden on phone
 * where there is no room for them and the Show more button does the work. */
.sk-recents-head {
  display: flex;
  align-items: center;
  gap: var(--sk-s4);
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 var(--sk-s5);
}
/* Framer's heading block claims the full width; inside this row it takes only
   what the words need so the controls can sit beside it.
 *
 * Its inner RichTextContainer is emitted as `flex: 1 0 0px; width: 1px` — the
 * pattern Framer uses for text that fills a row it is growing inside. Once the
 * wrapper stops filling, nothing grows that 1px back, and the wrapper's own
 * `overflow: hidden` then hid the word entirely: "Recents" was in the DOM at
 * 1px wide with a letter per line. So the container has to be released from
 * that basis too, and the word held on one line. */
.sk-recents-head > :first-child {
  width: auto !important;
  flex: 0 0 auto;
  overflow: visible !important;
}
.sk-recents-head > :first-child [data-framer-component-type="RichTextContainer"] {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
}
.sk-recents-head > :first-child .framer-text {
  white-space: nowrap !important;
  width: auto !important;
}

.sk-controls {
  display: flex;
  align-items: center;
  gap: var(--sk-s2);
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: flex-end;
  font-family: var(--sk-ui);
}
.sk-controls-spacer { flex: 1 1 auto; }

.sk-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.sk-filter {
  font-family: var(--sk-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sk-ink-2);
  background: var(--sk-surface-3);
  border: 0;
  border-radius: var(--sk-r-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.sk-filter:hover { background: #4d4d4d; color: var(--sk-ink); }
.sk-filter[aria-pressed="true"] {
  background: var(--sk-violet-deep);
  color: var(--sk-ink);
}
.sk-filter .n {
  font-weight: 400;
  opacity: .65;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

.sk-sort {
  font-family: var(--sk-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--sk-ink-2);
  background: var(--sk-surface-3);
  border: 0;
  border-radius: var(--sk-r-card);
  padding: 10px 32px 10px 12px;
  cursor: pointer;
  appearance: none;
  /* the chevron, drawn rather than shipped as an icon file */
  background-image: linear-gradient(45deg, transparent 50%, var(--sk-ink-3) 50%),
                    linear-gradient(135deg, var(--sk-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sk-sort:hover { color: var(--sk-ink); }

.sk-filter:focus-visible,
.sk-sort:focus-visible,
.sk-more:focus-visible,
.sk-top:focus-visible {
  outline: 2px solid var(--sk-violet);
  outline-offset: 3px;
}

/* ---- a card the current filter excludes ------------------------------------ */
.sk-card-hidden { display: none !important; }

/* ---- empty state ----------------------------------------------------------- */
.sk-empty {
  display: none;
  font-family: var(--sk-ui);
  font-size: 16px;
  color: var(--sk-ink-3);
  padding: var(--sk-s6) 0;
  text-align: center;
  width: 100%;
}
.sk-empty.is-on { display: block; }

/* ---- show more (phone only) ------------------------------------------------ */
.sk-more-wrap { display: none; width: 100%; justify-content: center; padding: var(--sk-s4) 0 0; }
.sk-more {
  font-family: var(--sk-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--sk-ink);
  background: var(--sk-bg);
  border: 1px solid var(--sk-surface-3);
  border-radius: var(--sk-r-pill);
  padding: 12px 22px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.sk-more:hover { background: var(--sk-violet-deep); border-color: var(--sk-violet-deep); }

/* Only the phone band caps the list. Tablet and desktop show everything. */
@media (max-width: 809.98px) {
  .sk-controls { display: none; }
  .sk-more-wrap.is-on { display: flex; }
}

/* At the narrow end of the tablet band the chips share one line with the
   "Recents" heading and the sort select. The set is built from the tags in the
   listing, so it grows on its own: a fifth chip appeared the day a Craft post
   moved out of the featured slot and into the grid, and the row wrapped. Tighten
   the chips here rather than letting the next tag break the heading again. */
@media (min-width: 810px) and (max-width: 1079.98px) {
  .sk-recents-head { gap: var(--sk-s2); }
  .sk-filters { gap: 6px; }
  .sk-filter { padding: 6px 10px; letter-spacing: .02em; }
  .sk-filter .n { margin-left: 4px; }
}

/* ---- back to top ----------------------------------------------------------- */
.sk-top {
  position: fixed;
  right: var(--sk-s4);
  bottom: var(--sk-s4);
  z-index: 6;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sk-surface-3);
  border-radius: var(--sk-r-pill);
  background: rgba(31, 31, 31, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--sk-violet);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, background 140ms ease;
}
.sk-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sk-top:hover { background: var(--sk-violet-deep); color: var(--sk-ink); }
.sk-top svg { width: 18px; height: 18px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .sk-top { transition: opacity 1ms linear; transform: none; }
  .sk-filter, .sk-sort, .sk-more { transition: none; }
}

/* ---- the grid --------------------------------------------------------------
 * Framer laid the cards out as fixed rows of two, which cannot be filtered or
 * sorted without moving cards between row containers. They are one wrapping
 * row now; the card widths are Framer's own, so the wrap points are unchanged. */
.sk-grid { flex-wrap: wrap !important; align-items: stretch !important; }

/* Every card in a row is as tall as the tallest card in that row. Framer
   centred them instead, so one extra line of summary made the neighbour look
   short and left the two Get Guide buttons on different baselines, which is
   the thing that reads as broken. The copy block takes the slack so the
   button stays pinned to the bottom of the card rather than floating under
   the text. verify-blogs asserts equal heights per row at all nine widths. */
.sk-grid > [data-framer-name="card"] { height: auto !important; align-self: stretch !important; }
.sk-grid > [data-framer-name="card"] > .sk-card-copy { flex: 1 1 auto !important; }

/* The phone floor from DESIGN-SYSTEM.md: nothing below 12px, 11px for
   uppercase labels. */
@media (max-width: 809.98px) {
  .sk-more { font-size: 14px; padding: 11px 20px; }
  .sk-top { width: 42px; height: 42px; right: var(--sk-s3); bottom: var(--sk-s3); }
}