/* ==========================================================================
   One Identity — Customer Stories listing

   The one thing the shared listing component has no rule for: a card whose
   top is a thumbnail with a ribbon across it. Everything else on this page —
   the grid, the card text, the colours, the face — comes from
   assets/css/oi-listing.css, which is enqueued first and which this file
   depends on.

   Enqueued only on the page using the Customer Stories Listing template, by
   inc/customer-stories-listing/customer-stories-listing.php. Nothing else on
   the site parses it.

   WHY THIS IS A SEPARATE FILE AND NOT A SECTION OF oi-listing.css
   That stylesheet is shared by the A-Z Product Index, Contact Sales and
   Trials, all three live. The cheapest way to add a card variant without
   putting those three at risk is to leave their file alone and layer on top
   of it. Nothing here redefines a shared rule for everyone: every override
   is scoped by .oi-list-card-media or .oi-list-wrap-quad, classes no other
   listing uses.

   Hand-written, NOT compiled from SCSS. Same reason oi-listing.css is not:
   it is one page's, and folding it into theme.scss would ship it on all of
   them. Do not look for a source partial in assets/sass/ — this file is the
   source.

   Colours come from the tokens oi-listing.css puts on .oi-list, with the
   literal as a fallback, except for the ribbon — see the note on it below.
   ========================================================================== */

/* ⚠️ THE WIDTH IS NOT SET HERE. IT COMES FROM .container IN THE MARKUP.

   On a page the theme deliberately takes the width limit off the content, so
   that blocks can run full bleed — theme.css, body.page #oi-content-wrap
   .container, where max-width goes back to 100% and the side padding to 0.
   Every OI block then puts its own .container inside itself, and the legacy
   library did the same, opening with a div.container right before the
   filters.

   So the renderer wraps the listing in .container and the 750 / 970 / 1170px
   steps come from theme.css, one definition for the whole site. Nothing here
   declares a width: a second one would be a number to keep in step by hand,
   and the day the site's container changes this page would be the one that
   did not follow.

   Remove that wrapper and the grid goes full bleed. It is not a visual
   detail of this file, it is the only thing holding the page to its column. */

/* The gap above the grid.

   It belongs here and not in oi-listing.css, which says so itself: a listing
   that renders from a template, as this one does, has nothing above it to
   space itself from and sets its own separation where whoever reads the
   template can see it. A listing inside an OI - HTML block gets the gap from
   that block's Style group instead, which is why the shared file carries no
   top margin at all. */
.oi-list-stories {
  margin-top: 60px;
}

/* --------------------------------------------------------------------------
   The grid: four across.
   -------------------------------------------------------------------------- */

/* Read off the legacy grid, which put col-md-3 col-sm-4 col-xs-12 on every
   card: four from 992px, three from 768px, one below that. The shared
   .oi-list-wrap tops out at two, because two is what a wide text card wants.

   Written as .oi-list-wrap.oi-list-wrap-quad, two classes, so it outranks
   .oi-list-wrap on specificity rather than on being printed afterwards. The
   print order is correct today — this file declares oi-listing.css as its
   dependency — but a rule that only wins on order is a rule that breaks the
   day someone changes an enqueue. */
.oi-list-wrap.oi-list-wrap-quad {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .oi-list-wrap.oi-list-wrap-quad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .oi-list-wrap.oi-list-wrap-quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   The card.
   -------------------------------------------------------------------------- */

/* The shared card is a padded panel on a tinted background. The story card
   is not: a bordered thumbnail, then text on the page background, exactly as
   the legacy one. So the panel is undone rather than a second card class
   invented — the two stay one component, and a change to the shared card's
   typography still reaches this page. */
.oi-list-card.oi-list-card-media {
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* The whole card is one link, so the link is the flex column the card used
   to be. height: 100% is what makes every card in a row the same height,
   which is what lets the date line below sit on a shared baseline. */
.oi-list-card-media .oi-list-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Only the heading underlines on hover. Underlining the whole card would
   underline the date line and the summary too, which is what happens if the
   anchor is left to the theme's default. */
.oi-list-card-media .oi-list-card-link:hover,
.oi-list-card-media .oi-list-card-link:focus {
  text-decoration: none;
}

.oi-list-card-media .oi-list-card-link:hover .oi-list-card-title,
.oi-list-card-media .oi-list-card-link:focus-visible .oi-list-card-title {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   The thumbnail.
   -------------------------------------------------------------------------- */

/* Legacy wrapped the picture in .img-border plus .img-crop: a 1px rule, and
   a fixed height per breakpoint — 237px below 768, 158px to 991, 153px to
   1199, 194px above — because it had no aspect-ratio to work with.

   Measured against the Bootstrap column each of those sat in, they are
   ratios of 1.46, 1.39, 1.35 and 1.35. 4/3 is 1.333: inside that band at
   every step, and unlike a pixel height it does not distort when our 24px
   grid gap replaces Bootstrap's 30px of column padding.

   The ratio is on the wrapper, not the image, so a story with no picture at
   all keeps its slot and the rows stay aligned instead of one card riding
   up. */
.oi-list-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--oi-list-loblolly, #CAD4D7);
  background: var(--oi-list-surface, #FFF);
}

.oi-list-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The ribbon. Legacy: absolute, full width, 30px line, 10px of left padding,
   92% opacity, over #003876.

   Anchored to the BOTTOM, which legacy was not: it used top: 75% over an
   .img-crop of a fixed height per breakpoint, so the strip of image left
   below the ribbon came out at 8px, 9px, 18px and 29px depending on the
   width — the same declaration landing in four different places. A 10px
   offset from the bottom is inside that range and is the same at every size,
   which is also one number to change if it wants to sit higher or lower.

   #003876 is not a theme token and is left as a literal on purpose. It is
   the legacy .casestudy ribbon colour and nothing else in the theme uses it.
   If a second asset type ever gets a ribbon of its own, promote it then —
   see the same note about loblolly at the top of oi-listing.css. */
.oi-list-badge {
  position: absolute;
  top: auto;
  bottom: 10px;
  left: 0;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 10px;
  background-color: #003876;
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   The card text.
   -------------------------------------------------------------------------- */

/* 20px/1.2 with a 13px lead, which is the legacy h4 inside a card — the
   shared .oi-list-card-title is 24px/32px, sized for a two-across grid.

   Clamped to two lines. Legacy cut the title at 40 characters on the server
   and put "Managing a 30-domain AD environment with..." in the markup; the
   clamp reads the same and leaves the real heading in the page for search.
   -webkit-line-clamp needs the -webkit-box display to apply, and the
   unprefixed line-clamp is there for the browsers that have moved on. Where
   neither applies the title simply shows in full, which costs a row of
   uneven cards and loses nothing. */
.oi-list-card-media .oi-list-card-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 13px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 20px;
  line-height: 1.2;
}

/* Three lines, over a summary the renderer already trimmed to 40 words. */
.oi-list-card-media .oi-list-card-desc {
  display: -webkit-box;
  overflow: hidden;
  margin: 10px 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* margin-top: auto pushes the date to the bottom of the card, so cards with
   a one-line summary and cards with three keep their date on the same line
   across a row. */
.oi-list-card-meta {
  margin: auto 0 0;
  padding-top: 10px;
  color: var(--oi-list-body, #40535D);
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
}

/* --------------------------------------------------------------------------
   Pagination.
   -------------------------------------------------------------------------- */

/* OceanWP prints its own markup here and theme.css styles it, including the
   Customizer's ocean_pagination_align — div.oceanwp-pagination for the
   numbered style, div.page-jump for Newer/Older Posts. Nothing about its
   look is redeclared: only the gap above it, which matches the legacy .mt-40
   under the grid. */
.oi-list-pagination {
  margin-top: 40px;
}