.paragraph-text-cards {
  background-image:
    linear-gradient(90deg, var(--qridaBlue), var(--gold)),
    var(--bg-image, url('/themes/custom/govcms_bartik/assets/images/QLD_Map_QRIDA_2.jpg'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--white);
  padding: var(--space-2xl, 1.5rem);
}

/* Ensure heading and body text is white (but NOT inside cards) */
.paragraph-text-cards > .container > .row:not(.justify-content-center) h1,
.paragraph-text-cards > .container > .row:not(.justify-content-center) h2,
.paragraph-text-cards > .container > .row:not(.justify-content-center) h3,
.paragraph-text-cards > .container > .row:not(.justify-content-center) h4,
.paragraph-text-cards > .container > .row:not(.justify-content-center) h5,
.paragraph-text-cards > .container > .row:not(.justify-content-center) h6,
.paragraph-text-cards > .container > .row:not(.justify-content-center) p,
.paragraph-text-cards > .container > .row:not(.justify-content-center) .field--name-body,
.paragraph-text-cards > .container > .row:not(.justify-content-center) .text-content {
  color: var(--white) !important;
}

.paragraph-text-cards a:not(.btn):not(.card a) {
  border-bottom: solid 1px currentColor;
  color: var(--white);
}

/* Card text should be blue (headings) and grey (body) */
.paragraph-text-cards .card,
.paragraph-text-cards .card * {
  color: var(--textColor, #485163) !important;
}

.paragraph-text-cards .card h1,
.paragraph-text-cards .card h2,
.paragraph-text-cards .card h3,
.paragraph-text-cards .card h4,
.paragraph-text-cards .card h5,
.paragraph-text-cards .card h6,
.paragraph-text-cards .card .field--name-field-text-card-title,
.paragraph-text-cards .card .field--name-field-text-card-title * {
  color: var(--qridaOrange) !important;
}

.paragraph-text-cards .card p,
.paragraph-text-cards .card .field--name-field-text-card-body,
.paragraph-text-cards .card .field--name-field-text-card-body * {
  color: var(--textColor, #485163) !important;
}

/* Override Bootstrap row inside this component - use CSS Grid for responsive cards */
.paragraph-text-cards .row.justify-content-center {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-lg, 1rem);
  margin: 0 !important;
  width: 100% !important;
}

/* Reset Bootstrap column styles for grid children */
.paragraph-text-cards .row.justify-content-center > [class*="col"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Card styling - consolidated */
.paragraph-text-cards .card {
  border: none;
  border-radius: 10px;
  background-color: var(--white);
  height: 100%;
  padding: 1rem;
  text-align: center;
  transition: 0.12s ease-in-out 0s;
}

/* Ensure card text doesn't break mid-word */
.paragraph-text-cards .card p {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Large desktop */
@media screen and (min-width: 1200px) {
}

/* Extra large desktop */
@media screen and (min-width: 1920px) {
}

@media (pointer: fine) {
  .paragraph-text-cards a:hover,
  .paragraph-text-cards a:focus {
    border-bottom: none;
  }
}