/*
 * Unified responsive layout v2 / premium_partner_links_v1
 * Shared across all public PHP-rendered pages. This stylesheet deliberately
 * loads AFTER the page, article, footer and service-directory styles.
 * It does not crop marketing photography and does not rely on hiding body overflow.
 */
:root {
  --layout-max-width: 1120px;
  --layout-side-space: 16px;
  --layout-section-gap: clamp(14px, 2.1vw, 24px);
}

/* Prevent padding or decorative borders from making a box wider than its parent. */
html, body { min-width: 0; max-width: 100%; }
body, body * , body *::before, body *::after { box-sizing: border-box; }

/* Every primary section, media section and footer uses the same side gutters. */
body .container,
body .rbk-local__shell,
body .rbk-footer__shell,
body .rbk-footer__bottom-inner {
  width: min(var(--layout-max-width), calc(100% - var(--layout-side-space) - var(--layout-side-space)));
  max-width: var(--layout-max-width);
  margin-inline: auto;
}

/* The all-services directory uses a legacy standalone wrapper. Align it too. */
body .rbk-directory-main {
  width: min(var(--layout-max-width), calc(100% - var(--layout-side-space) - var(--layout-side-space)));
  max-width: var(--layout-max-width);
  margin-inline: auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Nested columns must shrink to available width instead of forcing horizontal scroll. */
body :is(.container, .hero, .section, main, article, .hero-grid, .split,
  .grid-4, .process, .contact-grid, .choice-layout, .service-grid-premium,
  .premium-article, .guide-hero, .guide-grid, .guide-body-grid,
  .seo-directory, .seo-directory__head, .seo-directory__featured,
  .seo-directory__groups, .service-area, .service-area__accordion,
  .rbk-footer, .rbk-footer__shell, .rbk-footer__grid) { min-width: 0; }
body :is(.hero-grid, .split, .contact-grid, .choice-layout, .grid-4,
  .process, .service-grid-premium) > * { min-width: 0; max-width: 100%; }

/* Two equally-sized columns keep the photo and explanation aligned. */
body .hero-grid,
body .split,
body .choice-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-section-gap);
  align-items: start;
}
body .hero-grid > :is(.hero-card, .image-box, .choice-media),
body .split > :is(.hero-card, .image-box, .choice-media),
body .choice-layout > :is(.hero-card, .image-box, .choice-media) {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* Repeated cards occupy the same width, even when their contents vary. */
body .grid-4,
body .process,
body .service-grid-premium { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body .card, body .step, body .service-card-premium,
body .content-box, body .choice-panel { min-width: 0; max-width: 100%; }

/* Photographs retain their proportions; no crop/stretch and no side overflow. */
body img, body video, body iframe, body canvas, body picture, body svg {
  max-width: 100%;
}
/* Natural media ratios also apply outside the known photo cards. Existing
   class-specific logo boxes keep their original sizes and object-fit rules. */
body img, body video { height: auto; object-fit: contain; }
body :is(.hero-card, .image-box, .choice-media) img,
body .hero-grid img,
body .split img,
body .choice-layout img,
body .article img,
body .premium-article img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
body :is(.hero-card, .image-box, .choice-media) { min-width: 0; max-width: 100%; }
body :is(.hero-card, .image-box, .choice-media) picture { display: block; width: 100%; }

/* Very long URLs/text and dynamic contact details wrap inside their own cards. */
body :is(.hero-grid, .split, .card, .step, .content-box, .choice-panel,
  .service-card-premium, .article, .premium-article,
  .service-area, .rbk-footer) :is(h1,h2,h3,h4,p,li,small,strong,span,a) {
  overflow-wrap: anywhere;
}
body .brand, body .brand-text, body .rbk-footer__brand-wordmark { min-width: 0; }
body .brand-text { overflow-wrap: anywhere; }
body :is(.cta-group, .quick-contact, .choice-media__chips) { max-width: 100%; }
body :is(.cta-group, .quick-contact) > a { max-width: 100%; white-space: normal; text-align: center; }

/* Wide data tables must scroll inside their module, never the entire page. */
body :is(.guide-table-wrap, .table-responsive, .seo-directory__scroll,
  .service-area__scroll) { max-width: 100%; }
body .guide-table-wrap { -webkit-overflow-scrolling: touch; }

/* Make primary article and contact boxes line up with the same outer container. */
body :is(.article, .premium-article, .contact, .seo-directory, .service-area) {
  max-width: 100%;
}

/* Tablet: turn the two-up hero/media sections into comfortable full-width rows. */
@media (max-width: 900px) {
  body .hero-grid, body .split, body .choice-layout, body .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body .grid-4, body .process, body .service-grid-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body :is(.hero-card, .image-box, .choice-media, .content-box, .choice-panel) {
    width: 100%;
  }
}

/* Phones: one content column, equal image width and comfortable edge spacing. */
@media (max-width: 600px) {
  :root { --layout-side-space: 12px; --layout-section-gap: 14px; }
  body .hero-grid, body .split, body .choice-layout, body .contact-grid,
  body .grid-4, body .process, body .service-grid-premium {
    grid-template-columns: minmax(0, 1fr);
  }
  body .hero { padding-block: 22px 15px; }
  body .section { padding-block: 17px; }
  body .hero-card, body .image-box, body .choice-media {
    padding: clamp(8px, 2.3vw, 12px);
    border-radius: 18px;
  }
  body :is(.hero-card, .image-box, .choice-media) img { border-radius: 12px; }
  body .card, body .step, body .service-card-premium,
  body .content-box, body .choice-panel {
    width: 100%;
    max-width: 100%;
  }
  body .nav { min-width: 0; }
  body .nav .brand { max-width: 100%; }
  body .nav .brand img { flex: 0 0 auto; }
  body .nav .cta-group { width: 100%; }
  body .nav .cta-group .btn { flex: 1 1 132px; min-width: 0; }
  body :is(.cta-group, .quick-contact) > .btn { overflow-wrap: anywhere; }
  body .guide-table-wrap { max-width: 100%; }
}

/* Smallest common smartphone widths (including 320px compact models). */
@media (max-width: 359px) {
  :root { --layout-side-space: 10px; }
  body .nav .cta-group { gap: 7px; }
  body .nav .cta-group .btn { padding: 10px 8px; font-size: 13px; }
  body .quick-contact .btn { flex: 1 1 100%; }
  body :is(.hero-card, .image-box, .choice-media, .content-box, .choice-panel) {
    padding: 10px;
  }
}

/* Remaining template variants and nested modules. Only the layout containers
   shrink; decorative icons, logo boxes and the existing photo widths stay intact. */
body :is(.nav, .brand, .site-main-menu__inner, .grid-3, .hero-points,
  .choice-list, .info-strip, .faq-grid, .rbk-guide, .rbk-local) {
  min-width: 0;
  max-width: 100%;
}
body :is(.nav, .brand, .site-main-menu__inner, .grid-3, .hero-points,
  .choice-list li, .info-strip, .faq-grid, .guide-alert, .guide-toc,
  .guide-toc__links, .guide-intro, .guide-section__heading, .guide-cta,
  .guide-cta__actions, .rbk-guide__hero-top, .rbk-guide__tags,
  .rbk-guide__panel-heading, .rbk-guide__spotlight, .rbk-guide__safety,
  .rbk-guide__outro, .rbk-guide__actions, .rbk-guide__faq-item summary,
  .rbk-local__top, .rbk-local__all > summary, .rbk-local__bottom,
  .rbk-footer__cta, .rbk-footer__cta-actions, .rbk-footer__contact-list,
  .rbk-footer__contact-item, .rbk-footer__quicknav,
  .rbk-footer__quicknav-items, .rbk-footer__bottom-inner) > * {
  min-width: 0;
  max-width: 100%;
}
body .nav { flex-wrap: wrap; }
body .nav .brand img { flex-shrink: 0; }
body .site-main-menu a { white-space: normal; overflow-wrap: anywhere; }
body .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .choice-list li { grid-template-columns: 24px minmax(0, 1fr); }

/* Dynamic business names, contact details and menu labels must fit even when
   they contain a long URL or an unbroken Latin word. */
body :is(.nav, .contact, .info-strip, .faq-grid, .rbk-guide, .rbk-local,
  .rbk-footer, .core-v2) :is(h1, h2, h3, h4, p, li, small, strong, span, a, address) {
  overflow-wrap: anywhere;
}
body :is(.badge, .chip, .guide-toc__links a, .guide-section__meta,
  .guide-cta__button, .rbk-guide__example-note, .rbk-guide__btn,
  .rbk-footer__button) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
body .rbk-guide__actions { min-width: 0; max-width: 100%; }
body .rbk-guide a.rbk-guide__btn,
body .rbk-footer a.rbk-footer__button { white-space: normal; overflow-wrap: anywhere; }
body .rbk-footer__cta-actions { flex-shrink: 1; flex-wrap: wrap; }
body .rbk-footer__credits > span:not(.rbk-footer__credit-divider) { white-space: normal; }
body .rbk-footer__quicknav { flex-wrap: wrap; }

/* Preserve table structure and reading size. Horizontal panning belongs to
   the table/code region, while the document itself remains viewport-width. */
body :is(.guide-table-wrap, .table-responsive) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
body pre { min-width: 0; max-width: 100%; overflow-x: auto; }

@media (max-width: 980px) {
  body .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 580px) {
  body .rbk-guide__spotlight { grid-template-columns: 31px minmax(0, 1fr); }
  body .rbk-guide__safety { grid-template-columns: 30px minmax(0, 1fr); }
}