/* /assets/css/benly-layout-tune.css
   BENLY top-page refinements. Loaded after library.css so the desktop-only
   adjustment never changes the SP daytime subheader. */

/* The representative image uses a restrained photographic-print edge instead
   of a flat UI line. */
body[data-page="benly"] .benly-overview-figure img {
  border: 3px solid #e8e8e3;
  outline: 1px solid #303432;
  box-shadow:
    inset 0 0 0 1px #bfc2bf,
    0 3px 3px rgba(18, 22, 20, .24),
    0 9px 14px rgba(18, 22, 20, .36);
}

/* Make the year ruler a high-contrast field without changing its geometry. */
body[data-page="benly"] .benly-year-ruler {
  background: #050505;
  border-bottom-color: #050505;
}

body[data-page="benly"] .benly-year-tick {
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
}

body[data-page="benly"] .benly-year-tick::after {
  background: #c7cbc8;
}

/* The generated image markup remains entirely inert in the completed SP view. */
body[data-page="benly"] .benly-model-node-media {
  display: none;
}

@media (min-width: 768px) {
  /* PC removes the BENLY subheader completely. The SP replacement remains
     governed by library.css's max-width:767px rules. */
  body[data-page="benly"][data-theme="dawn"] .dawn-subheader--pc {
    display: none !important;
  }

  /* With the subheader gone, the overview becomes the first content block.
     Remove the old upward overlap that was tailored to that subheader. */
  body[data-page="benly"] .benly-overview-figure {
    top: 0;
    margin: 0;
  }

  body[data-page="benly"] .benly-overview,
  body[data-page="benly"] .benly-overview.has-image {
    min-height: 0;
  }

  body[data-page="benly"] .benly-overview h1 {
    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  }

  /* PC reading balance: retain the completed SP layout unchanged. */
  body[data-page="benly"] .benly-overview,
  body[data-page="benly"] .benly-overview.has-image {
    /* Leave one readable line between the introduction and the filmstrip. */
    margin-bottom: 1.1rem;
  }

  body[data-page="benly"] .benly-overview-figure {
    /* Match the right edge of the chart while retaining the reduced height. */
    width: 100%;
    height: 236px;
    justify-self: start;
  }

  body[data-page="benly"] .benly-overview h1 {
    font-size: clamp(1.9rem, 3.55vw, 2.4rem);
    -webkit-text-stroke-width: 3px;
  }

  @supports not (-webkit-text-stroke: 1px #000) {
    body[data-page="benly"] .benly-overview h1 {
      text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000;
    }
  }

  body[data-page="benly"] .benly-overview-body {
    margin-top: 1.12rem;
    font-size: 1.1rem;
    line-height: 1.72;
  }

  /* The lineage-strip heading and the chart heading use one visual level. */
  body[data-page="benly"] .benly-section-heading h2 {
    font-size: 1.35rem;
  }

  /* PC lineage cards use a simple two-row information order: a full-bleed
     16:9 vehicle image, then one line for name and model year. */
  body[data-page="benly"] .benly-model-node {
    isolation: isolate;
    overflow: hidden;
    width: 140px;
    min-height: 0;
    height: 104px;
    padding: 0;
  }

  body[data-page="benly"] .benly-model-node-media {
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    display: block;
    width: 100%;
    height: 78.75px;
    margin: 0;
    pointer-events: none;
  }

  body[data-page="benly"] .benly-model-node-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="benly"] .benly-model-node-info {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
    height: 25.25px;
    padding: 0 .48rem;
  }

  body[data-page="benly"] .benly-model-node strong {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    font-size: .93rem;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body[data-page="benly"] .benly-model-node small {
    flex: 0 0 auto;
    margin: 0;
    color: #3f4743;
    font-size: .76rem;
    line-height: 1;
    white-space: nowrap;
  }

  body[data-page="benly"] .benly-model-node[aria-pressed="true"] small {
    color: #fff;
  }
}

@media (max-width: 767px) {
  /* Mobile only: a slightly more generous reading block, while keeping the
     completed desktop layout exactly as it is. */
  body[data-page="benly"] .benly-overview h1 {
    font-size: 1.6rem;
  }

  body[data-page="benly"] .benly-overview-body {
    margin-top: 1rem;
    font-size: 1.07rem;
  }

  body[data-page="benly"] .benly-overview,
  body[data-page="benly"] .benly-overview.has-image {
    margin-bottom: 2rem;
  }

  body[data-page="benly"] .benly-overview::after {
    height: 160px;
  }

  body[data-page="benly"] .benly-overview-figure,
  body[data-page="benly"] .benly-overview-figure img {
    height: 160px;
  }
}