/* ==========================================================================
   RV TILES  -  rv-tiles-1.css

   A text only variant of the existing .rv-card, for the Pick a builder grid
   on /design-your-own. Loaded after every layout file so it wins, and it
   carries NO media query because the tiles have to hold at every width.

   WHY IT EXISTS
   .rv-card was built around a figure. Its body is nothing but a top hairline
   and some top padding, which reads correctly under a photograph and reads as
   floating text once the photograph is gone. Ans asked for tiles with no
   images, so the box has to come from the card itself.

   No new colour, radius or spacing value is invented. Every declaration below
   uses a token the design system already ships.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE TILE

   A flex column so the box fills the height its grid row resolves to, which
   is what keeps a row of tiles level when one description runs longer than
   its neighbours. The grid itself is unchanged: .rv-cards--4 still gives one
   column below 640, two to 999 and four from 1000 up.
   -------------------------------------------------------------------------- */

.rv-petrol .rv-card--plain {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  border: 1px solid var(--rv-hairline);
  border-radius: var(--rv-radius-md);
  background: var(--rv-surface);
  transition: border-color .18s ease, transform .18s ease;
}

/* On a section that is already the surface tint, the tile inverts to white so
   it still separates from its ground. */
.rv-petrol .rv-sec--surface .rv-card--plain {
  background: #FFFFFF;
}

/* On a petrol band the hairline and the ground both change. */
.rv-petrol .rv-sec--petrol .rv-card--plain {
  background: transparent;
  border-color: var(--rv-hairline-bone);
}

.rv-petrol .rv-card--plain:hover {
  border-color: var(--rv-hairline-strong);
  transform: translateY(-2px);
}

.rv-petrol .rv-sec--petrol .rv-card--plain:hover {
  border-color: var(--rv-hairline-bone-strong);
}

/* --------------------------------------------------------------------------
   2. THE BODY LOSES THE FIGURE HAIRLINE

   .rv-card__body carries a top border and a top margin so it sits under a
   picture. With no picture above it that line has nothing to separate, so it
   is removed and the tile's own border does the work.
   -------------------------------------------------------------------------- */

.rv-petrol .rv-card--plain .rv-card__body {
  border-block-start: 0;
  margin-block-start: 0;
  padding-block-start: 0;
}

/* The heading keeps its own size. Only the gap under it is set here, because
   the design system never had a heading sitting directly on a tile edge. */
.rv-petrol .rv-card--plain .rv-card__body .rv-h3 {
  margin-block-end: var(--rv-space-xs);
}

/* --------------------------------------------------------------------------
   3. TWO PARAGRAPHS IN A SECTION HEAD

   Unrelated to the tiles but visible on the same page. .rv-sechead gives its
   standfirst no bottom margin, which is right when it is the only paragraph
   and wrong the moment a second one follows: on /design-your-own the lede and
   the paragraph under it were touching with no gap at all. Scoped to p + p so
   it can only ever apply where there are two, and cannot move a single
   standfirst anywhere else on the site.
   -------------------------------------------------------------------------- */

.rv-petrol .rv-sechead > p + p {
  margin-block-start: var(--rv-space-sm);
}