/* Get Involved: Ministries — intro tile row (2026-08-06, Fr. Thomas request)
   Two tiles at the top of the page: Tile 1 is informational (no link), Tile 2
   is a clickable card linking to the Jotform volunteer registration form.
   Editor-preview counterpart: pub/editor.css — keep both in sync. */

.sc-tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0;
}

.sc-tile {
  flex: 1 1 280px;
  min-width: 240px;
  padding: 32px 28px;
  border-radius: 6px;
  text-decoration: none;
  display: block;
}

.sc-tile-title {
  font-family: var(--heading-font-family), 'EB Garamond', serif;
  font-size: 28px;
  margin: 0 0 10px;
}

.sc-tile-text {
  font-family: var(--body-font-family), 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* Tile 1 — "Get Involved", informational, no link */
.sc-tile-row > .sc-tile:first-child {
  background: rgba(var(--secondary-color-rgb), 0.12);
  border-top: 4px solid rgba(var(--primary-color-rgb), 1);
}

.sc-tile-row > .sc-tile:first-child .sc-tile-title {
  color: rgba(var(--primary-color-rgb), 1);
}

.sc-tile-row > .sc-tile:first-child .sc-tile-text {
  color: rgb(51, 51, 51);
}

/* Tile 2 — "Register Online", clickable */
.sc-tile--link {
  background: rgba(var(--primary-color-rgb), 1);
  border-top: 4px solid rgba(var(--tertiary-color-rgb), 1);
  transition: background 0.2s ease, transform 0.2s ease;
}

.sc-tile--link .sc-tile-title,
.sc-tile--link .sc-tile-text {
  color: #fff;
}

.sc-tile--link:hover,
.sc-tile--link:focus {
  background: rgba(var(--primary-color-rgb), 0.85);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .sc-tile-row {
    flex-direction: column;
  }
}