/* ================================================================
   page.css — GAMS Sacaba / Tema gams
   Estilos para páginas (page.php) y entradas (single.php).
   Cargado condicionalmente desde functions.php:
     is_singular() → wp_enqueue_style('gams-page', ...)
   
   Usa las mismas variables CSS del tema:
     --primary-main, --color-acento, --texto-default, etc.
   ================================================================ */

/* ════════════════════════════════════════════════════════════
   1. HERO DE PÁGINA — título + breadcrumb
   ════════════════════════════════════════════════════════════ */
.gams-page-hero {
  background:    var(--primary-main);
  padding:       26px 0 22px;
  position:      relative;
  overflow:      hidden;
}

/* Patrón decorativo sutil de fondo */
.gams-page-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: repeating-linear-gradient(
          45deg,
          rgba(255,255,255,0.03) 0px,
          rgba(255,255,255,0.03) 1px,
          transparent 1px,
          transparent 12px
  );
  pointer-events: none;
}

.gams-page-hero-inner {
  max-width: var(--max-ancho);
  margin:    0 auto;
  padding:   0 24px;
  position:  relative;
  z-index:   1;
}

.gams-page-hero h1 {
  color:         #fff !important;
  font-weight:   700 !important;
  margin:        0 0 10px !important;
  line-height:   1.2 !important;
  font-size:     2rem !important;
}

/* Breadcrumb */
.gams-breadcrumb {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         4px 6px;
  font-size:   0.82rem;
  color:       rgba(255,255,255,0.65);
  margin:      0;
  padding:     0;
  list-style:  none;
}
.gams-breadcrumb a {
  color:           rgba(255,255,255,0.75);
  text-decoration: none;
  transition:      color var(--transicion);
}
.gams-breadcrumb a:hover     { color: #fff; }
.gams-breadcrumb .sep        { opacity: 0.4; }
.gams-breadcrumb .current    { color: rgba(255,255,255,0.95); font-weight: 500; }

/* ════════════════════════════════════════════════════════════
   2. LAYOUT PRINCIPAL — contenido + sidebar
   ════════════════════════════════════════════════════════════ */
.gams-page-layout {
  max-width:  var(--max-ancho);
  margin:     0 auto;
  padding:    36px 24px 48px;
  display:    grid;
  grid-template-columns: 1fr 280px;
  gap:        32px;
  align-items: start;
}

/* Sin sidebar: columna única */
.gams-page-layout.sin-sidebar {
  grid-template-columns: 1fr;
  max-width: 900px;
}

/* ════════════════════════════════════════════════════════════
   3. CONTENIDO DE LA PÁGINA
   ════════════════════════════════════════════════════════════ */
.gams-page-content {
  min-width: 0; /* evita overflow en grid */
}

/* Imagen destacada */
.gams-featured-img {
  width:         100%;
  border-radius: var(--radio-lg);
  overflow:      hidden;
  margin-bottom: 28px;
  max-height:    420px;
}
.gams-featured-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Meta de entrada (solo single.php) */
.gams-post-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--borde-suave);
}
.gams-post-meta-item {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   0.82rem;
  color:       var(--texto-suave);
}
.gams-post-meta-item i {
  color:      var(--primary-main);
  font-size:  0.9rem;
  flex-shrink: 0;
}
.gams-post-meta-item a {
  color:           var(--primary-main);
  text-decoration: none;
  font-weight:     500;
}
.gams-post-meta-item a:hover { text-decoration: underline; }

/* Categoría badge */
.gams-cat-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  background:     #e8f5e9;
  color:          var(--primary-main);
  font-size:      0.72rem;
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  margin-bottom:  14px;
  display:        inline-flex;
}

/* ── Contenido WordPress (wp-content) ──────────────────── */
.gams-entry-content {
  color:       var(--texto-default);
  line-height: 1.8;
  font-size:   1rem;
}

/* Títulos dentro del contenido */
.gams-entry-content h2 {
  font-size:     1.5rem !important;
  font-weight:   700 !important;
  color:         var(--texto-default) !important;
  margin:        2rem 0 0.75rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--borde-suave);
}
.gams-entry-content h3 {
  font-size:   1.25rem !important;
  font-weight: 600 !important;
  color:       var(--texto-default) !important;
  margin:      1.6rem 0 0.6rem !important;
}
.gams-entry-content h4 {
  font-size:   1.05rem !important;
  font-weight: 600 !important;
  color:       var(--texto-default) !important;
  margin:      1.4rem 0 0.5rem !important;
}

/* Párrafos y listas */
.gams-entry-content p     { margin: 0 0 1.2rem; }
.gams-entry-content ul,
.gams-entry-content ol    { margin: 0 0 1.2rem 1.4rem; padding: 0; }
.gams-entry-content li    { margin-bottom: 0.4rem; line-height: 1.7; }

/* Enlace dentro del contenido */
.gams-entry-content a {
  color:           var(--primary-main);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gams-entry-content a:hover { color: var(--primary-light); }

/* Blockquote */
.gams-entry-content blockquote {
  border-left: 4px solid var(--color-acento);
  background:  #f0f7f0;
  margin:      1.4rem 0;
  padding:     1rem 1.4rem;
  border-radius: 0 var(--radio) var(--radio) 0;
  font-style:  italic;
  color:       var(--texto-suave);
}

/* Imágenes dentro del contenido */
.gams-entry-content img {
  max-width:     100%;
  height:        auto;
  border-radius: var(--radio);
  margin:        1rem 0;
}
.gams-entry-content figure { margin: 1.5rem 0; }
.gams-entry-content figcaption {
  text-align: center;
  font-size:  0.78rem;
  color:      var(--texto-suave);
  margin-top: 6px;
}

/* Tablas */
.gams-entry-content table {
  width:          100%;
  border-collapse: collapse;
  margin:         1.4rem 0;
  font-size:      0.88rem;
  border-radius:  var(--radio);
  overflow:       hidden;
}
.gams-entry-content th {
  background: var(--primary-main);
  color:      #fff;
  padding:    10px 14px;
  text-align: left;
  font-weight: 600;
}
.gams-entry-content td {
  padding:      9px 14px;
  border-bottom: 1px solid var(--borde-suave);
  color:        var(--texto-default);
}
.gams-entry-content tr:last-child td { border-bottom: none; }
.gams-entry-content tr:nth-child(even) td { background: var(--background-default); }

/* Código */
.gams-entry-content code {
  background:    #f0f4f0;
  color:         var(--primary-main);
  padding:       2px 6px;
  border-radius: 4px;
  font-size:     0.88em;
}
.gams-entry-content pre {
  background:    #1e2e1e;
  color:         #a5d6a7;
  padding:       1.2rem;
  border-radius: var(--radio);
  overflow-x:    auto;
  font-size:     0.85rem;
  margin:        1.2rem 0;
}

/* Separador */
.gams-entry-content hr {
  border:        none;
  border-top:    2px solid var(--borde-suave);
  margin:        2rem 0;
}

/* ── Tags de entrada ───────────────────────────────────── */
.gams-post-tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--borde-suave);
}
.gams-post-tags a {
  display:         inline-block;
  background:      var(--background-default);
  border:          1px solid var(--borde-suave);
  color:           var(--texto-suave);
  font-size:       0.78rem;
  padding:         4px 12px;
  border-radius:   99px;
  text-decoration: none;
  transition:      border-color var(--transicion), color var(--transicion);
}
.gams-post-tags a:hover {
  border-color: var(--primary-main);
  color:        var(--primary-main);
}

/* ── Navegación prev/next ──────────────────────────────── */
.gams-post-nav {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            12px;
  margin-top:     32px;
  padding-top:    24px;
  border-top:     1px solid var(--borde-suave);
}
.gams-post-nav-link {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 16px;
  background:      var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio);
  text-decoration: none;
  transition:      border-color var(--transicion), box-shadow var(--transicion);
}
.gams-post-nav-link:hover {
  border-color: var(--primary-main);
  box-shadow:   var(--sombra-card);
  text-decoration: none;
}
.gams-post-nav-link.prev { flex-direction: row; }
.gams-post-nav-link.next { flex-direction: row-reverse; text-align: right; }
.gams-post-nav-link i    { color: var(--primary-main); font-size: 1.1rem; flex-shrink: 0; }
.gams-post-nav-dir {
  font-size:   0.7rem;
  font-weight: 700;
  color:       var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .06em;
  display:     block;
  margin-bottom: 2px;
}
.gams-post-nav-title {
  font-size:   0.88rem;
  font-weight: 600;
  color:       var(--texto-default);
  display:     block;
  line-height: 1.35;
}

/* ════════════════════════════════════════════════════════════
   4. SIDEBAR
   ════════════════════════════════════════════════════════════ */
.gams-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

/* Widget base */
.gams-widget {
  background:    var(--background-card);
  border:        1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  overflow:      hidden;
  border-top:    3px solid var(--primary-main);
}
.gams-widget-title {
  font-weight:   700 !important;
  color:         var(--texto-default) !important;
  font-size:     0.88rem !important;
  margin:        0 !important;
  padding:       14px 16px;
  border-bottom: 1px solid var(--borde-suave);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gams-widget-body { padding: 14px 16px; }

/* Widget: info de contacto */
.gams-widget-contacto li {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       8px 0;
  border-bottom: 1px solid var(--borde-suave);
  font-size:     0.85rem;
  color:         var(--texto-default);
  list-style:    none;
}
.gams-widget-contacto li:last-child { border-bottom: none; }
.gams-widget-contacto i { color: var(--primary-main); margin-top: 2px; flex-shrink: 0; }

/* Widget: entradas recientes */
.gams-widget-posts a {
  display:         flex;
  gap:             10px;
  padding:         8px 0;
  border-bottom:   1px solid var(--borde-suave);
  text-decoration: none;
  align-items:     flex-start;
}
.gams-widget-posts a:last-child { border-bottom: none; }
.gams-widget-posts-thumb {
  width:         52px;
  height:        52px;
  border-radius: var(--radio);
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--background-default);
}
.gams-widget-posts-title {
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--texto-default);
  line-height: 1.35;
  display:     block;
  margin-bottom: 3px;
}
.gams-widget-posts-date {
  font-size: 0.72rem;
  color:     var(--texto-suave);
  display:   block;
}
.gams-widget-posts a:hover .gams-widget-posts-title { color: var(--primary-main); }

/* Widget: enlaces de descarga */
.gams-widget-docs a {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         8px 0;
  border-bottom:   1px solid var(--borde-suave);
  text-decoration: none;
  color:           var(--texto-default);
  font-size:       0.84rem;
  font-weight:     500;
  transition:      color var(--transicion);
}
.gams-widget-docs a:last-child { border-bottom: none; }
.gams-widget-docs i { color: var(--primary-main); font-size: 1rem; flex-shrink: 0; }
.gams-widget-docs a:hover { color: var(--primary-main); }

/* ════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .gams-page-layout {
    grid-template-columns: 1fr;
    padding: 24px 16px 36px;
    gap: 28px;
  }
  /* Sidebar se mueve abajo en móvil */
  .gams-sidebar { order: 2; }

  .gams-page-hero h1 { font-size: 1.5rem !important; }
  .gams-page-hero    { padding: 16px 0 12px; }
  .gams-page-hero-inner { padding: 0 16px; }

  .gams-post-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .gams-post-nav-link.next { flex-direction: row; text-align: left; }

  .gams-featured-img { max-height: 260px; }
}

@media (max-width: 480px) {
  .gams-page-hero h1 { font-size: 1.3rem !important; }
  .gams-post-meta    { gap: 6px 12px; }
}