/*
  Layout only. The host theme owns typography and colour.
  =======================================================

  Nothing in here sets font-family, font-size, font-weight or colour on text. That is deliberate:
  the catalog has to look like the rest of the site, and every such declaration here is one the
  theme's own heading and body styles would have to fight. Headings are real h1/h2/h3 elements
  and paragraphs are real p elements, so they inherit the site's typography for free.

  Spacing is in `em` rather than `rem` or `px` so it scales with whatever font size the theme
  applies, instead of going out of proportion on a page with larger type.

  Colour comes from `currentColor` at low alpha, so borders and rules follow the theme's text
  colour and work on a light or dark background without this file knowing which it is.
*/

.relief-grid {
  display: grid;
  /* --relief-columns is the shortcode's `columns` attribute; the minmax stops it forcing
     unreadably narrow cards on a phone, so the count is a maximum rather than a promise. */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5em;
  margin: 1em 0;
}

@media (min-width: 981px) {
  .relief-grid {
    grid-template-columns: repeat(var(--relief-columns, 3), 1fr);
  }
}

.relief-card {
  display: block;
  padding: 1.25em;
  /* Plain rgba first as the fallback: a browser without color-mix() drops the second
     declaration, and a full-strength currentColor border would be a heavy black box. Grey at low
     alpha reads correctly on a light or a dark background. */
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-color: color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 6px;
  text-decoration: none;
  /* Inherit, so card text is the theme's body colour rather than a link colour. */
  color: inherit;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.relief-card:hover,
.relief-card:focus-visible {
  box-shadow: 0 2px 14px rgba(128, 128, 128, 0.28);
  box-shadow: 0 2px 14px color-mix(in srgb, currentColor 18%, transparent);
  transform: translateY(-2px);
}

/*
  Kill the theme's link underline on grid cards.

  The whole card is one <a>, so a site-wide "underline body links" setting draws a line under the
  product title and its tagline, which reads as broken rather than as a link. Divi sets that from
  Theme Options as `#main-content a { text-decoration: underline }` — an id selector, which no
  practical class selector here can outrank.

  So this is one of the few places !important is the correct tool rather than a shortcut: the
  alternative is matching an id in our own stylesheet, which would break the moment the theme's
  wrapper id changes. Scoped to cards only, so ordinary links in the product copy still underline
  the way the rest of the site does.
*/
.relief-grid .relief-card,
.relief-grid .relief-card:hover,
.relief-grid .relief-card:focus,
.relief-grid .relief-card:active,
.relief-grid .relief-card :where(h1, h2, h3, h4, h5, h6, p, span) {
  text-decoration: none !important;
}

.relief-card__media {
  display: block;
  margin-bottom: 0.75em;
}

.relief-card img,
.relief-product__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Only the margins are ours — size, weight and family stay with the theme's h3. */
.relief-card__title {
  margin: 0 0 0.25em;
}

.relief-card__tagline {
  margin: 0;
  opacity: 0.8;
}

/* ------------------------------------------------------------------ product detail */

.relief-product__breadcrumb {
  /* Relative, so it stays proportional to whatever body size the theme sets. */
  font-size: 0.85em;
  opacity: 0.75;
  margin: 0 0 0.5em;
}

.relief-product__title {
  margin: 0 0 0.25em;
}

.relief-product__tagline {
  font-size: 1.1em;
  opacity: 0.85;
  margin: 0 0 1.5em;
}

/* Image beside copy on a wide screen, stacked on a narrow one. 981px is Divi's own tablet
   breakpoint — matching it keeps this from reflowing at a different point to the theme. */
.relief-product__layout {
  display: grid;
  gap: 2em;
}

@media (min-width: 981px) {
  .relief-product__layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }

  /* No image: the copy should not be stranded in a half-width column. The modifier comes from
     PHP rather than :not(:has(...)) so it works in every browser, not just recent ones. */
  .relief-product__layout--no-media {
    grid-template-columns: 1fr;
  }
}

.relief-product__body > :first-child {
  margin-top: 0;
}

/* A headed section like Features and What's included, not the muted footnote it used to be —
   full size and full contrast, so it reads as content rather than small print. */
.relief-product__use {
  margin: 0;
}

.relief-product__cta {
  margin-top: 1.5em;
}

/*
  Fallback button styling ONLY.

  Wrapped in :where() so it carries zero specificity: when Divi (or any theme) styles
  .et_pb_button, that wins without needing !important anywhere. This is just so the button is
  not a bare link if the catalog is ever used on a theme with no button styles of its own.
*/
:where(.relief-button) {
  display: inline-block;
  padding: 0.6em 1.4em;
  border: 1px solid currentColor;
  border-radius: 3px;
  text-decoration: none;
}