/* Trade Source IRE - mobile spacing and media-fit pass
   2026-08-03
   Loaded after the existing page styles so the rules below provide one
   consistent phone/tablet layout without changing the desktop design. */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

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

img {
  height: auto;
}

.container,
.header-inner,
.hero-copy,
.hero-grid > *,
.grid > *,
.two-col > *,
.two-cols > *,
.form-grid > *,
.blog-article-layout > *,
.rw-week-card > *,
.rw-project-grid > *,
.grant-grid > * {
  min-width: 0;
}

h1,
h2,
h3,
h4,
p,
li,
a,
label,
legend,
summary {
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  :root {
    --tsi-mobile-gutter: 16px;
    --tsi-mobile-section: 42px;
    --tsi-mobile-gap: 16px;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .container,
  .header .container,
  .header-inner,
  .blog-page .container,
  .recent-work-page .container,
  .seai-grants-page .grant-container {
    width: calc(100% - (var(--tsi-mobile-gutter) * 2)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Header sizing is refined here; the original site navigation layout is left unchanged. */
  html body #tsi-shared-header .container.header-inner {
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    padding: 12px 0 14px !important;
    gap: 9px !important;
  }

  html body #tsi-shared-header .brand-block {
    gap: 6px !important;
  }

  html body #tsi-shared-header .logo,
  html body #tsi-shared-header .logo img {
    width: min(172px, 48vw) !important;
    max-width: min(172px, 48vw) !important;
    height: auto !important;
  }

  html body #tsi-shared-header .header-social-links {
    gap: 8px !important;
  }

  html body #tsi-shared-header .header-social-link {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }

  html body #tsi-shared-header .header-social-link svg {
    width: 17px !important;
    height: 17px !important;
  }

  html body #tsi-shared-header .header-actions .quote-image-exact,
  html body #tsi-shared-header .header-actions .quote-image-exact img {
    width: min(216px, 64vw) !important;
    max-width: min(216px, 64vw) !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Consistent section rhythm. */
  .section,
  .section-light,
  .section-dark,
  .home-intro,
  .home-action-panel,
  .home-quote-section,
  .trade-bottom-cta,
  .recent-work-home,
  .recent-work-page .rw-index-section,
  .recent-work-page .rw-post-section,
  .recent-work-page .rw-related-services,
  .blog-page .blog-index,
  .blog-page .blog-article,
  .blog-page .blog-related,
  .seai-grants-page .grant-section,
  .seai-grants-page .grant-options,
  .seai-grants-page .grant-quick-nav,
  .contractor-how-section,
  .for-contractors-body .contractor-intro-page {
    padding-top: var(--tsi-mobile-section) !important;
    padding-bottom: var(--tsi-mobile-section) !important;
  }

  .hero,
  .hero.trade-hub-hero,
  .recent-work-page .rw-hero,
  .blog-page .blog-hero,
  .seai-grants-page .grant-hero {
    min-height: 0 !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
    background-position: center center !important;
  }

  .hero-copy,
  .hero-grid > div:first-child,
  .trade-hub-hero .hero-copy,
  .recent-work-page .rw-hero-inner,
  .blog-page .blog-hero-inner,
  .seai-grants-page .grant-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    border-left-width: 4px !important;
  }

  .hero h1,
  .trade-hub-hero h1,
  .recent-work-page .rw-hero h1,
  .blog-page .blog-hero h1,
  .seai-grants-page .grant-hero h1,
  .for-contractors-body .contractor-intro-page h1,
  .reviews-page .reviews-hero h1 {
    max-width: 100% !important;
    margin-bottom: 16px !important;
    font-size: clamp(34px, 10.4vw, 48px) !important;
    line-height: .99 !important;
    letter-spacing: -.045em !important;
  }

  .hero p,
  .recent-work-page .rw-hero p,
  .blog-page .blog-hero p,
  .seai-grants-page .grant-hero p,
  .reviews-page .reviews-hero p {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.58 !important;
  }

  .hero-actions,
  .blog-page .blog-hero-actions,
  .seai-grants-page .hero-buttons,
  .reviews-page .reviews-hero-actions,
  .rw-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-actions > *,
  .blog-page .blog-hero-actions > *,
  .seai-grants-page .hero-buttons > *,
  .reviews-page .reviews-hero-actions > *,
  .rw-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .section-title,
  .blog-page .blog-index-heading h2,
  .blog-page .blog-article-intro h1,
  .blog-page .blog-article-intro h2,
  .recent-work-page .rw-archive-intro h2,
  .recent-work-page .rw-post-intro h1,
  .seai-grants-page .grant-archive-intro h2,
  .seai-grants-page .grant-section h2,
  .reviews-page .reviews-main h2,
  .for-contractors-body .contractor-section h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 8.8vw, 40px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
  }

  .eyebrow,
  .blog-eyebrow,
  .grant-kicker,
  .rw-project-location,
  .rw-status {
    line-height: 1.25 !important;
  }

  .card-grid,
  .grid,
  .two-col,
  .two-cols,
  .form-grid,
  .trust-grid,
  .features,
  .home-action-grid,
  .home-action-side,
  .quote-wrap,
  .how-steps,
  .contractor-pricing-grid,
  .blog-card-grid,
  .blog-article-layout,
  .blog-related-grid,
  .rw-project-grid,
  .grant-grid,
  .grant-process,
  .review-choice-grid {
    gap: var(--tsi-mobile-gap) !important;
  }

  .card,
  .hub-card,
  .form-card,
  .home-info-card,
  .home-quote-card,
  .how-step,
  .contractor-price-card,
  .subscription-option,
  .price-box,
  .notice,
  .rw-week-card,
  .rw-project-card,
  .rw-supporter-card,
  .blog-card,
  .blog-side-card,
  .blog-highlight,
  .blog-update-note,
  .grant-card,
  .review-choice-card {
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 18px !important;
  }

  .card,
  .hub-card,
  .form-card,
  .home-info-card,
  .home-quote-card,
  .how-step,
  .contractor-price-card,
  .subscription-option,
  .price-box,
  .notice,
  .rw-supporter-card,
  .blog-side-card,
  .blog-highlight,
  .blog-update-note,
  .grant-card,
  .review-choice-card {
    padding: 19px !important;
  }

  /* Media stays inside its card and keeps the intended crop. */
  .blog-card-media,
  .rw-week-card > a,
  .rw-poster-frame,
  .trade-card .trade-image,
  .blog-cover,
  .rw-main-poster {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .blog-card-media {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    background: #080808 !important;
  }

  .blog-card-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .blog-card-body,
  .rw-project-body {
    padding: 18px !important;
  }

  .blog-card-body h2,
  .rw-project-body h2 {
    overflow-wrap: anywhere;
  }

  .blog-cover {
    margin: 22px 0 28px !important;
    border-radius: 18px !important;
    background: #050505 !important;
  }

  .blog-cover img,
  .rw-main-poster img,
  .rw-poster-frame img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .rw-main-poster {
    margin: 24px 0 30px !important;
    border-radius: 18px !important;
  }

  .rw-main-poster img {
    border-radius: 18px !important;
  }

  .rw-week-card {
    padding: 17px !important;
    gap: 18px !important;
  }

  .rw-week-card > a {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    border-radius: 15px !important;
    background: #111 !important;
  }

  .rw-week-card > a img,
  .rw-week-card--showcase > a img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .rw-project-card img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  .trade-card .trade-image,
  .trade-card .trade-image img {
    width: 100% !important;
  }

  .trade-card .trade-image img {
    height: auto !important;
    object-fit: cover !important;
  }

  .rw-archive-intro,
  .blog-index-heading,
  .seai-grants-page .grant-archive-intro,
  .rw-bottom-cta .container,
  .blog-bottom-cta .container {
    align-items: stretch !important;
    gap: 18px !important;
  }

  .rw-archive-pills,
  .rw-archive-bar,
  .grant-pills {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .rw-archive-pills a,
  .rw-archive-bar a,
  .grant-pills a {
    width: 100% !important;
    min-height: 44px !important;
  }

  .rw-note,
  .rw-scope-panel,
  .blog-disclaimer,
  .contractor-warning {
    margin-top: 24px !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }

  /* Long form labels and option text must shrink within the card. */
  .field,
  .field label,
  .checkbox-field,
  .checkbox-field label,
  .subscription-option,
  .subscription-option label,
  .rating-row,
  .rating-row label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

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

  input[type="file"] {
    width: 100% !important;
    font-size: 14px !important;
  }

  .footer {
    padding: 28px 0 !important;
  }

  .footer .container {
    text-align: center !important;
  }

  .footer-links {
    display: flex !important;
    justify-content: center !important;
    gap: 10px 14px !important;
    margin-top: 16px !important;
  }

  .footer-links a {
    padding-block: 4px !important;
  }
}

/* Replace the horizontal comparison-table scroll with readable mobile cards. */
@media (max-width: 760px) {
  .blog-comparison-table-wrap {
    margin: 22px 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .blog-comparison-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    font-size: 15px !important;
  }

  .blog-comparison-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .blog-comparison-table tbody,
  .blog-comparison-table tr,
  .blog-comparison-table th,
  .blog-comparison-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .blog-comparison-table tbody {
    display: grid !important;
    gap: 14px !important;
  }

  .blog-comparison-table tbody tr {
    overflow: hidden !important;
    border: 1px solid #dedede !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.06) !important;
  }

  .blog-comparison-table tbody tr.is-featured {
    border-color: #ffb85e !important;
    background: #fff5e9 !important;
  }

  .blog-comparison-table tbody th,
  .blog-comparison-table tbody td {
    border: 0 !important;
    padding: 0 16px 14px !important;
    text-align: left !important;
  }

  .blog-comparison-table tbody th {
    padding-top: 16px !important;
    padding-bottom: 10px !important;
    font-size: 18px !important;
    box-shadow: none !important;
  }

  .blog-comparison-table tbody tr.is-featured th {
    border-left: 5px solid #ff8a00 !important;
    padding-left: 11px !important;
  }

  .blog-comparison-table tbody td::before {
    display: block !important;
    margin-bottom: 4px !important;
    color: #8a4300 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  .blog-comparison-table tbody td:nth-of-type(1)::before {
    content: "Editorial score";
  }

  .blog-comparison-table tbody td:nth-of-type(2)::before {
    content: "Best for";
  }
}

@media (max-width: 420px) {
  :root {
    --tsi-mobile-gutter: 14px;
    --tsi-mobile-section: 38px;
    --tsi-mobile-gap: 14px;
  }

  html body #tsi-shared-header .container.header-inner {
    width: calc(100% - 20px) !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  html body #tsi-shared-header .logo,
  html body #tsi-shared-header .logo img {
    width: min(160px, 48vw) !important;
    max-width: min(160px, 48vw) !important;
  }

  html body #tsi-shared-header .header-actions .quote-image-exact,
  html body #tsi-shared-header .header-actions .quote-image-exact img {
    width: min(202px, 62vw) !important;
    max-width: min(202px, 62vw) !important;
  }

  .hero,
  .hero.trade-hub-hero,
  .recent-work-page .rw-hero,
  .blog-page .blog-hero,
  .seai-grants-page .grant-hero {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .hero h1,
  .trade-hub-hero h1,
  .recent-work-page .rw-hero h1,
  .blog-page .blog-hero h1,
  .seai-grants-page .grant-hero h1,
  .for-contractors-body .contractor-intro-page h1,
  .reviews-page .reviews-hero h1 {
    font-size: clamp(31px, 10.2vw, 42px) !important;
  }

  .section-title,
  .blog-page .blog-index-heading h2,
  .blog-page .blog-article-intro h1,
  .blog-page .blog-article-intro h2,
  .recent-work-page .rw-archive-intro h2,
  .recent-work-page .rw-post-intro h1,
  .seai-grants-page .grant-archive-intro h2,
  .seai-grants-page .grant-section h2,
  .reviews-page .reviews-main h2 {
    font-size: clamp(28px, 8.4vw, 36px) !important;
  }

  .card,
  .hub-card,
  .form-card,
  .home-info-card,
  .home-quote-card,
  .how-step,
  .contractor-price-card,
  .subscription-option,
  .price-box,
  .notice,
  .rw-supporter-card,
  .blog-side-card,
  .blog-highlight,
  .blog-update-note,
  .grant-card,
  .review-choice-card {
    padding: 17px !important;
  }

  .blog-card-body,
  .rw-project-body {
    padding: 17px !important;
  }
}

/* Homepage mobile trade-card size refinement - 2026-08-03 v2
   Keep the original navigation, but make "Find the Right Trade" faster to scan
   by using compact two-column cards and contained artwork on phones. */
@media (max-width: 760px) {
  #trades .trades-grid {
    gap: 22px !important;
  }

  #trades .trade-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #trades .trade-card {
    min-height: 128px !important;
    padding: 9px 6px 10px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    justify-content: flex-start !important;
  }

  #trades .trade-icon.trade-image {
    width: 76px !important;
    height: 62px !important;
    min-width: 76px !important;
    flex: 0 0 62px !important;
    padding: 2px !important;
    border-radius: 12px !important;
  }

  #trades .trade-icon.trade-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: scale(1.18) !important;
  }

  #trades .trade-card:hover .trade-icon.trade-image img {
    transform: scale(1.22) !important;
  }

  #trades .trade-label {
    min-height: 2.35em !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    letter-spacing: .025em !important;
  }

  #trades .trade-card .trade-label + .mobile-trade-hint.trade-hint-bottom,
  #trades .trade-card .trade-label + .mobile-trade-hint {
    max-width: calc(100% - 8px) !important;
    margin-top: 3px !important;
    padding: 4px 7px !important;
    font-size: 8.5px !important;
    letter-spacing: .02em !important;
  }
}

@media (max-width: 360px) {
  #trades .trade-cards {
    gap: 7px !important;
  }

  #trades .trade-card {
    min-height: 120px !important;
    padding: 8px 5px 9px !important;
  }

  #trades .trade-icon.trade-image {
    width: 68px !important;
    height: 56px !important;
    min-width: 68px !important;
    flex-basis: 56px !important;
  }

  #trades .trade-label {
    font-size: 9.8px !important;
  }
}


/* Home-energy blog media-fit refinement - 2026-08-04 */
@media (max-width: 900px) {
  .blog-page .blog-cover--energy,
  .blog-page .blog-cover--energy img {
    width: 100% !important;
    max-width: 100% !important;
  }
  .blog-page .blog-cover--energy img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .blog-page .blog-upgrade-grid,
  .blog-page .blog-numbered-steps {
    width: 100% !important;
    max-width: 100% !important;
  }
  .blog-page .blog-upgrade-card,
  .blog-page .blog-numbered-steps li {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}


/* Preserve full branded blog artwork on phones - 2026-08-05 */
@media(max-width:760px){
  .blog-card-media.blog-card-media--artwork{
    aspect-ratio:4 / 3 !important;
    padding:5px !important;
    background:#050505 !important;
  }
  .blog-card-media.blog-card-media--contain{
    aspect-ratio:16 / 9 !important;
    padding:7px !important;
    background:#050505 !important;
  }
  .blog-card-media.blog-card-media--artwork img,
  .blog-card-media.blog-card-media--contain img{
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }
}

/* Final mobile override: show every blog image in full - 2026-08-30 */
@media(max-width:760px){
  .blog-card-media,
  .blog-card-media.blog-card-media--artwork,
  .blog-card-media.blog-card-media--contain{
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    padding:6px !important;
    overflow:hidden !important;
    background:#050505 !important;
  }
  .blog-card-media img,
  .blog-card-media.blog-card-media--artwork img,
  .blog-card-media.blog-card-media--contain img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }
  .blog-cover img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
  }
}