/*
 * Shared mobile refinements.
 * Loaded after page styles so each page gets the same small-screen safeguards.
 */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .hero-title,
  .page-title,
  .page-header-text h1 {
    overflow-wrap: anywhere;
  }

  .hero-actions,
  .cta-actions,
  .admin-toolbar,
  .page-heading {
    flex-wrap: wrap;
  }

  .hero-actions > *,
  .cta-actions > * {
    max-width: 100%;
  }

  .filter-inner select,
  .filter-inner .feed-i9 {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .filter-inner .feed-i8 {
    flex: 1 1 100%;
  }

  .controls-inner {
    align-items: stretch;
  }

  .controls-inner .view-toggle {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .controls-inner .view-btn {
    flex: 1 0 auto;
    justify-content: center;
  }

  .controls-inner .ctrl-spacer {
    display: none;
  }

  .controls-inner .search-box {
    width: 100% !important;
  }

  .rankings-table,
  .hours-table {
    width: 100%;
    overflow: hidden;
  }

  .rankings-table .tbl-head,
  .hours-table .hours-table-head {
    display: none;
  }

  .rankings-table .tbl-row,
  .hours-table .hours-table-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 14px;
  }

  .rankings-table .tbl-row > .company-cell,
  .rankings-table .tbl-row > .nfps-cell,
  .hours-table .hours-table-row > .company-cell,
  .hours-table .hours-table-row > .nfps-cell {
    grid-column: 2;
    min-width: 0;
  }

  .rankings-table .tbl-row > .hrs-cell,
  .hours-table .hours-table-row > .hours-cell {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .rankings-table .tbl-row {
    position: relative;
    row-gap: 10px;
    background: #fff;
  }

  .rankings-table .tbl-row.highlight {
    background: #fffbf4;
  }

  .rankings-table .hrs-cell {
    padding-top: 8px;
    border-top: 1px solid #f5f1eb;
  }

  .rankings-table .hrs-pill-lg,
  .rankings-table .hrs-pill-sm {
    font-size: 13px;
  }

  .rankings-table .vol-cell,
  .hours-table .vol-cell {
    min-width: 0;
  }

  .rankings-table .vol-name,
  .rankings-table .vol-title,
  .hours-table .tbl-vol-name,
  .hours-table .tbl-vol-title {
    overflow-wrap: anywhere;
  }

  .nfp-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  .nfp-header-info {
    flex: 1 1 calc(100% - 64px);
    min-width: 0;
  }

  .nfp-header-name,
  .nfp-header-cause,
  .nfp-vol-name,
  .nfp-vol-meta {
    overflow-wrap: anywhere;
  }

  .nfp-total-box {
    flex: 1 1 100%;
    text-align: left;
  }

  .nfp-vol-row {
    min-width: 0;
  }

  .nfp-vol-hrs {
    margin-left: auto;
  }

  .modal,
  .login-modal,
  .form-card {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .card-cause {
    align-items: flex-start;
    flex: 1 1 100%;
  }

  .nfp-vol-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .nfp-vol-info {
    min-width: 0;
    flex: 1 1 calc(100% - 58px);
  }

  .nfp-vol-hrs {
    flex-basis: auto;
    margin-left: 58px;
  }

  .share-label {
    flex-basis: 100%;
  }
}