/* responsive.css -- light-touch mobile layer for sharonjmontgomery.com
   ALL rules inside @media (max-width: 640px) so desktop is untouched.
   Layout-only: no colour, font-family or background changes. */

@media (max-width: 640px) {
  /* Fluid tables */
  table,
  table[width] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stack cells vertically, full width */
  td,
  td[width] {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
  }

  /* Hide spacer-only cells (cells whose only child is a spacer image) */
  td:has(> img[src*="spacer"]:only-child) {
    display: none !important;
  }

  /* Hide gutter/spacer cells by width (verified: none hold content) */
  td[width="10"],
  td[width="20"],
  td[width="37"],
  td[width="47"],
  td[width="63"],
  td[width="104"],
  td[width="164"] {
    display: none !important;
  }

  /* Collapse spacer images even inside content cells */
  img[src*="spacer"] {
    display: none !important;
  }

  /* Images scale to container */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Content images in table cells fill available width */
  td a img,
  td > img:not([src*="spacer"]) {
    width: 100% !important;
  }

  /* Collapse explicit height spacer rows */
  td[height] {
    height: auto !important;
  }

  /* Base readability */
  body {
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* Image links in table cells fill the cell width */
  td a:has(img) {
    display: block !important;
    width: 100% !important;
  }

  /* Tap-friendly text links */
  a {
    padding: 4px 0;
    display: inline-block;
  }

  /* Vimeo/YouTube iframe scales */
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}