/* =========================================================
   PÁGINA EL OFICIO — R&A
   Hub de contenido experto
========================================================= */

/* === HERO EDITORIAL === */
.craft-hero {
  background-color: var(--color-marfil);
  padding-top: calc(var(--header-height-mobile) + var(--space-xl));
  padding-bottom: var(--space-xl);
}
@media (min-width: 768px) {
  .craft-hero {
    padding-top: calc(var(--header-height-desktop) + var(--space-2xl));
    padding-bottom: var(--space-2xl);
  }
}

.craft-hero__inner { max-width: 900px; }

.craft-hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  color: var(--color-nogal);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

.craft-hero__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-carbon-suave);
  max-width: 60ch;
}

/* === CATEGORÍAS SUPERIORES === */
.craft-categories {
  background-color: var(--color-blanco-madera);
  border-top: 1px solid var(--color-marfil-sombra);
  border-bottom: 1px solid var(--color-marfil-sombra);
  padding-block: var(--space-lg);
}

.craft-categories__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 600px) {
  .craft-categories__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .craft-categories__list { grid-template-columns: repeat(4, 1fr); }
}

.craft-categories__link {
  display: block;
  padding: var(--space-md);
  border-left: 2px solid var(--color-marfil-sombra);
  transition: border-color var(--transition-color), background-color var(--transition-color);
}
.craft-categories__link:hover {
  border-left-color: var(--color-terracota);
  background-color: var(--color-marfil);
}

.craft-categories__label {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--color-nogal);
  margin-bottom: var(--space-2xs);
}

.craft-categories__desc {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-nogal-texto);
}

/* === ARTÍCULO DESTACADO === */
.featured-article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background-color: var(--color-blanco-madera);
  overflow: hidden;
}
@media (min-width: 992px) {
  .featured-article { grid-template-columns: 1.2fr 1fr; }
}

.featured-article__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-marfil-sombra);
}
@media (min-width: 992px) {
  .featured-article__media { aspect-ratio: auto; height: 100%; }
}
.featured-article__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-transform);
}
.featured-article:hover .featured-article__media img { transform: scale(1.02); }

.featured-article__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 992px) {
  .featured-article__body { padding: var(--space-2xl); }
}

.featured-article__overline {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ocre-laton);
  margin-bottom: var(--space-sm);
}

.featured-article__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  color: var(--color-nogal);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
  transition: color var(--transition-color);
}
.featured-article:hover .featured-article__title { color: var(--color-terracota); }

.featured-article__excerpt {
  font-size: var(--fs-body-lg);
  color: var(--color-carbon-suave);
  margin-bottom: var(--space-md);
  max-width: 60ch;
}

/* === SECCIONES DE CATEGORÍA === */
.craft-section { scroll-margin-top: calc(var(--header-height-mobile) + 60px); }
@media (min-width: 768px) {
  .craft-section { scroll-margin-top: calc(var(--header-height-desktop) + 60px); }
}

.craft-section__header {
  max-width: 720px;
  margin-bottom: var(--space-xl);
}

.craft-section__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  color: var(--color-nogal);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.craft-section__lead {
  font-size: var(--fs-body-lg);
  color: var(--color-carbon-suave);
}

.craft-section__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-marfil-sombra);
}

/* === GRID DE ARTÍCULOS === */
.craft-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .craft-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
}

.craft-card {
  background-color: var(--color-marfil);
  border: 1px solid var(--color-marfil-sombra);
  transition: border-color var(--transition-color), background-color var(--transition-color);
}
.craft-card:hover {
  border-color: var(--color-terracota);
  background-color: var(--color-blanco-madera);
}

.craft-card__link {
  display: block;
  padding: var(--space-lg);
  height: 100%;
}

.craft-card__overline {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ocre-laton);
  margin-bottom: var(--space-xs);
}

.craft-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--color-nogal);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
  transition: color var(--transition-color);
}
.craft-card:hover .craft-card__title { color: var(--color-terracota); }

.craft-card__excerpt {
  font-size: var(--fs-small);
  color: var(--color-carbon-suave);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

/* === VARIANTE OSCURA === */
.craft-card--dark {
  background-color: transparent;
  border-color: rgba(244, 241, 234, 0.15);
}
.craft-card--dark:hover {
  border-color: var(--color-terracota);
  background-color: rgba(244, 241, 234, 0.03);
}
.craft-card--dark .craft-card__title { color: var(--color-marfil); }
.craft-card--dark:hover .craft-card__title { color: var(--color-terracota); }
.craft-card--dark .craft-card__excerpt { color: var(--color-marfil-sombra); }

.craft-section--dark .craft-section__footer { border-top-color: rgba(244, 241, 234, 0.15); }

.link-arrow--light { color: var(--color-ocre-laton); }
.link-arrow--light:hover { color: var(--color-marfil); }