/* =========================================================
   MOTORHOME RUNNING COSTS ARTICLE
   Page-specific additions

   Loaded after motorhome-guides.css so other guide pages
   remain completely unaffected.
   ========================================================= */


/* =========================================================
   ARTICLE WIDTH PROTECTION
   ========================================================= */

.article-content {
  min-width: 0;
  max-width: 100%;
}

.article-content section {
  min-width: 0;
  max-width: 100%;
}


/* =========================================================
   HEADLINE COST STATISTICS
   ========================================================= */

.cost-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  max-width: 100%;
}

.cost-stat-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
  min-height: 150px;
  padding: 1.25rem;
  justify-content: space-between;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(12, 105, 128, .14);
  box-shadow: 0 12px 28px rgba(24, 34, 28, .08);
}

.cost-stat-value {
  font-family: var(--nav-font);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -.04em;
  color: #0c6980;
}

.cost-stat-label {
  font-size: .96rem;
  line-height: 1.35;
  font-weight: 700;
  color: #3f4750;
}


/* =========================================================
   COST TABLES

   The wrapper stays inside the article width.
   Wider tables can scroll horizontally on small screens
   without changing or corrupting their column widths.
   ========================================================= */

.cost-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 1.6rem 0;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  border: 1px solid rgba(12, 105, 128, .14);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 28px rgba(24, 34, 28, .06);

  box-sizing: border-box;
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.cost-table th,
.cost-table td {
  padding: .9rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(63, 71, 80, .12);
  box-sizing: border-box;
}

.cost-table thead th {
  background: #3f4750;
  color: #fff;
  font-family: var(--nav-font);
  font-weight: 600;
  letter-spacing: .02em;
}

.cost-table tbody tr:nth-child(even) td {
  background: rgba(92, 225, 230, .055);
}

.cost-table tfoot th,
.cost-table tfoot td {
  background: rgba(12, 105, 128, .11);
  color: #20262d;
  border-bottom: 0;
}


/* =========================================================
   COST NOTES
   ========================================================= */

.cost-note {
  padding-left: 1rem;
  border-left: 3px solid rgba(12, 105, 128, .45);
  color: #4f5c66 !important;
  font-size: 1rem !important;
}


/* =========================================================
   COST SCENARIO FEATURE BOX
   ========================================================= */

.cost-scenario {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1.5rem 0 2rem;
  padding: clamp(1.35rem, 3vw, 2rem);

  background: linear-gradient(
    135deg,
    #2b3138 0%,
    #48515a 100%
  );

  color: #fff;
  box-shadow: var(--shadow);
}

.cost-scenario-kicker {
  display: block;
  margin-bottom: .65rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5ce1e6;
}

.cost-scenario strong {
  display: block;
  font-family: var(--nav-font);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.035em;
}

.article-content .cost-scenario p {
  margin: 1rem 0 0;
  color: #fff;
  max-width: 66ch;
}


/* =========================================================
   AXLEATOR COMING SOON
   ========================================================= */

.axleator-coming-soon {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1.5rem 0;
  padding: clamp(1.35rem, 3vw, 2rem);

  background: rgba(92, 225, 230, .13);
  border: 1px solid rgba(12, 105, 128, .2);
  border-left: 5px solid var(--teal);
}

.axleator-badge {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .35rem .65rem;

  border-radius: 999px;
  background: #3f4750;
  color: #fff;

  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* =========================================================
   METHODOLOGY
   ========================================================= */

.methodology-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1.5rem 0;
  padding: clamp(1.25rem, 3vw, 1.8rem);

  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(12, 105, 128, .14);
}

.article-content .methodology-box p:last-child,
.article-content .axleator-coming-soon p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   SOURCE LINKS
   ========================================================= */

.source-list a {
  text-decoration: underline;
  text-decoration-color: rgba(12, 105, 128, .35);
  text-underline-offset: .22em;
}

.source-list a:hover,
.source-list a:focus-visible {
  text-decoration-color: currentColor;
}


/* =========================================================
   FAQ
   ========================================================= */

.cost-faq h4 {
  padding-top: .55rem;
  border-top: 1px solid rgba(63, 71, 80, .12);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 860px) {

  .cost-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   SMALLER DEVICES

   Do NOT force column percentages here.
   Two-column tables can shrink naturally.
   Wider tables retain sensible column widths and scroll.
   ========================================================= */

@media (max-width: 700px) {

  .cost-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .cost-table {
    width: 100%;
    max-width: none;
    font-size: .88rem;
  }

  .cost-table th,
  .cost-table td {
    padding: .7rem .65rem;
    font-size: .88rem;
    line-height: 1.4;
    vertical-align: top;
  }

  /*
     Do not break ordinary text in the middle of words.
     Long URLs or unusually long strings can still wrap.
  */

  .cost-table td {
    overflow-wrap: break-word;
    word-break: normal;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .cost-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
  }

  .cost-stat-card {
    min-height: 125px;
    padding: 1rem;
  }

  .cost-stat-value {
    font-size: clamp(1.75rem, 9vw, 2.4rem);
  }

  .cost-stat-label {
    font-size: .88rem;
  }

  /*
     A little extra room around the scrollbar so the final
     row does not sit directly against it.
  */

  .cost-table-wrap {
    padding-bottom: 2px;
  }

  .cost-table th,
  .cost-table td {
    padding: .65rem .55rem;
    font-size: .84rem;
    line-height: 1.4;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

  .cost-stat-grid {
    gap: .55rem;
  }

  .cost-stat-card {
    min-height: 115px;
    padding: .85rem;
  }

  .cost-stat-value {
    font-size: clamp(1.55rem, 8vw, 2.1rem);
  }

  .cost-stat-label {
    font-size: .82rem;
    line-height: 1.3;
  }

  .cost-table th,
  .cost-table td {
    padding: .6rem .5rem;
    font-size: .81rem;
    line-height: 1.35;
  }

}


/* =========================================================
   OPTIONAL SCROLLBAR STYLING
   Only appears when a table actually needs horizontal scroll.
   ========================================================= */

.cost-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: #0c6980 rgba(63, 71, 80, .10);
}

.cost-table-wrap::-webkit-scrollbar {
  height: 7px;
}

.cost-table-wrap::-webkit-scrollbar-track {
  background: rgba(63, 71, 80, .10);
}

.cost-table-wrap::-webkit-scrollbar-thumb {
  background: #0c6980;
  border-radius: 999px;
}