/**
 * CUTIS Theme — Service "Publications & press" section
 * Classes kept identical to _design-reference/style.css (pub-row, pub-left,
 * pub-mark) since none of them collide with anything in header.css/
 * layout.css.
 *
 * .container-cutis, .eyebrow and .section-head are already defined in
 * single-service-types.css, which is enqueued alongside this file on every
 * service singular page — not redeclared here. Unlike Types/Testimonials,
 * .section-head is used WITHOUT the ".center" modifier (left-aligned), same
 * as single-service-blog.css — the reference has no "center" class on this
 * section either.
 *
 * PADDING DECISION: same trade-off already made in single-service-awards.css
 * — the reference uses "py-section-sm" here, but every other section in this
 * theme uses the single site-wide "section-padding" utility (80px/60px/40px).
 * Introducing a second padding scale for just this section would break the
 * consistent vertical rhythm established elsewhere, so "section-padding" is
 * used here too, same as every other section.
 *
 * The grey wash (reference's .section-bg-grey utility) is reproduced the
 * same way single-service-types.css / single-service-awards.css scope it —
 * directly on this section's own wrapper class, using the same color-mix
 * formula for visual consistency.
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). The reference's
 * --slate-soft tone (source line) has no matching token, so it's derived via
 * color-mix() from --cutis-color-text, same technique used for the award
 * year/label in single-service-awards.css. The reference's --font-display is
 * dropped for .pub-mark, same reasoning as single-service-awards.css
 * dropping --font-mono — no matching display-font token exists in the theme,
 * so the mark falls back to the body font at a heavier weight. Card radius
 * (--radius-md in the reference) has no matching token either and is
 * hardcoded to 20px, same value already used for this purpose in
 * single-service-blog.css / single-service-awards.css / single-service-
 * types.css.
 */

/* ------------------------------------------------------------------ */
/* Section shell — grey wash, scoped like .service-types / .service-awards */
/* ------------------------------------------------------------------ */
.service-publications {
  background: color-mix(in srgb, var(--cutis-color-border) 30%, white);
}

/* ------------------------------------------------------------------ */
/* Publication row */
/* ------------------------------------------------------------------ */
.pub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border: 1px solid var(--cutis-color-border);
  border-radius: 20px;
  background: var(--cutis-color-surface);
  margin-bottom: 14px;
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.pub-row:last-child {
  margin-bottom: 0;
}
.pub-row:hover {
  border-color: var(--cutis-color-primary);
  box-shadow: 0 10px 30px rgba(15, 43, 61, 0.08);
}

.pub-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.pub-mark {
  font-size: 20px;
  font-weight: 700;
  color: var(--cutis-color-primary);
  width: 46px;
  flex-shrink: 0;
}
.pub-row h4 {
  font-size: 15px;
  color: var(--cutis-color-heading);
  margin: 0 0 3px;
}
.pub-row span {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--cutis-color-text) 65%, white);
}

.pub-arrow {
  flex-shrink: 0;
  color: var(--cutis-color-heading);
  transition: transform 0.25s ease;
}
.pub-row:hover .pub-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 575.98px) {
  .pub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}