/* ==========================================================================
   JG Components — Design-system-aligned styles for ACF-generated HTML
   Replaces inline styles in jg-acf-fields.php (T06)
   Tokens from theme.json: --wp--preset--color--, --wp--preset--font-family--
   ========================================================================== */

/* ── Shared base ── */
.jg-project-data,
.jg-publication-data {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--wp--preset--color--negro);
}

.jg-project-data {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--wp--preset--color--gris-claro);
}

/* ── Section headings (ficha, publicaciones, premios, medios) ── */
.jg-project-data h2,
.jg-publication-data h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--wp--preset--color--negro);
}

/* ── Definition lists (ficha técnica, bibliografía) ── */
.jg-ficha-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.4rem 1.5rem;
  margin: 0;
}

.jg-project-data dt,
.jg-publication-data dt {
  font-weight: 600;
  color: var(--wp--preset--color--gris-medio);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding-top: 0.15rem;
}

.jg-project-data dd,
.jg-publication-data dd {
  margin: 0;
}

/* ── Ref code (JG1206) ── */
.jg-ref {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--wp--preset--color--gris-medio);
}

/* ── Materials / brands separator row ── */
.jg-materials-sep {
  padding-top: 0.8rem;
  border-top: 1px solid var(--wp--preset--color--gris-claro);
  margin-top: 0.6rem;
}

.jg-brand-type {
  color: var(--wp--preset--color--gris-medio);
  font-size: 0.8rem;
}

/* ── Team section ── */
.jg-team-section {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--wp--preset--color--gris-claro);
}

.jg-team-dd {
  font-size: 0.85rem;
  color: var(--wp--preset--color--gris-medio);
}

/* ── Awards ── */
.jg-awards-section {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--wp--preset--color--gris-claro);
}

.jg-awards-section h2 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.jg-awards-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jg-awards-list li {
  margin-bottom: 0.5rem;
}

.jg-awards-list a {
  color: var(--wp--preset--color--negro);
  text-decoration: underline;
}

.jg-award-year {
  color: var(--wp--preset--color--gris-medio);
}

/* ── Sections (ficha, publicaciones, enlaces) ── */
.jg-ficha-tecnica,
.jg-publicaciones,
.jg-external-links,
.jg-pub-projects {
  margin-bottom: 2.5rem;
}

/* ── Publications grid (in project single) ── */
.jg-project-data .jg-pub-grid, .jg-publication-data .jg-pub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.jg-project-data .jg-pub-grid a, .jg-publication-data .jg-pub-grid a {
  display: block;
  text-decoration: none;
  color: var(--wp--preset--color--gris-oscuro);
}

.jg-project-data .jg-pub-grid img, .jg-publication-data .jg-pub-grid img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border: 1px solid var(--wp--preset--color--gris-claro);
  margin-bottom: 0.4rem;
}

.jg-pub-title {
  display: block;
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.227), 1rem);
  font-weight: 300;
  line-height: 1.3;
  text-align: left;
  margin-top: 0.4rem;
}

/* ── External links ── */
.jg-ext-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jg-ext-list li {
  margin-bottom: 0.3rem;
}

.jg-ext-list a {
  color: var(--wp--preset--color--negro);
  text-decoration: underline;
}

.jg-ext-year {
  color: var(--wp--preset--color--gris-medio);
  font-size: 0.8rem;
}

/* ── Publication single: cover + biblio layout ── */
.jg-pub-cover-biblio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  align-items: start;
}

.jg-pub-cover img {
  width: 100%;
  height: auto;
  border: 1px solid var(--wp--preset--color--gris-claro);
}

.jg-pub-biblio dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}

.jg-publication-data a {
  color: var(--wp--preset--color--negro);
  text-decoration: underline;
}

/* ── Publication single: related projects grid ── */
.jg-pub-proj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.jg-pub-proj-grid a {
  display: block;
  text-decoration: none;
  color: var(--wp--preset--color--negro);
}

.jg-pub-proj-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: 0.4rem;
}

.jg-pub-proj-title {
  display: block;
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.1px;
  color: var(--wp--preset--color--negro);
}

.jg-pub-proj-arch {
  display: block;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 13.6px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wp--preset--color--negro);
  margin-top: 0.6rem;
}

/* ── Taxonomy meta (architects, editores, countries) ── */
.jg-taxonomy-meta {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--wp--preset--color--gris-oscuro);
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--wp--preset--color--gris-claro);
  border: 1px solid var(--wp--preset--color--gris-claro);
  border-radius: 4px;
}

.jg-taxonomy-meta dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
}

.jg-taxonomy-meta dt {
  font-weight: 600;
  color: var(--wp--preset--color--gris-medio);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.jg-taxonomy-meta dd {
  margin: 0;
}

.jg-taxonomy-meta a {
  color: var(--wp--preset--color--negro);
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 781px) {
  .jg-pub-cover-biblio {
    grid-template-columns: 1fr;
  }
  .jg-ficha-dl {
    grid-template-columns: 120px 1fr;
  }
}