/* ==========================================================================
   Route Post Template — routes.css
   Extends the existing post-sidebar/post-wrap pattern from screen.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fluid Typography (route pages only)
   -------------------------------------------------------------------------- */
.route-post .post-content {
   font-size: clamp(1.7rem, 1.4rem + 0.6vw, 2rem);
}

.route-post .post-content h1 { font-size: clamp(2.8rem, 1.6rem + 3vw, 5.8rem); }
.route-post .post-content h2 { font-size: clamp(2.2rem, 1.4rem + 2vw, 4rem); }
.route-post .post-content h3 { font-size: clamp(1.9rem, 1.2rem + 1.5vw, 3.2rem); }
.route-post .post-content h4 { font-size: clamp(1.7rem, 1.2rem + 1vw, 2.4rem); }
.route-post .post-content h5 { font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2rem); }
.route-post .post-content p  { line-height: 1.65; }

.route-post .post-content blockquote {
   font-size: clamp(2rem, 1.4rem + 1.2vw, 2.6rem);
}


/* --------------------------------------------------------------------------
   2. Stats Sidebar — desktop
   .post-sidebar is already: position:absolute, right:5vw, width:290px, height:100%
   We add: position:sticky on the inner card, constrained with width:100%
   -------------------------------------------------------------------------- */
.route-stats {
   position: sticky;
   top: 3vh;
   /* Override legacy screen.css full-bleed rule that sets margin-left:-50vw, width:100vw, left:50% */
   width: 100%;
   left: auto;
   margin-left: 0;
   margin-right: 0;
   box-sizing: border-box;
   background: var(--color-five);
   border-radius: var(--border-radius);
   padding: clamp(1.4rem, 2vw, 2rem);
}

.route-stats-title {
   font-family: var(--font-family-one);
   font-weight: var(--font-weight-one-bold);
   font-size: clamp(1.5rem, 1.2rem + 0.6vw, 1.9rem);
   margin: 0 0 1rem;
   padding-bottom: 1rem;
   border-bottom: var(--border) var(--color-border-one);
   color: var(--color-font-one);
}


/* --------------------------------------------------------------------------
   3. Stats table inside sidebar

   JS moves the <table> (or its KG wrapper) from post content into
   #route-stats-sidebar. We override table display so rows render as
   compact label+value pairs, and strip all browser/theme table defaults.
   -------------------------------------------------------------------------- */

/* KG HTML card wrapper — remove its own spacing */
.route-stats .kg-html-card,
.route-stats .kg-html-card-container {
   margin: 0;
   padding: 0;
}

.route-stats table,
.route-stats table thead,
.route-stats table tbody,
.route-stats table tfoot,
.route-stats table tr,
.route-stats table th,
.route-stats table td {
   display: block !important;
   border: none !important;
   border-bottom: none !important;
   padding: 0 !important;
   margin: 0 !important;
   background: transparent !important;
   width: auto !important;
   box-shadow: none !important;
}

.route-stats table tr {
   display: flex !important;
   flex-direction: column;
   gap: 0.15rem;
   margin-top: 0.75rem !important;
}

.route-stats table tr:first-child {
   margin-top: 0 !important;
}

/* Label cell */
.route-stats table td:first-child {
   font-size: 1rem;
   font-weight: var(--font-weight-three-medium);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   opacity: var(--opacity-two);
   color: var(--color-font-one);
   line-height: 1;
}

/* Value cell */
.route-stats table td:last-child {
   font-size: 1.3rem;
   font-weight: var(--font-weight-three-bold);
   color: var(--color-font-one);
   line-height: 1.2;
}


/* --------------------------------------------------------------------------
   4. KG Button cards inside sidebar

   JS moves .kg-button-card elements (and any other siblings after the table)
   into the sidebar. The first card gets a top separator; subsequent cards
   stack tightly below.
   -------------------------------------------------------------------------- */

/* Separator between stats table and first button */
.route-stats table ~ .kg-card {
   margin-top: 1.4rem;
   padding-top: 1.2rem;
   border-top: var(--border) var(--color-border-one);
   width: 100%;
}

/* Subsequent buttons: no separator, small gap */
.route-stats table ~ .kg-card + .kg-card {
   margin-top: 0.6rem;
   padding-top: 0;
   border-top: none;
}

/* KG button fills sidebar width, centered */
.route-stats .kg-button-card {
   text-align: center;
}
.route-stats .kg-button-card .kg-btn {
   width: 100%;
   display: block;
   text-align: center;
   box-sizing: border-box;
}

/* Members note (legacy plain-HTML fallback) */
.route-stats .route-members-note,
.route-stats p.route-members-note {
   margin: 0.5rem 0 0;
   font-size: 1rem;
   line-height: 1.4;
   opacity: var(--opacity-two);
   color: var(--color-font-one);
   text-align: center;
}

/* Toggle card in sidebar = expandable caption beneath button */
.route-stats .kg-toggle-card,
.route-stats .kg-toggle-card *,
.route-stats .kg-toggle-card *:before,
.route-stats .kg-toggle-card *:after {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   outline: none !important;
}
.route-stats .kg-toggle-card {
   padding: 0;
}
.route-stats .kg-toggle-card .kg-toggle-heading {
   padding: 0;
   justify-content: center;
   gap: 0.25rem;
}
.route-stats .kg-toggle-card .kg-toggle-heading-text {
   font-size: 1rem;
   font-weight: normal;
   text-transform: none;
   letter-spacing: normal;
   opacity: var(--opacity-two);
   color: var(--color-font-one);
   text-align: center;
}
.route-stats .kg-toggle-card .kg-toggle-card-icon {
   flex-shrink: 0;
   opacity: var(--opacity-two);
   width: 14px;
   height: 14px;
}
.route-stats .kg-toggle-card .kg-toggle-card-icon svg {
   width: 14px;
   height: 14px;
}
.route-stats .kg-toggle-card .kg-toggle-content {
   padding: 0.5rem 0 0;
}
.route-stats .kg-toggle-card .kg-toggle-content p {
   font-size: 1rem;
   line-height: 1.4;
   opacity: var(--opacity-two);
   color: var(--color-font-one);
   margin: 0;
   text-align: center;
}


/* --------------------------------------------------------------------------
   5. In-content Stats Table

   Desktop (>1024px): hidden until JS runs (FOUC guard). After JS moves the
   table to the sidebar, this rule no longer matches it.
   Mobile/tablet (≤1024px): JS doesn't run, table stays in content and is
   styled as a 2-column grid stats card.
   -------------------------------------------------------------------------- */

/* Desktop: hide in content (JS will move it to sidebar) */
@media (min-width: 1025px) {
   .route-post-content table {
      display: none;
   }
}

/* Mobile/tablet: beautiful stats card */
@media (max-width: 1024px) {
   /* Override all table-display values so we can use grid */
   .route-post-content table,
   .route-post-content table tbody,
   .route-post-content table tr,
   .route-post-content table td {
      display: block;
      border: none;
      padding: 0;
      margin: 0;
   }

   .route-post-content table {
      background: var(--color-five);
      border-radius: var(--border-radius);
      padding: clamp(1.4rem, 3vw, 2rem);
      margin-top: clamp(1.5rem, 3vw, 2.5rem);
      margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
   }

   /* Grid of stat tiles: 2 columns */
   .route-post-content table tbody {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 3vw, 2rem);
   }

   /* Each row = one stat tile, label stacked over value */
   .route-post-content table tr {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
   }

   /* Label cell */
   .route-post-content table td:first-child {
      font-family: var(--font-family-three);
      font-size: clamp(1rem, 0.85rem + 0.3vw, 1.15rem);
      font-weight: var(--font-weight-three-medium);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: var(--opacity-two);
      color: var(--color-font-one);
   }

   /* Value cell */
   .route-post-content table td:last-child {
      font-family: var(--font-family-three);
      font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.7rem);
      font-weight: var(--font-weight-three-bold);
      color: var(--color-font-one);
      line-height: 1.2;
   }
}

/* Narrow phones: single column */
@media (max-width: 420px) {
   .route-post-content table tbody {
      grid-template-columns: 1fr;
   }
}


/* --------------------------------------------------------------------------
   6. KG card refinements for route posts
   -------------------------------------------------------------------------- */
.route-post .post-content .kg-toggle-card + .kg-toggle-card {
   margin-top: -0.5rem;
}

.route-post .post-content .kg-gallery-card {
   margin-top: clamp(2rem, 4vw, 3.5rem);
   margin-bottom: clamp(2rem, 4vw, 3.5rem);
}