/* Fichas con un ritmo visual acorde al tipo de plan. */

body.sgv2-detail[class*="sgv2-layout-"] .sgv2-detail-hero,
body.sgv2-detail[class*="sgv2-layout-"] .sgv2-highlight-grid article,
body.sgv2-detail[class*="sgv2-layout-"] .sgv2-route li,
body.sgv2-detail[class*="sgv2-layout-"] .sgv2-planning > * {
  transition: none;
}

/* Costa: la imagen y la preparación práctica tienen más peso. */
body.sgv2-layout-costa .sgv2-detail-hero { grid-template-columns: .84fr 1.16fr; }
body.sgv2-layout-costa .sgv2-detail-media { min-height: 610px; }
body.sgv2-layout-costa .sgv2-planning { grid-template-columns: .78fr 1.22fr; }
body.sgv2-layout-costa .sgv2-planning aside { order: -1; }
body.sgv2-layout-costa .sgv2-highlight-grid { grid-template-columns: 1.25fr .875fr .875fr; }
body.sgv2-layout-costa .sgv2-highlight-grid article:first-child { background: var(--page-accent); color: #fff; }
body.sgv2-layout-costa .sgv2-highlight-grid article:first-child > b { background: rgba(255,255,255,.18); color: #fff; }
body.sgv2-layout-costa .sgv2-highlight-grid article:first-child p { color: rgba(255,255,255,.84); }

/* Pueblo: lectura lineal, como un paseo por calles y plazas. */
body.sgv2-layout-pueblo .sgv2-detail-hero { grid-template-columns: .94fr 1.06fr; }
body.sgv2-layout-pueblo .sgv2-detail-media { min-height: 520px; }
body.sgv2-layout-pueblo .sgv2-highlight-grid { grid-template-columns: 1fr; gap: 10px; }
body.sgv2-layout-pueblo .sgv2-highlight-grid article { display: grid; grid-template-columns: 48px minmax(180px,.7fr) 1.3fr; gap: 18px; align-items: center; padding: 20px 24px; }
body.sgv2-layout-pueblo .sgv2-highlight-grid article > b { grid-column: 1; }
body.sgv2-layout-pueblo .sgv2-highlight-grid h3,
body.sgv2-layout-pueblo .sgv2-highlight-grid p { margin: 0; }
body.sgv2-layout-pueblo .sgv2-route { display: block; }
body.sgv2-layout-pueblo .sgv2-route ol { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 26px; }
body.sgv2-layout-pueblo .sgv2-route li { align-content: start; }
body.sgv2-layout-pueblo .sgv2-fit { grid-template-columns: 1.12fr .88fr; }

/* Patrimonio: imagen primero y bloques más editoriales. */
body.sgv2-layout-patrimonio .sgv2-detail-hero { grid-template-columns: 1.08fr .92fr; }
body.sgv2-layout-patrimonio .sgv2-detail-media { order: -1; min-height: 570px; }
body.sgv2-layout-patrimonio .sgv2-detail-copy { background: linear-gradient(145deg,#fff 0,var(--page-soft) 165%); }
body.sgv2-layout-patrimonio .sgv2-highlight-grid { gap: 28px; }
body.sgv2-layout-patrimonio .sgv2-highlight-grid article { border: 0; border-left: 4px solid var(--page-accent); border-radius: 0; box-shadow: none; background: transparent; padding: 8px 8px 8px 22px; }
body.sgv2-layout-patrimonio .sgv2-highlight-grid article > b { background: transparent; display: block; width: auto; height: auto; font-size: 13px; }
body.sgv2-layout-patrimonio .sgv2-highlight-grid h3 { margin-top: 10px; }
body.sgv2-layout-patrimonio .sgv2-route li { border-left: 5px solid var(--page-accent); }
body.sgv2-layout-patrimonio .sgv2-facts div:nth-child(odd) { background: var(--page-soft); }

/* Naturaleza: condiciones y observación se leen antes que el itinerario. */
body.sgv2-layout-naturaleza .sgv2-detail-hero { grid-template-columns: 1fr 1fr; }
body.sgv2-layout-naturaleza .sgv2-facts { gap: 10px; background: transparent; border: 0; overflow: visible; }
body.sgv2-layout-naturaleza .sgv2-facts div { border: 1px solid var(--sgv2-line); border-radius: 18px; background: var(--page-soft); }
body.sgv2-layout-naturaleza .sgv2-planning { grid-template-columns: 1fr 1fr; }
body.sgv2-layout-naturaleza .sgv2-checks { background: var(--page-soft); }
body.sgv2-layout-naturaleza .sgv2-highlight-grid article { border-top: 5px solid var(--page-accent); box-shadow: none; }
body.sgv2-layout-naturaleza .sgv2-route { grid-template-columns: .9fr 1.1fr; }

/* Panorámica: la fotografía abre la ficha y el recorrido se presenta de un vistazo. */
body.sgv2-layout-panoramica .sgv2-detail-hero { grid-template-columns: 1fr; }
body.sgv2-layout-panoramica .sgv2-detail-media { order: -1; min-height: 520px; max-height: 620px; }
body.sgv2-layout-panoramica .sgv2-detail-copy { padding-block: clamp(30px,4vw,48px); }
body.sgv2-layout-panoramica .sgv2-detail h1 { max-width: 980px; }
body.sgv2-layout-panoramica .sgv2-route { display: block; }
body.sgv2-layout-panoramica .sgv2-route ol { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 28px; }
body.sgv2-layout-panoramica .sgv2-route li { display: block; }
body.sgv2-layout-panoramica .sgv2-route li > b { margin-bottom: 14px; }
body.sgv2-layout-panoramica .sgv2-highlight-grid article { background: linear-gradient(180deg,#fff 0,var(--page-soft) 180%); }

/* Travesía: el recorrido es el centro y el paisaje se entiende por capas. */
body.sgv2-layout-travesia .sgv2-detail-hero { grid-template-columns: 1.08fr .92fr; }
body.sgv2-layout-travesia .sgv2-route { display: block; }
body.sgv2-layout-travesia .sgv2-route ol { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 28px; }
body.sgv2-layout-travesia .sgv2-route li { min-height: 128px; }
body.sgv2-layout-travesia .sgv2-highlight-grid { grid-template-columns: 1fr 1fr; }
body.sgv2-layout-travesia .sgv2-highlight-grid article:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 52px minmax(180px,.6fr) 1.4fr; gap: 18px; align-items: center; }
body.sgv2-layout-travesia .sgv2-highlight-grid article:first-child h3,
body.sgv2-layout-travesia .sgv2-highlight-grid article:first-child p { margin: 0; }

@media (max-width: 980px) {
  body.sgv2-detail[class*="sgv2-layout-"] .sgv2-detail-hero { grid-template-columns: 1fr; }
  body.sgv2-detail[class*="sgv2-layout-"] .sgv2-fit { grid-template-columns: 1fr; }
  body.sgv2-layout-costa .sgv2-detail-media,
  body.sgv2-layout-patrimonio .sgv2-detail-media,
  body.sgv2-layout-panoramica .sgv2-detail-media { min-height: 380px; }
  body.sgv2-layout-costa .sgv2-planning,
  body.sgv2-layout-naturaleza .sgv2-planning { grid-template-columns: 1fr; }
  body.sgv2-layout-costa .sgv2-planning aside { order: 0; }
  body.sgv2-layout-costa .sgv2-highlight-grid { grid-template-columns: 1fr; }
  body.sgv2-layout-pueblo .sgv2-highlight-grid article { grid-template-columns: 44px 1fr; }
  body.sgv2-layout-pueblo .sgv2-highlight-grid article p { grid-column: 2; }
  body.sgv2-layout-pueblo .sgv2-route ol,
  body.sgv2-layout-panoramica .sgv2-route ol,
  body.sgv2-layout-travesia .sgv2-route ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.sgv2-layout-travesia .sgv2-highlight-grid article:first-child { display: block; }
  body.sgv2-layout-travesia .sgv2-highlight-grid article:first-child h3 { margin: 18px 0 8px; }
}

@media (max-width: 680px) {
  body.sgv2-layout-patrimonio .sgv2-detail-media,
  body.sgv2-layout-panoramica .sgv2-detail-media { order: -1; }
  body.sgv2-layout-pueblo .sgv2-highlight-grid article { display: block; padding: 22px; }
  body.sgv2-layout-pueblo .sgv2-highlight-grid h3 { margin: 16px 0 8px; }
  body.sgv2-layout-pueblo .sgv2-route ol,
  body.sgv2-layout-panoramica .sgv2-route ol,
  body.sgv2-layout-travesia .sgv2-route ol,
  body.sgv2-layout-travesia .sgv2-highlight-grid { grid-template-columns: 1fr; }
  body.sgv2-layout-travesia .sgv2-highlight-grid article:first-child { grid-column: auto; }
  body.sgv2-layout-panoramica .sgv2-route li { display: grid; }
}