/*
 * Contact Cards block - structural layout only. Background is set inline
 * from field values, same as every other block; typography (font,
 * uppercase, letter-spacing, link underlines) is left to the theme, same
 * approach as text-cards/icon-grid.
 *
 * Responsive top/bottom padding is handled by the shared
 * .wp-block-prontoblocks-section rule in assets/css/blocks.css - this block
 * only needs the wrapper class from prontoblocks_get_block_wrapper() for that.
 */

.wp-block-prontoblocks-contact-cards {
  background-color: var(--prontoblocks-contact-cards-bg-color, transparent);
}

.wp-block-prontoblocks-contact-cards__inner {
  width: 100%;
}

.wp-block-prontoblocks-contact-cards--contain .wp-block-prontoblocks-contact-cards__inner {
  max-width: var(--wp--style--global--wide-size, 1432px);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--8, 24px);
}

.wp-block-prontoblocks-contact-cards__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--wp--preset--spacing--8, 2rem);
}

.wp-block-prontoblocks-contact-cards__header-title {
  margin: 0;
}

.wp-block-prontoblocks-contact-cards__header-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/*
 * Desktop column count (1-4) comes from the Columns field via
 * --prontoblocks-contact-cards-columns; cards wrap to additional rows once
 * that's exceeded. Mobile/tablet stay at a fixed 1/2 columns regardless of
 * that setting - same responsive pattern as icon-grid/cta-grid's grids.
 */
.wp-block-prontoblocks-contact-cards__cards {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--prontoblocks-contact-cards-gap, 2rem);
  row-gap: var(--prontoblocks-contact-cards-row-gap, var(--prontoblocks-contact-cards-gap, 2rem));
  align-items: start;
}

@media (width >= 600px) {
  .wp-block-prontoblocks-contact-cards__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 1024px) {
  .wp-block-prontoblocks-contact-cards__cards {
    grid-template-columns: repeat(var(--prontoblocks-contact-cards-columns, 3), minmax(0, 1fr));
  }
}

/*
 * The accent bar reads the Accent Colour field via a custom property, with
 * currentColor as a sane fallback so a card without one set still gets a
 * visible bar rather than an invisible transparent one.
 */
.wp-block-prontoblocks-contact-cards__card {
  border-top: 4px solid var(--prontoblocks-contact-cards-accent-color, currentColor);
  padding-top: 1.5rem;
}

.wp-block-prontoblocks-contact-cards__card-brands {
  margin: 0 0 0.75rem;
}

.wp-block-prontoblocks-contact-cards__card-title {
  margin: 0 0 0.75rem;
}

.wp-block-prontoblocks-contact-cards__card-address {
  margin: 0 0 1.5rem;
}

.wp-block-prontoblocks-contact-cards__card-phones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid currentColor;
}

.wp-block-prontoblocks-contact-cards__card-phone-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.wp-block-prontoblocks-contact-cards__card-hours {
  margin-bottom: 1.5rem;
}

.wp-block-prontoblocks-contact-cards__card-hours-label {
  display: block;
  margin-bottom: 0.5rem;
}

.wp-block-prontoblocks-contact-cards__card-hours-row {
  margin: 0;
}

.wp-block-prontoblocks-contact-cards__card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

.wp-block-prontoblocks-contact-cards__fine-print {
  margin: var(--wp--preset--spacing--8, 2rem) 0 0;
}