/* General mobile / tablet layout (cards, headings, etc.) */
@media only screen and (max-width: 1024px) {

  /* Kill the horizontal flex layout on mobile for boxes */
  .graph-wrap .boxes-wrap .box {
	display: block !important;
	margin: 1.5rem 0 !important;
  }

  /* Each column becomes full-width, stacked:
	 col2 (number) -> col1 (image) -> col3 (text) */
  .graph-wrap .boxes-wrap .box > .col2,
  .graph-wrap .boxes-wrap .box > .col1,
  .graph-wrap .boxes-wrap .box > .col3 {
	width: 100% !important;
	display: block !important;
	box-sizing: border-box;
  }

  /* Number strip – slim and above the image */
  .graph-wrap .boxes-wrap .box > .col2 {
	padding: 0.5rem 1.25rem !important;
	background: #a4655c3e !important;
  }

  /* Image – give it some height so the bg image shows nicely */
  .graph-wrap .boxes-wrap .box > .col1 {
	min-height: 240px;
	padding: 0 !important;
  }

  /* Text – comfortable padding on phones/tablets */
  .graph-wrap .boxes-wrap .box > .col3 {
	padding: 1.75rem 1.25rem !important;
  }

  /* Headings scale down a bit */
  h1.page-title,
  #header {
	font-size: 2.6rem !important;
	line-height: 1.15 !important;
	padding: 1.25rem 1rem 0 !important;
  }

  .subheader {
	padding: 0.75rem 1rem !important;
	font-size: 18px !important;
	max-width: 100% !important;
  }
}

/* Mobile-only table rules */
@media only screen and (max-width: 700px) {

  /* Hard cap the table area only on mobile */
  .graph-wrap .table-wrap {
	max-width: 500px;      /* your hard limit on mobile */
	margin: 0 auto;        /* center it */
	width: 100%;
  }

  /* Make column widths obey our percentages */
  .graph-wrap .table-wrap table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;   /* enforces column widths + wrapping */
  }

  /* Ranking column */
  .graph-wrap .table-wrap table th:nth-child(1),
  .graph-wrap .table-wrap table td:nth-child(1) {
	width: 14%;
  }

  /* Building column — narrower + wraps text properly */
  .graph-wrap .table-wrap table th:nth-child(2),
  .graph-wrap .table-wrap table td:nth-child(2) {
	width: 42%;
	white-space: normal;   /* allows wrapping */
	word-break: break-word;
  }

  /* City */
  .graph-wrap .table-wrap table th:nth-child(3),
  .graph-wrap .table-wrap table td:nth-child(3) {
	width: 22%;
  }

  /* State */
  .graph-wrap .table-wrap table th:nth-child(4),
  .graph-wrap .table-wrap table td:nth-child(4) {
	width: 22%;
  }

  /* Slightly tighter cells for mobile */
  .graph-wrap .table-wrap table th,
  .graph-wrap .table-wrap table td {
	padding: 6px 4px;
	font-size: 14px;
  }
}