/* =========================================================
   fiber.css (model-agnostic)
   - Consolidated page-level <style> rules from van model pages
   - Keeps your existing rails (.site-container/.cards-container/.threesixty-container)
   - Adds reusable 360 carousel + interior iframe scaling (no Ford-specific IDs)
   ========================================================= */


/* =========================
   Global / typography
   ========================= */

img.model-logo {
  padding-bottom: 15px;
  max-width: 650px;
}

/* Match the van pages' heading weight + spacing */
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-bottom: 0.5rem;
  font-weight: 900;
}

/* If you use .display-3 for section titles on van pages */
.display-3 {
  font-size: 2.5rem !important;
}

/* Base text styling (merged from your existing + van page inline styles) */
body {
  margin: 0;
  padding: 0;
  font-family: lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Some pages used this; keeping it */
h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}

/* Some pages used this; keeping it */
.h2, h2 {
  font-size: 1.0625rem;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.section-header {
  font-size: 1.7em;
  font-weight: 700;
  color: #a3a3a3;
}

.point-header {
  font-size: 1.5em;
  font-weight: 700;
  color: #5a5a5a;
  margin-bottom: 0.3em;
}

.faded-underline {
  background: -webkit-gradient(linear, left top, right top, from(rgba(228,124,71,0.5)), to(rgba(228,124,71,0)));
  background: linear-gradient(to right, rgba(228,124,71,0.5) 0, rgba(228,124,71,0) 75%);
}

h6.title-gray {
  text-transform: uppercase;
}

p.small {
  font-size: 0.9rem;
  line-height: 1rem;
}


/* =========================
   Layout helpers / wrappers
   ========================= */

section .container {
  height: 100%;
  vertical-align: middle;
}

section .container .row {
  height: 100%;
}

#model-info .row {
  height: 100%;
  vertical-align: middle;
}

#model-info .row .feature-text {
  height: 100%;
}

.content-wrapper {
  padding-top: 95px;
}

@media (max-width: 991px) {
  .content-wrapper {
    padding-top: 50px;
  }
}


/* =========================
   Links / included models
   ========================= */

.included-models {
  border-bottom: 1px solid #d1d1d1;
  max-width: 250px;
}

p.included-models a {
  color: #5a5a5a;
  transition: 0.3s;
}

p.included-models a:hover {
  color: #da5e27;
}

#model-features p a {
  display: inline-block;
  color: #5a5a5a;
  transition: 0.3s;
}

#model-features p a:hover,
.flipbox a:hover {
  color: #da5e27 !important;
}

.flipbox a.btn:hover {
  color: #fff !important;
}

p.included-models:after {
  display: block;
  content: '';
  border-bottom: solid 2px #da5e27;
  transform: scaleX(0);
  transition: transform 300ms ease-in-out;
}

p.included-models.fromLeft:after { transform-origin: 100% 50%; }
p.included-models.fromLeft:hover:after { transform: scaleX(1); transform-origin: 0% 50%; }

#model-features h6 {
  font-size: 1rem;
}

#model-features .faded-underline {
  margin-bottom: 5px;
}


/* =========================
   Tables (moved from inline)
   ========================= */

.table.table-striped .display-6.title-gray {
  color: #5a5a5a !important;
  border-bottom: 1px solid #da5e27 !important;
}

.table {
  --bs-table-color: #60697b;
  --bs-table-bg: transparent;
  --bs-table-border-color: #edeff3;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #60697b;
  --bs-table-striped-bg: rgba(164, 174, 198, 0.07);
  --bs-table-active-color: #60697b;
  --bs-table-active-bg: rgba(164, 174, 198, 0.07);
  --bs-table-hover-color: #60697b;
  --bs-table-hover-bg: rgba(164, 174, 198, 0.07);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: rgb(0 0 0 / 7%);
}


/* =========================
   Buttons / shadows
   ========================= */

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
  background-color: #bb5224;
  border-color: #bb5224;
}

.btn-learn-more,
img.feature-image {
  box-shadow: 0px 2px 8px rgba(0,0,0,0.35);
  border-radius: 5px;
}

.btn-learn-more {
  z-index: 3;
}

img.feature-image {
  border-radius: 10px;
}


/* =========================
   Image / component helpers
   ========================= */

img.feature-img-vans {
  max-width: 100%;
}

.double-faded-underline {
  margin-bottom: 3em;
}

/* Used by some exterior viewer wrapper */
.cd-product-viewer-wrapper {
  padding: 0;
}

/* If you still use this utility */
.fiber-exterior {
  height: 550px;
}

/* Arrows (carousel icon color invert) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}

/* Older image compare container */
.cd-image-container {
  position: relative;
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}

.rounded-left {
  border-radius: 10px 0 0 10px;
}

.rounded-right {
  border-radius: 0 10px 10px 0;
}

@media (max-width: 991px) {
  .rounded-left { border-radius: 0; }
  .rounded-right { border-radius: 0; }
}


/* =========================
   Flip cards
   ========================= */

a.btn.btn-sm.model-title {
  font-size: 20px;
  color: #fff !important;
  text-align: center;
  background-color: #b3b3b3;
  border-radius: 100px 100px 0 0;
  transition: 0.7s;
}

a.btn.btn-sm.model-title:hover {
  background-color: #da5e27;
}

.flipbox {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  z-index: 1;
  margin-bottom: 5px;
  width: 100%;
  margin: 0 8px 5px 8px;
}

.flipbox_inner {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
  cursor: pointer;
  border-radius: 0 0 20px 20px;
}

.flipbox_front,
.flipbox_back {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(0);
  -webkit-transform: rotateY(0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.7s ease, -webkit-transform 0.7s ease;
  border-radius: 40px 40px 20px 20px;
}

.flipbox_front {
  background: transparent;
  transform: rotateY(0deg);
}

.flipbox .flipbox_inner.flipped {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flipbox_back {
  background: transparent;
  text-align: center;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flipbox .flipbox_back h3 {
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
}

.flipbox-content {
  filter: drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.15));
}

.inner-front,
.inner-back {
  background-color: rgba(0,0,0,0.05);
  border-radius: 0 0 20px 20px;

  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem));
  background: linear-gradient(#8f8f8f, #fff 75%);
  border-radius: 5px 5px 0 0;
}

.inner-front p.title-gray,
.inner-back p.title-gray,
.inner-front img,
.inner-back img {
  padding-left: 8px;
  padding-right: 8px;
}

.inner-title-front {
  font-size: 16px;
  color: #fff !important;
  text-align: center;
  background-color: #5a5a5a;
  border-radius: 5px 5px 0 0;
  transition: 0.7s;
  padding: 10px;
}

.inner-title-back {
  font-size: 16px;
  color: #fff !important;
  text-align: center;
  background-color: #da5e27;
  border-radius: 5px 5px 0 0;
  transition: 0.7s;
  padding: 10px;
}

/* Make all card title bars the same height (2 lines max) */
.inner-title-front,
.inner-title-back {
  display: -webkit-box;            /* line clamp support */
  -webkit-box-orient: vertical;

  line-clamp: 2;                   /* standard */
  -webkit-line-clamp: 2;           /* webkit */

  overflow: hidden;
  white-space: normal;
  line-height: 1.2;
  height: 48px;                    /* tweak: 44–56 */
  padding: 10px;
  text-align: center;
}


/* =========================
   Tabs (moved from inline)
   ========================= */

.nav-link.length-tab.active {
  background-color: #f6f7f9 !important;
}

.nav-link.length-tab:hover {
  background-color: #f6f7f9 !important;
}

a.nav-link.length-tab {
  padding-bottom: 0px;
}

.nav-link.length-tab .arrow-down {
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.nav-link.length-tab.active .arrow-down {
  width: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #da5e27;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}


/* =========================
   Rails / containers
   ========================= */

/* default page rail */
.site-container {
  width: 100%;
  max-width: 1350px;   /* body/features */
  margin: 0 auto;
  padding-inline: 1rem;
}

/* tighter rail for card grids */
.cards-container {
  width: 100%;
  max-width: 1200px;   /* flip cards */
  margin: 0 auto;
  padding-inline: 1rem;
}

/* tighter rail for 360s (KEEPING YOUR EXISTING SIZE) */
.threesixty-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: 1rem;
}


/* =========================================================
   VAN 360 (MODEL-AGNOSTIC)
   Works for ANY model page as long as:
   - the section uses .threesixty-container (you already do)
   - the interior iframe uses class="fiber-interior"
   - OPTIONAL: add class="van-360-carousel" to the carousel wrapper
              and class="van-cutout" to the cutout images for best targeting
   ALSO: includes a fallback that targets sections with ids ending in "360s"
   ========================================================= */

/* --- Exterior carousel (preferred class-based targeting) --- */
.van-360-carousel .carousel-inner {
  width: 100%;
}

.van-360-carousel .carousel-item {
  text-align: center;
}

.van-360-carousel img.van-cutout {
  width: min(100%, 1100px);  /* adjust cap if desired */
  height: auto;
  max-height: none;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Kill legacy inline limits (max-height/max-width) if present */
.van-360-carousel img.van-cutout[style] {
  max-height: none !important;
  max-width: 100% !important;
}

.van-360-carousel .carousel-control-prev,
.van-360-carousel .carousel-control-next {
  width: 8%;
}

/* --- Exterior carousel (fallback targeting: section ids like Ford-360s, Mercedes-360s, etc.) --- */
section[id$="360s"] .carousel .carousel-inner {
  width: 100%;
}

section[id$="360s"] .carousel .carousel-item {
  text-align: center;
}

/* Targets the typical "cutout" carousel images even if you don't add .van-cutout yet */
section[id$="360s"] .carousel .carousel-item img {
  width: min(100%, 1100px);
  height: auto;
  max-height: none;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Overrides legacy inline max-height/max-width on those images */
section[id$="360s"] .carousel .carousel-item img[style] {
  max-height: none !important;
  max-width: 100% !important;
}

/* --- Interior 360 iframe (model-agnostic) --- */
iframe.fiber-interior {
  width: 100%;
  aspect-ratio: 16 / 9; /* tweak if your viewer is taller/shorter */
  height: auto;
  border: 0;
  display: block;
  max-height: none;
}

/* Optional: adjust interior ratio on larger screens if desired */
@media (min-width: 992px) {
  iframe.fiber-interior {
    aspect-ratio: 16 / 9;
  }
}