/* ==========================================================================
   Baja Pool Plaster - guide / article pages (lib-guides.js)
   Loaded with baja-home.css + baja-pages.css + baja-company.css.
   Editorial reading layout: ~70ch article column, sticky "In this guide"
   list on wide screens, callouts, stacked tables on phones.
   All content is visible by default - nothing here waits on JavaScript.
   ========================================================================== */

/* Hero ---------------------------------------------------------------------*/
:is(.elementor-page, .bp-landing) .art-hero {
  padding-top: calc(var(--hdr-h, 127px) + clamp(28px, 4vw, 58px));
  padding-bottom: clamp(48px, 5.6vw, 84px);
}
:is(.elementor-page, .bp-landing) .art-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4.6vw, 70px);
  align-items: center;
}
:is(.elementor-page, .bp-landing) .art-hero__copy { min-width: 0; }
:is(.elementor-page, .bp-landing) .art-hero h1 {
  font-size: clamp(34px, 3.7vw, 54px);
  line-height: 1.08;
  letter-spacing: -.032em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
:is(.elementor-page, .bp-landing) .art-hero__media { aspect-ratio: 4 / 3.3; box-shadow: 0 34px 70px -40px rgba(6, 46, 74, .55); }
:is(.elementor-page, .bp-landing) .art-meta { margin-bottom: 16px; }
:is(.elementor-page, .bp-landing) .art-meta p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
:is(.elementor-page, .bp-landing) .art-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 16px; border-radius: 50%; background: currentColor; opacity: .45; vertical-align: middle; }
:is(.elementor-page, .bp-landing) .art-meta__cat {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(10, 130, 208, .1);
  color: var(--pool-ink);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
:is(.elementor-page, .bp-landing) .art-meta__cat + span::before { display: none; }

/* Short answer (direct answer for readers, snippets and AI extraction) */
:is(.elementor-page, .bp-landing) .art-answer {
  margin-top: clamp(22px, 2.4vw, 30px);
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(10, 118, 190, .2);
  border-left: 4px solid var(--pool-500);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 50px -42px rgba(6, 46, 74, .6);
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.65;
}
:is(.elementor-page, .bp-landing) .art-answer p { margin: 0; max-width: 68ch; }
:is(.elementor-page, .bp-landing) .art-answer p + p { margin-top: 10px; }
:is(.elementor-page, .bp-landing) .art-answer .art-answer__eb {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pool-ink);
}
@media (max-width: 1100px) {
  :is(.elementor-page, .bp-landing) .art-hero__grid { grid-template-columns: minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .art-hero h1 { max-width: 26ch; }
  :is(.elementor-page, .bp-landing) .art-hero__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  :is(.elementor-page, .bp-landing) .art-hero { padding-top: calc(var(--hdr-h, 115px) + 22px); }
  :is(.elementor-page, .bp-landing) .art-hero h1 { font-size: clamp(30px, 8vw, 38px); }
  :is(.elementor-page, .bp-landing) .art-answer { font-size: 17px; }
  :is(.elementor-page, .bp-landing) .art-hero__media { aspect-ratio: 16 / 10; }
}

/* Body: aside (TOC + CTA) + article column ----------------------------------*/
:is(.elementor-page, .bp-landing) .art-body { padding-top: clamp(48px, 5.4vw, 80px); }
:is(.elementor-page, .bp-landing) .art {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
:is(.elementor-page, .bp-landing) .art__aside { display: grid; gap: 18px; min-width: 0; }
/* Guide sidebar = ONE sticky unit (TOC + estimate card) on the main page scroll:
   natural height, no inner scrollbar, stops at the end of the article grid. A
   unit taller than the viewport gets a lower --stick-top (baja-home.js). */
@media (min-width: 1024px) {
  :is(.elementor-page, .bp-landing) .art__aside { position: sticky; top: var(--stick-top, calc(var(--hdr-stuck, 74px) + 18px)); align-self: start; }
}
:is(.elementor-page, .bp-landing) .art__main { min-width: 0; max-width: 760px; }
:is(.elementor-page, .bp-landing) .art-body.section { overflow: visible; }

:is(.elementor-page, .bp-landing) .toc { padding: 20px 20px 18px; border-radius: var(--radius-md); border: 1px solid var(--line-light); background: var(--ice-soft); }
:is(.elementor-page, .bp-landing) .toc__t { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pool-ink); }
:is(.elementor-page, .bp-landing) .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
:is(.elementor-page, .bp-landing) .toc li { counter-increment: toc; }
:is(.elementor-page, .bp-landing) .toc a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 7px 0;
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
:is(.elementor-page, .bp-landing) .toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11.5px; font-weight: 700; color: var(--pool-500); padding-top: 2px; }
:is(.elementor-page, .bp-landing) .toc a:hover { color: var(--pool-ink); text-decoration: underline; text-underline-offset: 3px; }

:is(.elementor-page, .bp-landing) .aside-cta { padding: 20px; border-radius: var(--radius-md); background: var(--navy-900); color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
:is(.elementor-page, .bp-landing) .aside-cta p { margin: 0; }
:is(.elementor-page, .bp-landing) .aside-cta p + p { margin-top: 8px; }
:is(.elementor-page, .bp-landing) .aside-cta .aside-cta__t { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: #FFFFFF; }
:is(.elementor-page, .bp-landing) .aside-cta__links { display: grid; gap: 8px; margin-top: 14px !important; }
:is(.elementor-page, .bp-landing) .aside-cta__tel { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #FFFFFF; text-decoration: none; }
:is(.elementor-page, .bp-landing) .aside-cta .arrow-link { color: var(--pool-300); }

@media (max-width: 1023px) {
  :is(.elementor-page, .bp-landing) .art { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  :is(.elementor-page, .bp-landing) .art__aside { position: static; }
  :is(.elementor-page, .bp-landing) .aside-cta { display: none; }
  :is(.elementor-page, .bp-landing) .art__main { max-width: 760px; }
  :is(.elementor-page, .bp-landing) .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 640px) { :is(.elementor-page, .bp-landing) .toc ol { grid-template-columns: minmax(0, 1fr); } }

/* Article sections ---------------------------------------------------------*/
:is(.elementor-page, .bp-landing) .art-sec { scroll-margin-top: calc(var(--hdr-stuck, 74px) + 20px); }
:is(.elementor-page, .bp-landing) .art-sec + .art-sec { margin-top: clamp(46px, 5vw, 68px); padding-top: clamp(40px, 4.4vw, 58px); border-top: 1px solid var(--line-light); }
:is(.elementor-page, .bp-landing) .art-sec h2 { font-size: clamp(27px, 2.7vw, 38px); line-height: 1.14; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
:is(.elementor-page, .bp-landing) .art-sec .art-h3 { margin-top: 30px; }
:is(.elementor-page, .bp-landing) .art-sec .art-h3 .elementor-heading-title { font-size: clamp(20px, 1.8vw, 23px); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .art-sec > .elementor-widget + .elementor-widget,
:is(.elementor-page, .bp-landing) .art-sec > .e-con + .elementor-widget,
:is(.elementor-page, .bp-landing) .art-sec > .elementor-widget + .e-con,
:is(.elementor-page, .bp-landing) .art-sec > .e-con + .e-con { margin-top: 22px; }
:is(.elementor-page, .bp-landing) .art-sec > .elementor-widget-heading + .elementor-widget { margin-top: 18px; }

:is(.elementor-page, .bp-landing) .art-prose { margin-top: 0; font-size: 18px; line-height: 1.74; color: #3D5566; }
:is(.elementor-page, .bp-landing) .art-prose p { max-width: 70ch; }
:is(.elementor-page, .bp-landing) .art-prose p + p { margin-top: 18px; }
:is(.elementor-page, .bp-landing) .art-prose ul, :is(.elementor-page, .bp-landing) .art-prose ol { margin-top: 16px; }
:is(.elementor-page, .bp-landing) .art-prose ol { padding-left: 1.3em; display: grid; gap: 10px; }
:is(.elementor-page, .bp-landing) .art-prose ol li::marker { font-weight: 700; color: var(--pool-500); }
:is(.elementor-page, .bp-landing) .art-prose h3 { margin: 28px 0 8px; font-size: clamp(20px, 1.8vw, 23px); line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .art-prose b, :is(.elementor-page, .bp-landing) .art-prose strong { color: var(--ink); }
@media (max-width: 760px) { :is(.elementor-page, .bp-landing) .art-prose { font-size: 17px; line-height: 1.7; } }

/* Callouts */
:is(.elementor-page, .bp-landing) .callout {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(10, 118, 190, .22);
  background: linear-gradient(180deg, #F1F9FE, #E6F4FC);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.62;
}
:is(.elementor-page, .bp-landing) .callout p { margin: 0; max-width: 68ch; }
:is(.elementor-page, .bp-landing) .callout p + p, :is(.elementor-page, .bp-landing) .callout p + ul, :is(.elementor-page, .bp-landing) .callout ul + p { margin-top: 10px; }
:is(.elementor-page, .bp-landing) .callout ul { margin: 10px 0 0; padding-left: 1.15em; display: grid; gap: 6px; }
:is(.elementor-page, .bp-landing) .callout .callout__t {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pool-ink);
}
:is(.elementor-page, .bp-landing) .callout .callout__t::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
:is(.elementor-page, .bp-landing) .callout--tip { background: #FFFFFF; }
:is(.elementor-page, .bp-landing) .callout--warn { border-color: rgba(196, 120, 20, .3); background: linear-gradient(180deg, #FFF9EF, #FFF3E0); }
:is(.elementor-page, .bp-landing) .callout--warn .callout__t { color: #9A5A06; }
:is(.elementor-page, .bp-landing) .callout--warn .callout__t::before { -webkit-mask-image: none; mask-image: none; content: "!"; width: 18px; height: 18px; border-radius: 50%; background: #B8700F; color: #FFF; font-size: 12px; line-height: 18px; text-align: center; letter-spacing: 0; }
:is(.elementor-page, .bp-landing) .callout--local .callout__t::before { -webkit-mask-image: var(--ico-pin); mask-image: var(--ico-pin); }
:is(.elementor-page, .bp-landing) :is(.callout, .art-steps, .pair, .verdict, .art-fig__cap) a:not(.arrow-link) {
  color: var(--pool-ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(10, 111, 180, .35); text-underline-offset: 3px;
}
:is(.elementor-page, .bp-landing) .art-prose a:not(.arrow-link) { color: var(--pool-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(10, 111, 180, .35); text-underline-offset: 3px; }
:is(.elementor-page, .bp-landing) :is(.art-prose, .callout, .art-steps, .pair) a:hover { text-decoration-color: currentColor; }

/* Figures */
:is(.elementor-page, .bp-landing) .art-fig { margin: 0; }
:is(.elementor-page, .bp-landing) .art-fig__img img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: 0 26px 56px -42px rgba(6, 46, 74, .6); }
:is(.elementor-page, .bp-landing) .art-fig__cap { margin-top: 10px; }
:is(.elementor-page, .bp-landing) .art-fig__cap p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
:is(.elementor-page, .bp-landing) .art-split { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(22px, 3vw, 36px); align-items: start; }
:is(.elementor-page, .bp-landing) .art-fig--portrait .art-fig__img img { aspect-ratio: 9 / 14; object-fit: cover; }
:is(.elementor-page, .bp-landing) .art-figpair { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: clamp(16px, 2.4vw, 28px); }
:is(.elementor-page, .bp-landing) .art-figpair .art-fig__img img { aspect-ratio: 9 / 13; }
@media (max-width: 480px) { :is(.elementor-page, .bp-landing) .art-figpair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 640px) {
  :is(.elementor-page, .bp-landing) .art-split { grid-template-columns: minmax(0, 1fr); }
  :is(.elementor-page, .bp-landing) .art-split .art-fig--portrait { max-width: 260px; }
}

/* Tables: the shared .cmp-wrap stacks into cards <=760px */
:is(.elementor-page, .bp-landing) .art-table .cmp-wrap { margin-top: 0; }
:is(.elementor-page, .bp-landing) .art-table .cmp-note { margin-top: 12px; }
@media (min-width: 761px) {
  :is(.elementor-page, .bp-landing) .art-table .cmp-wrap th { padding: 16px 18px; font-size: 12px; }
  :is(.elementor-page, .bp-landing) .art-table .cmp-wrap td { padding: 16px 18px; font-size: 15.5px; }
  :is(.elementor-page, .bp-landing) .art-table .cmp-wrap td:first-child { width: auto; font-size: 15.5px; }
}

/* Verdict (dark aquatic card) */
:is(.elementor-page, .bp-landing) .verdict {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 100% 0%, rgba(34, 169, 224, .22), transparent 60%), var(--navy-900);
  color: var(--text-muted);
}
:is(.elementor-page, .bp-landing) .verdict p { margin: 0; }
:is(.elementor-page, .bp-landing) .verdict .verdict__eb { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pool-300); }
:is(.elementor-page, .bp-landing) .verdict .verdict__t { margin-top: 8px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.025em; color: #FFFFFF; }
:is(.elementor-page, .bp-landing) .verdict dl { display: grid; gap: 14px; margin: 20px 0 0; }
:is(.elementor-page, .bp-landing) .verdict dl > div { padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid rgba(99, 221, 216, .2); background: rgba(8, 44, 66, .55); }
:is(.elementor-page, .bp-landing) .verdict dt { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; color: #FFFFFF; }
:is(.elementor-page, .bp-landing) .verdict dd { margin: 4px 0 0; font-size: 16px; line-height: 1.6; }
:is(.elementor-page, .bp-landing) .verdict .verdict__foot { margin-top: 18px; font-size: 15.5px; line-height: 1.6; }
:is(.elementor-page, .bp-landing) .verdict a:not(.arrow-link) { color: var(--pool-300); }

/* Pros / cons pair */
:is(.elementor-page, .bp-landing) .pair > .elementor-widget-container, :is(.elementor-page, .bp-landing) .pair:not(:has(> .elementor-widget-container)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
:is(.elementor-page, .bp-landing) .pair__col { padding: 20px 22px; border-radius: var(--radius-md); border: 1px solid var(--line-light); background: #FFFFFF; }
:is(.elementor-page, .bp-landing) .pair__col--pro { background: linear-gradient(180deg, #F3FAFE, #FFFFFF); }
:is(.elementor-page, .bp-landing) .pair__col--con { background: linear-gradient(180deg, #FAFBFC, #FFFFFF); }
:is(.elementor-page, .bp-landing) .pair__t { margin: 0 0 10px; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .pair ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
:is(.elementor-page, .bp-landing) .pair li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.55; color: #3D5566; }
:is(.elementor-page, .bp-landing) .pair li::before { content: ""; position: absolute; left: 0; top: .32em; width: 15px; height: 15px; background: var(--pool-500); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
:is(.elementor-page, .bp-landing) .pair__col--con li::before { -webkit-mask: none; mask: none; top: .72em; width: 10px; height: 2px; left: 3px; background: #8A9BA8; }
@media (max-width: 640px) { :is(.elementor-page, .bp-landing) .pair > .elementor-widget-container, :is(.elementor-page, .bp-landing) .pair:not(:has(> .elementor-widget-container)) { grid-template-columns: minmax(0, 1fr); } }

/* Numbered steps */
:is(.elementor-page, .bp-landing) .art-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 14px; }
:is(.elementor-page, .bp-landing) .art-steps li {
  counter-increment: st;
  position: relative;
  padding: 18px 20px 18px 66px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-light);
  background: #FFFFFF;
}
:is(.elementor-page, .bp-landing) .art-steps li::before {
  content: counter(st);
  position: absolute; left: 18px; top: 17px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-900); color: #FFFFFF;
  font: 700 14px/32px var(--font-display); text-align: center;
}
:is(.elementor-page, .bp-landing) .art-steps h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.35; letter-spacing: -.018em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .art-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: #3D5566; }
:is(.elementor-page, .bp-landing) .art-steps p + p { margin-top: 8px; }
@media (max-width: 480px) { :is(.elementor-page, .bp-landing) .art-steps li { padding: 16px 16px 16px 58px; } :is(.elementor-page, .bp-landing) .art-steps li::before { left: 14px; } }

/* Inline service pointer */
:is(.elementor-page, .bp-landing) .svc-note__link {
  display: grid;
  gap: 2px;
  padding: 16px 52px 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(10, 118, 190, .24);
  background: #FFFFFF;
  text-decoration: none;
  position: relative;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
:is(.elementor-page, .bp-landing) .svc-note__link::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--pool-500); -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat; }
:is(.elementor-page, .bp-landing) .svc-note__link:hover { border-color: var(--pool-500); box-shadow: 0 18px 40px -32px rgba(6, 46, 74, .7); }
:is(.elementor-page, .bp-landing) .svc-note__eb { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pool-ink); }
:is(.elementor-page, .bp-landing) .svc-note__t { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .svc-note__d { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* FAQ (answers open by default) --------------------------------------------*/
:is(.elementor-page, .bp-landing) .art-faq__in { max-width: 860px; margin-inline: auto; }
:is(.elementor-page, .bp-landing) .art-faq__in > .elementor-widget-heading h2 { font-size: clamp(30px, 3.2vw, 44px); color: var(--ink); }
:is(.elementor-page, .bp-landing) .qa-list { margin-top: clamp(24px, 2.6vw, 34px); }
:is(.elementor-page, .bp-landing) .qa-list > .elementor-widget-container, :is(.elementor-page, .bp-landing) .qa-list:not(:has(> .elementor-widget-container)) { display: grid; gap: 14px; }
:is(.elementor-page, .bp-landing) .qa-item {
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-light);
  background: #FFFFFF;
  box-shadow: 0 18px 40px -36px rgba(6, 46, 74, .55);
}
:is(.elementor-page, .bp-landing) .qa-item h3 { margin: 0 0 8px; font-size: clamp(17.5px, 1.6vw, 19.5px); line-height: 1.35; letter-spacing: -.018em; color: var(--ink); }
:is(.elementor-page, .bp-landing) .qa-item p { margin: 0; max-width: 72ch; font-size: 16.5px; line-height: 1.66; color: #3D5566; }
:is(.elementor-page, .bp-landing) .qa-item p + p { margin-top: 8px; }
:is(.elementor-page, .bp-landing) .qa-item a { color: var(--pool-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(10, 111, 180, .35); text-underline-offset: 3px; }
:is(.elementor-page, .bp-landing) .qa-item a:hover { text-decoration-color: currentColor; }

/* Related */
:is(.elementor-page, .bp-landing) .rel-cards--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { :is(.elementor-page, .bp-landing) .rel-cards--n2 { grid-template-columns: minmax(0, 1fr); } }