/*
 * Province Card component -- production styles.
 *
 * This is the ONE component where the mobile transformation is
 * structural, not reflow (per the Golden UI Reference's own flag). For
 * variant: "table", BOTH a real <table> and a real <ul> card list
 * exist in the DOM (built from the same data), and CSS decides which
 * one is visible at which breakpoint -- display: none fully removes
 * the hidden one from the accessibility tree in modern browsers, so no
 * duplicate content is ever exposed to assistive technology.
 *
 * For variant: "card-grid", only the card list exists at all -- its
 * breakpoint changes are ordinary column-count reflow (2 columns ->
 * 1 column), not a structural swap.
 *
 * Structural spacing references only the resolved Stage 2 spacing
 * tokens and the resolved radius token. Colour remains pending-design-
 * signoff -- no colour value is set below.
 */

@import url("../../config/tokens/tokens.generated.css");

.sr-province-card {
  width: 100%;
  box-sizing: border-box;
}

/* --- Table variant: table visible desktop/tablet, hidden on mobile --- */
.sr-province-card--table .sr-province-card__table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.sr-province-card--table .sr-province-card__card-list--mobile-fallback {
  display: none;
}

@media (max-width: 767px) {
  .sr-province-card--table .sr-province-card__table {
    display: none;
  }
  .sr-province-card--table .sr-province-card__card-list--mobile-fallback {
    display: flex;
  }
}

.sr-province-card__table caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--space-s);
}

.sr-province-card__table th,
.sr-province-card__table td {
  border: 1px solid currentColor; /* structural only -- colour inherits, not invented */
  padding: var(--space-s);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

/* --- Card list: used standalone by card-grid, and as the mobile
       fallback for the table variant --- */
.sr-province-card__card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.sr-province-card__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  border-radius: var(--radius-medium);
  border: 1px solid currentColor;
  box-sizing: border-box;
}

.sr-province-card__name {
  margin: 0;
  word-break: break-word;
}

.sr-province-card__metadata {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-s);
  row-gap: var(--space-xs);
}

.sr-province-card__metadata dt {
  font-weight: 600;
}

.sr-province-card__metadata dd {
  margin: 0;
  word-break: break-word;
}

.sr-province-card__local-practice,
.sr-province-card__recommendation {
  margin: 0;
  word-break: break-word;
}

.sr-province-card__recommendation-label {
  font-weight: 600;
}

.sr-province-card__city-guide-link,
.sr-province-card__table-city-link {
  align-self: flex-start;
  text-decoration: underline;
}

/* --- Card-grid variant: 2 columns at tablet, 1 at mobile, ordinary reflow --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sr-province-card--card-grid .sr-province-card__card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sr-province-card--card-grid .sr-province-card__card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}