/*
 Theme Name: Salient Child
 Template: salient
 Version: 1.0
*/

/* === Rutas individuales — relacionadas === */
body.single-rutas .rutas-rel-heading{
  margin-top:50px; /* separación respecto a lo anterior */
  margin-bottom:12px;
}

body.single-rutas .routes-row{ display:grid; gap:24px; }
@media (min-width: 901px){
  body.single-rutas .routes-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  body.single-rutas .routes-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  body.single-rutas .routes-row{ grid-template-columns: 1fr; }
}

/* Tarjetas (mismo look que el listado) */
body.single-rutas .route.item-card.poi-card{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
body.single-rutas .route.item-card.poi-card:hover,
body.single-rutas .route.item-card.poi-card:focus-within{
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  transform: translateY(-2px);
}
body.single-rutas .poi-card-img{ position:relative; background:#fff; }
body.single-rutas .poi-card-img img{ display:block; width:100%; height:auto; }
body.single-rutas .poi-km-badge{
  position:absolute; top:8px; left:8px; padding:6px 8px; border-radius:999px;
  background:#fff; color:#000; font-weight:700; font-size:.85rem; line-height:1;
  border:1px solid rgba(0,0,0,.15); box-shadow:0 2px 6px rgba(0,0,0,.12);
}
body.single-rutas .poi-card-body{ padding:10px 10px 12px; background:#fff; }
body.single-rutas .poi-title{
  margin:0 0 .5rem; line-height:1.4; font-weight:600; font-size:15px !important;
}
body.single-rutas .poi-title .r-title-link{ font-size:inherit !important; text-decoration:none; }
body.single-rutas .poi-row{ display:flex; align-items:center; gap:.45rem; font-size:.9rem; margin:.25rem 0; }
body.single-rutas .poi-row i{
  width:18px; min-width:18px; text-align:center;
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:900; color:#000;
}

/* Quitar padding extra del <p> usado como título de la ficha */
.ruta-ficha-heading {
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* Wrapper fullwidth (no pinta nada, solo estructura) */
.rutas-bc-wrap {
    width: 100%;
    background-color: #ffffff;
}

/* Wrapper fullwidth SOLO para las rutas */
body.single-rutas .rutas-bc-wrap{
  width:100%;
  /* quita esta línea si NO quieres banda blanca */
  background-color:#ffffff;
}

/* Breadcrumb dentro del container */
body.single-rutas .rutas-bc-wrap .rutas-breadcrumbs{
  display:block !important;
  width:100% !important;
  margin:16px 0;
  font-size:14px; line-height:1.4; color:#666;
}
body.single-rutas .rutas-bc-wrap .rutas-breadcrumbs a{ color:#333; text-decoration:none; }
body.single-rutas .rutas-bc-wrap .rutas-breadcrumbs a:hover{ text-decoration:underline; }
body.single-rutas .rutas-bc-wrap .rutas-breadcrumbs .sep{ margin:0 8px; color:#aaa; }
body.single-rutas .rutas-bc-wrap .rutas-breadcrumbs .current{ color:#000; font-weight:600; }

/* Evitar centrados heredados SOLO en este bloque */
body.single-rutas .rutas-bc-wrap .row,
body.single-rutas .rutas-bc-wrap .col,
body.single-rutas .rutas-bc-wrap .col *{
  text-align:left !important;
}

/* Márgenes de columnas: AJUSTE SOLO en la banda del breadcrumb */
@media only screen and (min-width: 691px) and (max-width: 999px){
  body.single-rutas .rutas-bc-wrap .col,
  body.single-rutas .rutas-bc-wrap .vc_row-fluid .wpb_column{
    margin-bottom:0 !important;
  }
}
@media only screen and (max-width: 690px){
  body.single-rutas .rutas-bc-wrap .col{
    margin-bottom:0 !important;
  }
}

/* Si usas header sticky y necesitabas respiro, ajústalo aquí */
@media (max-width: 999px){
  body.single-rutas .rutas-bc-wrap{ margin-top:0; }
}

/* Banda fullwidth gris para el bloque completo de la ruta */
body.single-rutas .ruta-bloque-wrap{
  width:100%;
  background:#efefef;  /* <-- el color que quieres */
  padding:2rem 0;      /* aire arriba/abajo */
  margin:0;
}

body.single-rutas .ruta-bloque-wrap .container{
  max-width:1180px;    /* ajusta si tu Salient usa otro */
  margin:0 auto;
  padding:0 20px;      /* mismo gutter lateral que el tema */
  box-sizing:border-box;
}

/* Ajustes finos del bloque (opcionales) */
body.single-rutas .ruta-title{ margin:0 0 1rem; }
body.single-rutas .ruta-intro{ margin:0 0 1.25rem; }

/* Asegura stacking correcto: fondo detrás, contenido delante */
.full-width-section { position: relative; }
.full-width-section .row-bg { z-index: 0; }
.full-width-section > .container { position: relative; z-index: 1; }

/* Quitar el espacio extra arriba en la ficha de rutas */
body.single-rutas .ruta-single {
  padding-top: 0 !important;   /* anula el del theme */
  padding-bottom: 25px;        /* si quieres mantener solo el bottom */
}
body.single-rutas .ruta-title {
  margin: 25px 0 1rem; /* arriba 25px, abajo 1rem */
}
/* En el bloque de ruta (full-width-section ruta-fw), en móvil/tablet
   el .container interno NO debe tener márgenes ni ancho máximo */
@media (max-width: 999px){
  .full-width-section.ruta-fw > .container{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Por si algún wrapper interior mete padding lateral, lo anulamos
   SOLO dentro del bloque ruta-fw en móvil/tablet */
@media (max-width: 999px){
  .full-width-section.ruta-fw .ruta-title,
  .full-width-section.ruta-fw .ruta-intro,
  .full-width-section.ruta-fw .ruta-ficha,
  .full-width-section.ruta-fw .ruta-elevacion-pad,
  .full-width-section.ruta-fw .ruta-descargas{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* === Single Rutas — Mapa derecha tipo "Full Width Background" (desktop) === */
/* Usamos un selector de "plantilla": .template-layout-map */

/* Variables globales */
:root{
  --leaflet-safe: 40px;      /* colchón para créditos Leaflet (ajusta 32/48 si hace falta) */
  --map-sticky-top: 120px;   /* valor inicial; el JS lo actualiza al vuelo */
}

/* ===== Sticky + altura exacta pegada al header (desktop) ===== */
@media (min-width: 1000px){
  .template-layout-map #map{
    position: sticky !important;
    top: var(--map-sticky-top) !important;
    height: calc(100vh - var(--map-sticky-top)) !important;
    min-height: calc(100vh - var(--map-sticky-top)) !important;

    /* estética */
    border-radius: 0 !important;
    box-shadow: none !important;

    /* ¡sin padding! el mapa llega al borde; moveremos los créditos con "right:" */
    padding-right: 0 !important;
    box-sizing: border-box;

    z-index: 0;
  }

  /* Créditos/controles Leaflet hacia dentro SIN crear hueco visual */
  .template-layout-map .leaflet-bottom.leaflet-right{
    right: var(--leaflet-safe) !important;
  }

  /* Evitar recortes en la cadena de wrappers de la columna derecha */
  .template-layout-map,
  .template-layout-map .ruta-right{
    overflow: visible;
  }
}

/* ====== Ancho hacia el borde derecho (bleed) como tu referencia ======
   Ajusta 1248/960/709 si tu container real es otro (Salient suele 1180/1200). 
   El +6px compensa micro huecos de subpíxel. NO restamos --leaflet-safe aquí. */

/* Fallback */
.template-layout-map #map{
  width: 100%;
}

/* Desktop grande */
@media (min-width: 1200px){
  .template-layout-map #map{
    width: calc(100% + ((100vw - 1248px) / 2) + 6px);
  }
}

/* Desktop mediano */
@media (min-width: 1000px) and (max-width: 1199px){
  .template-layout-map #map{
    width: calc(100% + ((100vw - 960px) / 2) + 6px);
  }
}

/* Tablet apaisado (solo si el mapa sigue a la derecha en este breakpoint) */
@media (min-width: 768px) and (max-width: 999px){
  .template-layout-map #map{
    width: calc(100% + ((100vw - 709px) / 2) + 6px);
  }
}

/* ===== Móvil/tablet: sin bleed ni sticky a pantalla ===== */
@media (max-width: 999px){
  .template-layout-map #map{
    position: static !important;
    top: auto !important;
    width: 100% !important;
    height: 60vh !important;
    min-height: 60vh !important;
    border-radius: 12px;  /* si quieres radios en móvil */
    padding-right: 0 !important;
  }
}

/* ===== 2 columnas en móvil para Salient Portfolio (Isotope) ===== */
@media (max-width: 768px){

  /* El contenedor: cubrir ambos casos (clase en el mismo nodo o en un padre) */
  .force-2-mobile.row.portfolio-items,
  .force-2-mobile .row.portfolio-items{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 0 !important;                 /* pon 8px cuando lo veas estable */
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    height: auto !important;           /* anula inline height */
    transform: none !important;
    perspective: none !important;
  }

  /* Ítems: anular ABSOLUTE/LEFT/TOP/TRANSFORM inline y fijar 2 cols */
  .force-2-mobile.row.portfolio-items > .col,
  .force-2-mobile .row.portfolio-items > .col,
  .force-2-mobile.row.portfolio-items > .col[style],
  .force-2-mobile .row.portfolio-items > .col[style]{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    flex: 0 0 50% !important;          /* 2 columnas */
    max-width: 50% !important;
    width: auto !important;
    z-index: auto !important;
  }

  /* Quitar reglas especiales de Salient que rompen la primera fila */
  .force-2-mobile .row.portfolio-items > .col.clear-both,
  .force-2-mobile .row.portfolio-items > .col.right-edge,
  .force-2-mobile.row.portfolio-items > .col.clear-both,
  .force-2-mobile.row.portfolio-items > .col.right-edge{
    clear: none !important;
    float: none !important;
  }

  /* Estructura interna e imágenes fluidas */
  .force-2-mobile .row.portfolio-items .inner-wrap,
  .force-2-mobile .row.portfolio-items .work-item{
    width: 100% !important;
  }
  .force-2-mobile .row.portfolio-items img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Neutralizar gutters “default/15px” con márgenes negativos */
  .force-2-mobile.row.portfolio-items[data-gutter],
  .force-2-mobile .row.portfolio-items[data-gutter],
  .force-2-mobile.row.portfolio-items[data-gutter="default"],
  .force-2-mobile .row.portfolio-items[data-gutter="default"],
  .force-2-mobile.row.portfolio-items[data-gutter="15px"],
  .force-2-mobile .row.portfolio-items[data-gutter="15px"]{
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px){
  .force-2-mobile .row.portfolio-items{
    gap: 0px !important;             /* pequeño espacio entre imágenes */
    padding-left: 0px !important;   /* mismo gutter que usa .container */
    padding-right: 0px !important;
    box-sizing: border-box;
  }
  .force-2-mobile .row.portfolio-items > .col{
    padding: 5px !important;
  }
}