/*
 * Quinnoa v5 — final category artwork source + reusable article-card spacing.
 *
 * The coloured taxonomy artwork defined by the later illustration layers is
 * the visual source of truth. The older inline line-SVG remains in markup as a
 * technical fallback, but is hidden whenever a known food family has a modern
 * --family-icon. This prevents double rendering while preserving the newest
 * artwork and centres it inside the full media field.
 */

/* -----------------------------------------------------------------------
 * Latest taxonomy artwork, centred everywhere
 * -------------------------------------------------------------------- */
.food-family-card .food-family-art {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
}

.food-family-card .food-family-art::before {
  content: none !important;
  display: none !important;
}

.food-family-card .food-family-art > .food-family-svg {
  display: none !important;
}

.food-family-card .food-family-art::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  place-self: center !important;
  width: 104px !important;
  height: 72px !important;
  max-width: 78% !important;
  max-height: 74% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background-color: transparent !important;
  background-image: var(--family-icon) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: contain !important;
}

.family-frutas .food-family-art::after { width: 116px !important; }
.family-tuberculos .food-family-art::after { width: 110px !important; }

.home-feature-illustration[class*="family-"] > .food-family-svg,
.discover-illustration[class*="family-"] > .food-family-svg,
.card-placeholder-illustrated[class*="family-"] > .food-family-svg,
.taxonomy-hero-visual[class*="family-"] > .food-family-svg,
.article-hero-fallback[class*="family-"] > .food-family-svg {
  display: none !important;
}

.home-feature-illustration[class*="family-"]::after,
.discover-illustration[class*="family-"]::after,
.card-placeholder-illustrated[class*="family-"]::after,
.taxonomy-hero-visual[class*="family-"]::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: min(190px, 48%) !important;
  height: min(132px, 58%) !important;
  margin: auto !important;
  transform: none !important;
  background-image: var(--family-icon) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: contain !important;
}

/* The single-article hero uses a real child instead of a percentage-height
 * pseudo-element. That avoids the artwork collapsing when the parent height
 * is determined by older responsive layers. */
.article-hero-fallback[class*="family-"]::after {
  content: none !important;
  display: none !important;
}

.article-hero-fallback[class*="family-"] {
  display: grid !important;
  place-items: center !important;
  min-height: clamp(230px, 31vw, 430px) !important;
  overflow: hidden !important;
}

.article-hero-fallback[class*="family-"] > .article-hero-art {
  display: block !important;
  width: clamp(180px, 26vw, 330px) !important;
  height: clamp(126px, 18vw, 230px) !important;
  margin: auto !important;
  background-color: transparent !important;
  background-image: var(--family-icon) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: contain !important;
}

/* Topic-only articles retain their existing inline fallback if no food family
 * is assigned. */
.article-hero-fallback[class*="topic-"] > .article-hero-art {
  display: none !important;
}

/* -----------------------------------------------------------------------
 * One article-card system on home, archives, search and related content
 * -------------------------------------------------------------------- */
.card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.card-grid .post-card {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--pometum-paper) !important;
  border: 1px solid var(--pometum-line) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.card-grid .post-card > a {
  display: block !important;
  width: 100% !important;
}

.card-grid .card-media {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.card-grid .card-body {
  box-sizing: border-box !important;
  padding: 18px 20px 22px !important;
}

.latest-guides-v5 > .container {
  box-sizing: border-box !important;
  width: min(1240px, calc(100% - 64px)) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 36px clamp(28px, 3vw, 46px) 44px !important;
}
.latest-guides-v5 .section-head-v5 { margin: 0 0 28px !important; }

.archive-wrap,
.related > .container {
  box-sizing: border-box !important;
  width: min(1240px, calc(100% - 64px)) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.archive-wrap > .card-grid,
.related .card-grid {
  margin-top: 8px !important;
}

@media (max-width: 1080px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .food-family-card .food-family-art {
    min-height: 70px !important;
    padding: 7px !important;
  }

  .food-family-card .food-family-art::after {
    width: 68px !important;
    height: 56px !important;
    max-width: 76% !important;
    max-height: 76% !important;
  }
  .family-frutas .food-family-art::after,
  .family-tuberculos .food-family-art::after {
    width: 72px !important;
    height: 56px !important;
  }

  .article-hero-fallback[class*="family-"] {
    min-height: 250px !important;
  }

  .article-hero-fallback[class*="family-"] > .article-hero-art {
    width: min(250px, 62vw) !important;
    height: min(175px, 44vw) !important;
  }

  .latest-guides-v5 > .container,
  .archive-wrap,
  .related > .container {
    width: calc(100% - 28px) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  .latest-guides-v5 > .container {
    padding: 26px 18px 32px !important;
  }

  .card-grid .card-body {
    padding: 17px 18px 20px !important;
  }
}

@media (max-width: 700px) {
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

@media (max-width: 430px) {
  .food-family-card .food-family-art::after {
    width: 64px !important;
    height: 54px !important;
  }
  .family-frutas .food-family-art::after,
  .family-tuberculos .food-family-art::after {
    width: 70px !important;
    height: 54px !important;
  }

  .article-hero-fallback[class*="family-"] {
    min-height: 220px !important;
  }

  .article-hero-fallback[class*="family-"] > .article-hero-art {
    width: 210px !important;
    height: 148px !important;
  }

  .latest-guides-v5 > .container {
    padding: 22px 14px 26px !important;
  }

  .card-grid .card-body {
    padding: 16px 16px 19px !important;
  }
}