/* ============================================================
   INBOOST - Orden de los bloques de la ficha de vehiculo
   Referencia de orden: tufurgoneta.es

   Objetivo en movil:
     1 galeria  2 titulo  3 precio  4 entrega  5 CTAs
     6 financiacion  7 especificaciones  8 descripcion
     9 compartir / relacionados

   OJO: la ficha tiene DOS maquetaciones distintas y hay que
   cubrir las dos:

   (A) Movil real (wp_is_mobile() == true) -> layout-mobile.php,
       que pinta .detail-sections > .detail-section-*.
       Es lo que ve un telefono.

   (B) Layout "modern-1" de escritorio apilado: dos columnas
       Bootstrap que se apilan por debajo de 768px. Es lo que se
       ve al estrechar el navegador o en tablets que piden la
       version de escritorio.

   Tecnica en ambos casos: el contenedor pasa a flex column y los
   envoltorios intermedios a display:contents, de modo que sus
   hijos suben a ser items del flex y se pueden reordenar con
   `order` sin tocar plantillas PHP.
   ============================================================ */


/* ------------------------------------------------------------
   (A) MOVIL REAL - .detail-sections
   Sin media query: este marcado solo existe cuando el tema
   decide que el visitante es movil.
   ------------------------------------------------------------ */

.detail-sections {
	display: flex;
	flex-direction: column;
}

/* short-desc envuelve precio + calculadora + entrega, y tabs
   envuelve especificaciones + descripcion: los abrimos para
   poder separar su contenido. */
.detail-sections > .detail-section-short-desc,
.detail-sections > .detail-section-tabs {
	display: contents;
}

/* Cualquier bloque no contemplado abajo, al final. */
.detail-sections > * {
	order: 50;
}

.detail-section-short-desc > *,
.detail-section-tabs > * {
	order: 50;
}

.detail-sections .detail-section-gallery               { order: 1; }
.detail-sections .detail-section-title                 { order: 2; }
.detail-sections .ib-prices                            { order: 3; }
.detail-sections .price.car-price                      { order: 4; }
.detail-sections .ib-delivery                          { order: 5; }
.detail-sections .detail-section-btn-request-more-info  { order: 6; }
.detail-sections .detail-section-btn-buy-online        { order: 7; }
.detail-sections #ib-calc-holder                       { order: 8; }
.detail-sections .ib-specs-wrap                        { order: 9; }
.detail-sections #tab-accordion                        { order: 10; }
.detail-sections .detail-section-post-actions          { order: 11; }
.detail-sections .detail-section-related-vehicles      { order: 12; }
.detail-sections .detail-section-sidebar-widgets       { order: 13; }

/* Separacion entre los bloques que suben de nivel. */
.detail-sections .ib-specs-wrap,
.detail-sections #ib-calc-holder {
	margin-top: 24px;
}


/* ------------------------------------------------------------
   (B) LAYOUT "modern-1" APILADO (< 768px)
   Las columnas col-lg-8 (galeria + descripcion) y col-lg-4
   (titulo + precio + CTAs) se apilan, y la descripcion larga
   quedaba ANTES del titulo, del precio y de los botones.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

	.car-detail-layout-modern-1 .container > .row {
		display: flex;
		flex-direction: column;
		margin-left: 0;
		margin-right: 0;
	}

	.car-detail-layout-modern-1 .container > .row > div,
	.car-detail-layout-modern-1 .container > .row .car-details-sidebar {
		display: contents;
	}

	.car-detail-layout-modern-1 .container > .row > div > *,
	.car-detail-layout-modern-1 .container > .row .car-details-sidebar > * {
		order: 50;
		width: 100%;
	}

	.car-detail-layout-modern-1 .container > .row .slider-slick                { order: 1; }
	.car-detail-layout-modern-1 .container > .row h1.car-title                 { order: 2; margin-top: 18px; }
	.car-detail-layout-modern-1 .container > .row .vehicle-subtitle-attributes { order: 3; }
	.car-detail-layout-modern-1 .container > .row .ib-prices                   { order: 4; }
	.car-detail-layout-modern-1 .container > .row .price.car-price             { order: 5; }
	.car-detail-layout-modern-1 .container > .row .ib-delivery                 { order: 6; }
	.car-detail-layout-modern-1 .container > .row .aside-lead-form-btn         { order: 7; }
	.car-detail-layout-modern-1 .container > .row .car-vehicle-buy-online      { order: 8; margin-top: 10px; }
	.car-detail-layout-modern-1 .container > .row #ib-calc-holder              { order: 9; margin-top: 24px; }
	.car-detail-layout-modern-1 .container > .row .ib-specs-wrap               { order: 10; margin-top: 30px; }
	.car-detail-layout-modern-1 .container > .row #tabs,
	.car-detail-layout-modern-1 .container > .row #tab-accordion               { order: 11; }
	.car-detail-layout-modern-1 .container > .row .details-nav                 { order: 12; }
	.car-detail-layout-modern-1 .container > .row .car-detail-post-option      { order: 13; }
}