/* Landing page only. Loaded by overrides/home.html, never by extra_css, so none
   of the full-width rules below can reach the model pages.

   Everything is expressed through Material's own custom properties, so the page
   follows the dark/light toggle instead of pinning its own colours. */

/* One surface token for the raised blocks: the pill, the model cards and the
   modality tiles. Deliberately not --md-code-bg-color, which these used to
   borrow: code blocks and cards would then always be the same shade, and any
   retune of one silently moved the other. The page background stays below this,
   the code surface above it, so no two adjacent surfaces ever match. */
[data-md-color-scheme="slate"] {
  --kf-surface: #0b1118;
}

[data-md-color-scheme="default"] {
  --kf-surface: #f5f7fa;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* Both sidebars are gone (home.html drops the site_nav block), so the article
   can take a wider column than the 61rem Material gives a normal page. :has()
   scopes this to the home page; where it is unsupported the page simply stays
   at the default width. */
.md-main__inner:has(.md-content--home) {
  max-width: 78rem;
}

.md-content--home .md-content__inner {
  padding: 0 0.8rem;
  margin-bottom: 0;
}

/* Material draws a spacer pseudo-element after every article. */
.md-content--home .md-content__inner::before {
  display: none;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.kf-hero {
  position: relative;
  text-align: center;
  padding: 3.6rem 0 2.4rem;
}

/* Teal bloom behind the headline, dark scheme only. Kept inside the content
   width so it cannot produce a horizontal scrollbar, and behind the text via
   z-index rather than opacity so the copy keeps full contrast. */
[data-md-color-scheme="slate"] .kf-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -4rem;
  left: 50%;
  width: min(100%, 58rem);
  height: 30rem;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 60% 50% at 50% 42%,
    rgba(34, 211, 238, 0.15),
    rgba(34, 211, 238, 0.05) 46%,
    transparent 72%
  );
  pointer-events: none;
}

.kf-hero > * {
  position: relative;
  z-index: 1;
}

/* The "New" pill above the headline. */
.md-typeset .kf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.34em 0.9em;
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 2em;
  background: var(--kf-surface);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  transition: border-color 125ms, color 125ms;
}

.md-typeset .kf-pill:hover {
  border-color: var(--md-typeset-a-color);
  color: var(--md-default-fg-color);
}

.kf-pill__tag {
  padding: 0.1em 0.55em;
  border-radius: 2em;
  background: var(--md-typeset-a-color);
  color: var(--md-primary-bg-color, #fff);
  font-size: 0.85em;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .kf-pill__tag {
  color: #060a0f;
}

.md-typeset .kf-hero h1 {
  margin: 0.7rem 0 0;
  font-size: 2.65rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

/* The one italic word, standing in for Unsloth's script accent. */
.md-typeset .kf-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--md-typeset-a-color);
}

.md-typeset .kf-hero__lede {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.kf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.md-typeset .kf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.62em 1.5em;
  border: 1px solid transparent;
  border-radius: 2em;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 125ms, border-color 125ms, transform 125ms;
}

.md-typeset .kf-btn:hover {
  transform: translateY(-1px);
}

.md-typeset .kf-btn--primary {
  background: var(--md-typeset-a-color);
  color: #fff;
}

.md-typeset .kf-btn--primary:hover {
  background: var(--md-accent-fg-color);
  color: #fff;
}

.md-typeset .kf-btn--ghost {
  border-color: var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color);
}

.md-typeset .kf-btn--ghost:hover {
  border-color: var(--md-typeset-a-color);
  color: var(--md-typeset-a-color);
}

/* ── Section headings ────────────────────────────────────────────────────── */

.md-typeset .kf-section {
  padding: 2.6rem 0 0;
}

.md-typeset .kf-section > h2 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

/* No permalink anchors on a landing page. */
.md-typeset .kf-section > h2 .headerlink {
  display: none;
}

.md-typeset .kf-section > p {
  margin: 0 0 1.2rem;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

/* ── Model cards ─────────────────────────────────────────────────────────── */

/* Six cards, so three across in two rows rather than six in a line, which would
   leave each one too narrow for its figure to read. */
.kf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.md-typeset .kf-card {
  display: block;
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 0.6rem;
  background: var(--kf-surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 125ms, transform 125ms;
}

.md-typeset .kf-card:hover {
  border-color: var(--md-typeset-a-color);
  transform: translateY(-2px);
}

/* The card figures are the same side-by-side comparisons the model pages use:
   two or three panels with a white gutter between them. object-fit cover cannot
   express "show me panel 2 of 3", so it left a slice of the neighbouring panel
   visible at the edge.

   Instead the media box is a window and the image is scaled up until one panel
   is exactly as wide as the window, then shifted so the wanted panel sits at the
   left edge. --kf-zoom is the image width as a percentage of the window, and
   --kf-shift is the offset as a percentage of the image's own width. Both are
   measured from the real pixel boundaries, per figure, below.

   The window is 3:2 because that is the aspect of the individual panels, so the
   landscape figures are cropped to nothing at all. */
.kf-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--md-typeset-table-color);
}

/* --kf-top and --kf-shift-y default to centring the crop vertically. A figure
   whose label sits along its top edge sets them to 0 instead, so the crop is
   taken from the top rather than the middle. */
.md-typeset .kf-card__media img {
  position: absolute;
  top: var(--kf-top, 50%);
  left: 0;
  width: var(--kf-zoom, 100%);
  max-width: none;
  height: auto;
  margin: 0;
  transform: translate(var(--kf-shift, 0), var(--kf-shift-y, -50%));
}

/* detr_output.jpg, 640x426: a single panel, so it needs no crop. */
.kf-card__media--detr {
  --kf-zoom: 100%;
  --kf-shift: 0;
}

/* segformer_seg_output.jpg, 970x640: 2 panels of 480, gutter at 480..489.
   Panel 1 is the overlay. These panels are portrait, the only ones that are, so
   this is the one card cropped top and bottom. */
.kf-card__media--segformer {
  --kf-zoom: 202.0833%;
  --kf-shift: -50.5155%;
}

/* depth_anything_v2_single_output.jpg, 1288x428: 2 panels of 640, gutter at
   640..647. Panel 1 is the depth map. */
.kf-card__media--depth {
  --kf-zoom: 201.25%;
  --kf-shift: -50.3106%;
}

/* sam3_text_output.jpg, 1933x425: 3 panels of ~637, gutters at 640..649 and
   1287..1296. Panel 0 is the elephants. */
.kf-card__media--sam3 {
  --kf-zoom: 302.0313%;
  --kf-shift: 0;
}

/* Fit rather than crop, for figures whose panels are portrait. A 3:2 window
   would drop a third of their height and cut the subject, so instead a frame the
   exact shape of the panel is centred in the window and the rest of the window
   is card surface. The frame clips, so the neighbouring panel stays hidden.

   The image is sized by height alone: at full frame height its natural width
   puts exactly one panel across the frame, which is why no zoom value is needed
   here, unlike the cropping cards above. */
.kf-card__media--fit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kf-surface);
}

.kf-card__panel {
  position: relative;
  height: 100%;
  aspect-ratio: var(--kf-panel-aspect, 3 / 2);
  overflow: hidden;
}

.md-typeset .kf-card__panel img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  margin: 0;
  transform: translateX(var(--kf-shift, 0));
}

/* owlv2_batch_output.jpg, 1149x640: panel 0 is the bear at x 0..585, so the frame
   is 586:640 and no shift is needed to bring it to the frame's left edge. */
.kf-card__panel--owlv2 {
  --kf-panel-aspect: 586 / 640;
  --kf-shift: 0;
}

/* The speech card has no image: what a speech model produces is text. This holds
   the clip itself plus the transcript whisper.md measured from it. */
.kf-card__media--audio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  padding: 0 1rem;
  background: var(--md-code-bg-color);
}

.kf-transcript {
  display: block;
}

.md-typeset .kf-card__audio {
  display: block;
  width: 100%;
  height: 2rem;
  margin: 0;
}

/* This card is a div, not an anchor, so the link is on the text block. */
.md-typeset a.kf-card__body {
  color: inherit;
  text-decoration: none;
}

.kf-transcript__label {
  display: block;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-typeset-a-color);
}

.kf-transcript__text {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
}

/* A span, so the whole card stays a single valid <a>. */
.kf-card__body {
  display: block;
  padding: 0.7rem 0.85rem 0.85rem;
}

.kf-card__kicker {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-typeset-a-color);
}

.kf-card__title {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.kf-card__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.66rem;
  color: var(--md-default-fg-color--lighter);
}

/* ── Feature panel ───────────────────────────────────────────────────────── */

/* The band holding the alternating feature rows. It carries no fill of its own:
   it used to be tinted, which sat within a couple of points of the code surface
   and made the code blocks inside it disappear. The border and radius still
   group the rows, and everything on the page now shares one background. */
.kf-panel {
  margin-top: 2.6rem;
  padding: 2rem 2rem 2.4rem;
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 0.8rem;
  background: transparent;
}

.kf-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 1.6rem 0;
}

.kf-feature + .kf-feature {
  border-top: 1px solid var(--md-typeset-table-color);
}

/* Every other row puts its figure on the left, the way the reference page
   alternates. The source order stays text-first so it reads correctly when the
   grid collapses to one column. */
.kf-feature:nth-child(even) .kf-feature__text {
  order: 2;
}

.md-typeset .kf-feature h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset .kf-feature h3 .headerlink {
  display: none;
}

.md-typeset .kf-feature p {
  margin: 0 0 0.6rem;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
}

/* Bulleted points read at the same size as the prose they replace, rather than
   inheriting Material's default list metrics. */
.md-typeset .kf-feature ul {
  margin: 0 0 0.7rem;
  padding-left: 1.05em;
}

.md-typeset .kf-feature li {
  margin: 0 0 0.35em;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}

.md-typeset .kf-feature li:last-child {
  margin-bottom: 0;
}

.md-typeset .kf-feature pre {
  margin: 0;
}

.md-typeset .kf-feature pre > code {
  font-size: 0.66rem;
}

.md-typeset .kf-feature img {
  display: block;
  width: 100%;
  border-radius: 0.4rem;
  border: 1px solid var(--md-typeset-table-color);
  margin: 0;
}

/* ── Modality boxes ──────────────────────────────────────────────────────── */

/* Four boxes, one per modality: a heading, a line of description, and a row of
   representative model links. */
.kf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.kf-tile {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--md-typeset-table-color);
  border-radius: 0.6rem;
  background: var(--kf-surface);
}

.md-typeset .kf-tile h3 {
  margin: 0 0 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-typeset .kf-tile h3 .headerlink {
  display: none;
}

.md-typeset .kf-tile p {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}

/* The link row is the last paragraph. Pushed to the bottom so the rows line up
   across boxes whose descriptions wrap to different heights. */
.md-typeset .kf-tile p:last-child {
  margin: auto 0 0;
  padding-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.9;
  color: var(--md-default-fg-color--lighter);
}

/* ── Quick start ─────────────────────────────────────────────────────────── */

.kf-start {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.2rem;
}

.md-typeset .kf-start p {
  font-size: 0.74rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
}

.md-typeset .kf-start pre {
  margin: 0;
}

.md-typeset .kf-start pre > code {
  font-size: 0.68rem;
}

/* ── Closing call to action ──────────────────────────────────────────────── */

.kf-cta {
  text-align: center;
  padding: 3.4rem 0 2.6rem;
  margin-top: 2.6rem;
  border-top: 1px solid var(--md-typeset-table-color);
}

.md-typeset .kf-cta h2 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

.md-typeset .kf-cta h2 .headerlink {
  display: none;
}

.md-typeset .kf-cta > p {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* The footer is not here: it is the site-wide centred one from
   overrides/partials/footer.html, styled in extra.css. */

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media screen and (max-width: 76.1875em) {
  .kf-cards,
  .kf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 59.9375em) {
  .md-typeset .kf-hero h1 {
    font-size: 2rem;
  }

  .kf-start,
  .kf-feature {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  /* Collapsed to one column, every row reads text then figure. */
  .kf-feature:nth-child(even) .kf-feature__text {
    order: 0;
  }

  .kf-panel {
    padding: 1.2rem 1.2rem 1.6rem;
  }
}

@media screen and (max-width: 44.9375em) {
  .kf-cards,
  .kf-grid {
    grid-template-columns: 1fr;
  }

  .md-typeset .kf-hero h1 {
    font-size: 1.75rem;
  }

  .md-typeset .kf-cta h2 {
    font-size: 1.5rem;
  }
}