/* by osmy — En proceso / Home.
   Requiere tokens.css.
*/

body.os-site .os-blog-home {
  background: var(--os-paper);
}


/* =========================================================
   HEADER
   ========================================================= */

body.os-site .os-blog-home__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: var(--os-space-7);

  margin-bottom: var(--os-space-6);
}

body.os-site .os-blog-home__intro {
  max-width: 42rem;
}

body.os-site .os-blog-home__intro h2 {
  margin: 0 0 var(--os-space-3);
}

body.os-site .os-blog-home__intro p {
  max-width: 52ch;

  margin: 0;

  color: var(--os-color-text-secondary);

  font-size: 1rem;
  line-height: 1.6;
}


/* ---------- VIEW ALL ---------- */

body.os-site .os-blog-home__view-all {
  display: inline-flex;
  align-items: center;

  flex-shrink: 0;

  gap: var(--os-space-2);

  color: var(--os-wine);

  font-family: var(--os-font-body);
  font-size: var(--os-type-button);
  font-weight: var(--os-weight-bold);

  letter-spacing: 0.05em;

  text-decoration: none;
  text-transform: uppercase;
}

body.os-site .os-blog-home__view-all span {
  transition:
    transform var(--os-motion-fast) var(--os-ease);
}

body.os-site .os-blog-home__view-all:hover span {
  transform: translateX(0.2rem);
}


/* =========================================================
   CATEGORIES
   ========================================================= */

body.os-site .os-blog-home__categories {
  display: flex;
  flex-wrap: wrap;

  gap: var(--os-space-2);

  margin-bottom: var(--os-space-6);
}

body.os-site .os-blog-home__categories span {
  display: inline-flex;
  align-items: center;

  min-height: 1.875rem;

  padding:
    0.35rem
    0.85rem;

  border: 1px solid var(--os-color-border);
  border-radius: 999px;

  color: var(--os-color-text-muted);

  font-family: var(--os-font-body);
  font-size: 0.68rem;
  font-weight: var(--os-weight-bold);

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


/* =========================================================
   FEATURED POST
   ========================================================= */

body.os-site .os-blog-home__featured {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 0;

  overflow: hidden;

  border: 1px solid var(--os-color-border);
  border-radius: var(--os-radius-lg);

  background: var(--os-paper);
}

body.os-site .os-blog-home__featured--no-image {
  grid-template-columns: 1fr;
}


/* ---------- FEATURED IMAGE ---------- */

body.os-site .os-blog-home__featured-media {
  display: block;

  min-height: 100%;

  overflow: hidden;

  background: var(--os-color-surface-alt);
}

body.os-site .os-blog-home__featured-media .os-blog-home__image {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 24rem;

  object-fit: cover;
}


/* ---------- FEATURED BODY ---------- */

body.os-site .os-blog-home__featured-body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding: clamp(
    var(--os-space-6),
    5vw,
    var(--os-space-8)
  );
}


/* =========================================================
   CATEGORY
   ========================================================= */

body.os-site .os-blog-home__category {
  display: block;

  margin-bottom: var(--os-space-3);

  color: var(--os-wine);

  font-family: var(--os-font-body);
  font-size: var(--os-type-eyebrow);
  font-weight: var(--os-weight-bold);

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* =========================================================
   FEATURED TITLE
   ========================================================= */

body.os-site .os-blog-home__featured h3 {
  max-width: 18ch;

  margin: 0 0 var(--os-space-4);

  font-size: clamp(
    1.75rem,
    1.4rem + 1.2vw,
    2.5rem
  );

  line-height: 1.1;
}

body.os-site .os-blog-home h3 a {
  color: inherit;

  text-decoration: none;
}

body.os-site .os-blog-home h3 a:hover {
  color: var(--os-wine);
}


/* ---------- EXCERPT ---------- */

body.os-site .os-blog-home__excerpt {
  max-width: 48ch;

  margin: 0 0 var(--os-space-4);

  color: var(--os-color-text-secondary);

  font-size: 1rem;
  line-height: 1.6;
}


/* ---------- META ---------- */

body.os-site .os-blog-home__meta {
  display: flex;
  flex-wrap: wrap;

  gap: 0.35rem;

  margin: 0 0 var(--os-space-5);

  color: var(--os-color-text-muted);

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  line-height: 1.4;
}


/* ---------- READ LINK ---------- */

body.os-site .os-blog-home__read {
  display: inline-flex;
  align-items: center;

  align-self: flex-start;

  gap: var(--os-space-2);

  color: var(--os-ink);

  font-family: var(--os-font-body);
  font-size: var(--os-type-button);
  font-weight: var(--os-weight-bold);

  letter-spacing: 0.05em;

  text-decoration: none;
  text-transform: uppercase;
}

body.os-site .os-blog-home__read span {
  transition:
    transform var(--os-motion-fast) var(--os-ease);
}

body.os-site .os-blog-home__read:hover {
  color: var(--os-wine);
}

body.os-site .os-blog-home__read:hover span {
  transform: translateX(0.2rem);
}


/* =========================================================
   SECONDARY POSTS
   ========================================================= */

body.os-site .os-blog-home__secondary {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--os-space-5);

  margin-top: var(--os-space-5);
}


/* ---------- CARD ---------- */

body.os-site .os-blog-home__card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--os-color-border);
  border-radius: var(--os-radius-lg);

  background: var(--os-paper);
}


/* ---------- CARD IMAGE ---------- */

body.os-site .os-blog-home__card-media {
  display: block;

  overflow: hidden;

  background: var(--os-color-surface-alt);
}

body.os-site .os-blog-home__card-media .os-blog-home__image {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


/* ---------- CARD BODY ---------- */

body.os-site .os-blog-home__card-body {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: var(--os-space-6);
}

body.os-site .os-blog-home__card h3 {
  margin: 0 0 var(--os-space-4);

  font-size: var(--os-type-h4);
  line-height: 1.2;
}

body.os-site .os-blog-home__card .os-blog-home__meta {
  margin-top: auto;
  padding-top: var(--os-space-4);
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

body.os-site .os-blog-home__close {
  margin-top: var(--os-space-7);

  text-align: center;
}

body.os-site .os-blog-home__close a {
  display: inline-flex;
  align-items: center;

  gap: var(--os-space-2);

  color: var(--os-wine);

  font-family: var(--os-font-body);
  font-size: var(--os-type-button);
  font-weight: var(--os-weight-bold);

  letter-spacing: 0.06em;

  text-decoration: none;
  text-transform: uppercase;
}

body.os-site .os-blog-home__close a span {
  transition:
    transform var(--os-motion-fast) var(--os-ease);
}

body.os-site .os-blog-home__close a:hover span {
  transform: translateX(0.2rem);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  body.os-site .os-blog-home__featured {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1.05fr);
  }

  body.os-site .os-blog-home__featured-media .os-blog-home__image {
    min-height: 21rem;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  body.os-site .os-blog-home__head {
    flex-direction: column;
    align-items: flex-start;

    gap: var(--os-space-5);
  }

  body.os-site .os-blog-home__categories {
    margin-bottom: var(--os-space-5);
  }

  body.os-site .os-blog-home__featured {
    grid-template-columns: 1fr;
  }

  body.os-site .os-blog-home__featured-media .os-blog-home__image {
    height: auto;
    min-height: 0;

    aspect-ratio: 4 / 3;
  }

  body.os-site .os-blog-home__featured-body {
    padding: var(--os-space-6);
  }

  body.os-site .os-blog-home__featured h3 {
    max-width: none;
  }

  body.os-site .os-blog-home__secondary {
    grid-template-columns: 1fr;

    gap: var(--os-space-4);
  }

}