/*
 * SIA Table Grid — a CSS-Grid table where every cell is its own styleable
 * box (icon + heading + rich text). Column widths are computed in PHP and
 * applied as an inline `grid-template-columns` on `.sia-tg__grid` (see
 * class-widget.php render() — Elementor's {{VALUE}} selectors can't read
 * repeater data, so the track list can't be a Style-tab selector control).
 *
 * Row/column divider lines are toggled via the `--rowdiv` / `--coldiv`
 * modifier classes on the grid (also PHP-decided), colored/sized through
 * CSS custom properties set by the matching Style → Grid controls.
 *
 * Per-cell style overrides: background/border/radius apply as an inline
 * `style` on the cell itself; heading/subtitle/text/icon colors apply as
 * inline `style` on the child elements (they must outrank the global color
 * controls, which land in Elementor's per-post CSS scoped to those same
 * child selectors). Inline naturally wins over these class rules AND over
 * per-post CSS — same mechanism as modules/icon-list.
 */

.sia-tg__grid {
	display: grid;
	/* grid-template-columns is set inline per-instance (PHP-computed from
	   the column-widths repeater) — see class-widget.php render(). */
	row-gap: var(--sia-tg-row-gap, 0px);
	column-gap: var(--sia-tg-col-gap, 0px);
}

/* ─── Cell (the styleable box) ───
   The cell stacks an optional mobile label on top of `.sia-tg__main`, which
   holds the icon + the content body. */
.sia-tg__cell {
	display: flex;
	flex-direction: column;
	padding: 14px 16px;
	background: transparent;
	box-sizing: border-box;
	color: var(--sia-color-text, #1A1718);
}

/* Icon + content wrapper. Column by default (icon ABOVE the text); the
   `.sia-tg--icon-inline` prefix_class on the widget wrapper flips it to a row
   so the icon sits to the LEFT of the content instead. `--sia-tg-icon-gap`
   spacing is set on this box by the Style → Icon "Gap" control. */
.sia-tg__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sia-tg--icon-inline .sia-tg__main {
	flex-direction: row;
	align-items: flex-start;
}
/* Content body groups heading/subtitle/text so that in the inline (row)
   layout the icon pairs with the whole block — working the same whether the
   first line is a heading, a subtitle, or just text. */
.sia-tg__cbody {
	min-width: 0;
}
.sia-tg--icon-inline .sia-tg__cbody {
	flex: 1 1 auto;
}
.sia-tg--icon-inline .sia-tg__icon {
	flex: 0 0 auto; /* keep the icon at its natural size in the row */
}

/* Row divider — every cell gets a bottom border EXCEPT cells in the last
   row. Uses the PHP-computed .sia-tg__cell--last-row (robust against a
   ragged final row where the cell count doesn't divide evenly by the
   column count — a pure-CSS :nth-child approach can't handle that case
   reliably). */
.sia-tg__grid--rowdiv .sia-tg__cell:not(.sia-tg__cell--last-row) {
	border-bottom: var(--sia-tg-row-divider-w, 1px) solid var(--sia-tg-row-divider-color, #e5e7eb);
}

/* Column divider — every cell gets a right border EXCEPT the last cell in
   each row (and the very last cell overall, for a ragged final row). */
.sia-tg__grid--coldiv .sia-tg__cell:not(.sia-tg__cell--last-col) {
	border-right: var(--sia-tg-col-divider-w, 1px) solid var(--sia-tg-col-divider-color, #e5e7eb);
}

/* ─── Header row ───
   Default gray/uppercase look before any Style → Header changes; every
   value here is overridden by the Style-tab rules once set. */
.sia-tg__cell--head {
	color: #6b7280;
}
.sia-tg__cell--head .sia-tg__heading {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: inherit;
}

/* ─── Icon ─── */
.sia-tg__icon {
	display: inline-flex;
	align-items: center;
	font-size: 20px;
	line-height: 1;
	color: var(--sia-color-primary, #6EC1E4);
}
.sia-tg__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* ─── Heading ─── */
.sia-tg__heading {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	color: var(--sia-color-text, #1A1718);
}

/* ─── Subtitle — a second, separately colorable line ─── */
.sia-tg__subtitle {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
	color: var(--sia-color-text, #1A1718);
}

/* ─── Mobile column label ───
   Hidden on desktop; shown only inside the mobile media query below. Base
   look mirrors `.sia-tg__cell--head .sia-tg__heading` (same small/uppercase/
   gray treatment) since it stands in for the now-hidden header row — the
   Style → Header color/typography controls target this selector too, so
   both stay in sync automatically (see class-widget.php). */
.sia-tg__cell-label {
	display: none;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #6b7280;
	margin-bottom: 4px;
}

/* ─── Mobile ROW label ───
   The row-axis counterpart of `.sia-tg__cell-label`: for matrix tables, each
   cell (on mobile) is stamped with the label of its row (the first-column
   value). Hidden on desktop; shown inside the mobile media query. Slightly
   bolder/darker than the column label so, when both show, the row reads as the
   primary grouping and the column as the secondary qualifier. */
.sia-tg__cell-row-label {
	display: none;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: var(--sia-color-text, #1A1718);
	margin-bottom: 4px;
}

/* ─── Text (WYSIWYG rich content) ─── */
.sia-tg__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sia-color-text, #1A1718);
}
.sia-tg__text p:first-child { margin-top: 0; }
.sia-tg__text p:last-child { margin-bottom: 0; }

/* ─── Mobile: collapse to a single column ───
   `grid-template-columns` is set via an INLINE style attribute (higher
   specificity than a stylesheet rule targeting the same property on the
   same element), so a plain `@media` override here would NOT win over it.
   `!important` is required specifically to beat that inline style — this
   is the one legitimate case for `!important` in this codebase.

   Divider lines: `--last-row` / `--last-col` mark grid POSITION (correct
   for the desktop grid — nothing sits below the bottom row or right of the
   rightmost cell), but once collapsed to a single column every cell is a
   sequential stacked item instead, so the only cell that should ever lose
   its trailing divider is the truly final one — `--last` (PHP-computed,
   independent of row/column position; see render()). Reusing `--last-row`
   here would wrongly drop the divider between BOTH cells of a ragged final
   row that has more than one cell. */
@media (max-width: 600px) {
	.sia-tg__grid { grid-template-columns: 1fr !important; }

	/* Vertical lines make no sense in a single-column stack. */
	.sia-tg__grid--coldiv .sia-tg__cell { border-right: none; }

	.sia-tg__grid--rowdiv .sia-tg__cell:not(.sia-tg__cell--last) {
		border-bottom: var(--sia-tg-row-divider-w, 1px) solid var(--sia-tg-row-divider-color, #e5e7eb);
	}
	/* Column-divider-only (row divider off): still give the stack some
	   separation on mobile, using the column divider's own color/width so
	   it matches what was actually chosen rather than an unrelated default. */
	.sia-tg__grid--coldiv:not(.sia-tg__grid--rowdiv) .sia-tg__cell:not(.sia-tg__cell--last) {
		border-bottom: var(--sia-tg-col-divider-w, 1px) solid var(--sia-tg-col-divider-color, #e5e7eb);
	}

	/* ─── "Mobile column labels" (tg_mobile_labels, on by default) ───
	   Once the grid is one column wide, a bare stack of values has no
	   visible link back to which original column each one belonged to
	   (the header row appears once at the very top, then every value below
	   it is effectively orphaned from its label). Fix: replace the header
	   ROW with a small per-cell label that repeats — see render(). */
	.sia-tg--mobile-labels .sia-tg__cell--head {
		display: none;
	}
	.sia-tg--mobile-labels .sia-tg__cell-label {
		display: block;
	}

	/* ─── "Mobile row labels" (tg_mobile_row_labels) ───
	   The row-axis mirror: for a matrix table the first column names each row.
	   Once stacked, hide that first column (its text now rides on every cell as
	   a label) and reveal the per-cell row label. Combine with the column
	   labels above to show both axes on each cell. */
	.sia-tg--mobile-row-labels .sia-tg__cell--firstcol {
		display: none;
	}
	.sia-tg--mobile-row-labels .sia-tg__cell-row-label {
		display: block;
	}

	/* At the end of each ORIGINAL row (= one full "record" once collapsed to
	   a single column) the divider is drawn 3x thicker, so scanning down the
	   stack it's visually obvious where e.g. one row's set of values ends
	   and the next one begins — the thin lines above are for fields WITHIN
	   one record. Reuses `--last-col` (already marks the last cell of every
	   row); same specificity as the rule above + declared after it, so only
	   the longhand width/color here override, leaving `border-bottom-style`
	   from that rule intact — standard cascade behavior, not a hack. */
	.sia-tg__grid--rowdiv .sia-tg__cell--last-col:not(.sia-tg__cell--last) {
		border-bottom-width: calc(var(--sia-tg-row-divider-w, 1px) * 3);
	}
	.sia-tg__grid--coldiv:not(.sia-tg__grid--rowdiv) .sia-tg__cell--last-col:not(.sia-tg__cell--last) {
		border-bottom-width: calc(var(--sia-tg-col-divider-w, 1px) * 3);
	}
}