/**
 * @file
 * Responsive table styles - applies responsive behavior on MOBILE devices only.
 * Larger screens keep the default table styling.
 * Based on CodePen: https://codepen.io/AllThingsSmitty/pen/MyqmdM
 */

/* Default: Let tables display normally on larger screens */
.paragraph--responsive-tables table {
  /* Inherit normal table styles from theme */
}

/* Responsive behavior kicks in on mobile devices ONLY */
@media screen and (max-width: 768px) {
  .paragraph--responsive-tables {
    overflow: hidden;
    max-width: 100%;
  }

  .paragraph--responsive-tables .table-responsive {
    background-image: none;
    overflow: visible;
    width: auto;
    margin-left: 0;
  }

  .paragraph--responsive-tables table {
    border: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    table-layout: fixed;
    min-width: 0;
    white-space: normal;
  }

  /* Fix pg_text tables: _table.scss sets display:block, overflow-x:auto,
     and font-size:0.86rem on table:not(.tablefield) which breaks the
     responsive card layout. pg_table tables (.tablefield) are unaffected. */
  .paragraph--responsive-tables table:not(.tablefield) {
    display: table;
    overflow-x: hidden;
    font-size: inherit !important;
  }



  /* Handle single-column tables (no headers) - keep them simple */
  .paragraph--responsive-tables table:not([data-processed]) {
    table-layout: auto;
  }

  .paragraph--responsive-tables table:not([data-processed]) td {
    display: table-cell;
    padding: 1em;
    border: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .paragraph--responsive-tables table caption {
    font-size: 1.2em;
    margin-bottom: 1em;
  }

  .paragraph--responsive-tables table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  /* Hide the first row when it's used as header source (no thead) */
  .paragraph--responsive-tables table tr.responsive-header-row {
    display: none;
  }

  .paragraph--responsive-tables table tr {
    border: 0;
    display: block;
    margin-bottom: 1em;
    padding: 0;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    width: 100%;
  }

  .paragraph--responsive-tables table tr:last-child {
    border-bottom: 0;
  }

  .paragraph--responsive-tables table td {
    border: 0;
    display: block;
    text-align: left;
    padding: 0.25em 0.5em !important;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
  }

  /* First cell in each row (row title) should be bold and larger */
  .paragraph--responsive-tables table td:first-child {
    font-weight: bold;
    font-size: 1.1em;
    margin: 0.5em 0 0.25em 0;
    padding: 0.25em 0.5em !important;
  }

  /* First cell without data-label - hide the label */
  .paragraph--responsive-tables table td:first-child:not([data-label])::before {
    display: none;
  }

  /* First cell with data-label - show the label like other cells */
  .paragraph--responsive-tables table td:first-child[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    margin-bottom: 0.25em;
    color: #666;
    font-size: 0.9em;
    /* Reset font styling from parent for the label */
    font-size: 0.9em;
  }

  /* Other cells (not first) with data-label show their labels */
  .paragraph--responsive-tables table td:not(:first-child)[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    margin-bottom: 0.25em;
    color: #666;
    font-size: 0.9em;
  }
}