/* ==========================================================================
   Baja Pool Plaster - category archive landings (/reviews/, /projects/)
   The designed page is a UAE Custom Block embedded in the category
   description ([hfe_template]), so it renders inside Hello Elementor's
   archive <main>. This file (1) lets that block run full width and
   (2) hides the theme's default archive heading and raw post list, which the
   landing replaces. The legacy posts keep their URLs.
   Also: the 2x2 review cards and the project gallery.
   ========================================================================== */

/* Theme archive shell ------------------------------------------------------*/
/* main#content: baja-global.css pads it by the header height on inner
   pages; the landing hero already does that, so it is reset here */
body:is(.category-reviews, .category-projects) main#content.site-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
body:is(.category-reviews, .category-projects) .page-header { margin: 0; padding: 0; }
/* Fallback only: the mu-plugin baja-archive-landing.php removes the theme H1
   and post loop from the markup on these two archives */
body:is(.category-reviews, .category-projects) .page-header > .entry-title,
body:is(.category-reviews, .category-projects) .site-main > .page-content,
body:is(.category-reviews, .category-projects) .site-main > .pagination { display: none; }
body:is(.category-reviews, .category-projects) .archive-description { margin: 0; }
body:is(.category-reviews, .category-projects) .page-header > p:empty { display: none; }

/* Verified Google reviews: 2x2 cards -----------------------------------------*/
.bp-landing .rv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(30px, 3.4vw, 46px); }
.bp-landing .rv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(10, 118, 190, .16);
  background: #FFFFFF;
  box-shadow: 0 30px 60px -48px rgba(6, 46, 74, .55);
}
.bp-landing .rv-card::before {
  content: "\201C";
  display: block;
  height: 46px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 84px;
  line-height: 1;
  color: var(--pool-400);
  opacity: .55;
}
.bp-landing .rv-card blockquote {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(18.5px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--ink);
}
.bp-landing .rv-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 24px;
}
.bp-landing .rv-card__name { font-size: 16px; font-weight: 700; color: var(--ink); }
.bp-landing .rv-card__src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--ice);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pool-ink);
}
.bp-landing .rv-note { margin-top: 22px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.bp-landing .rv-note a { color: var(--pool-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .bp-landing .rv-grid { grid-template-columns: minmax(0, 1fr); } }

/* Areas note under the city pills */
.bp-landing .area-legacy { margin-top: 18px; max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Project gallery (the four real photos, never upscaled past 640px) --------*/
.bp-landing .proj-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(30px, 4.4vw, 64px);
  align-items: start;
  margin-top: clamp(30px, 3.4vw, 46px);
}
.bp-landing .proj-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); max-width: 1296px; }
.bp-landing .proj-gallery .elementor-widget-image { margin: 0; }
.bp-landing .proj-gallery img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 50px -40px rgba(6, 46, 74, .6);
}
.bp-landing .proj-card {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--radius-lg);
  background: var(--ice);
  border: 1px solid var(--line-light);
}
.bp-landing .proj-card h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; color: var(--ink); }
.bp-landing .proj-card__meta { margin-top: 12px; }
.bp-landing .proj-card__meta dl { display: grid; gap: 10px; margin: 0; }
.bp-landing .proj-card__meta dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; }
.bp-landing .proj-card__meta dt { font-weight: 700; color: var(--ink); }
.bp-landing .proj-card__meta dd { margin: 0; color: var(--ink-soft); }
.bp-landing .proj-card__text { margin-top: 18px; font-size: 16px; line-height: 1.65; color: #3D5566; }
.bp-landing .proj-card__text p + p { margin-top: 10px; }
.bp-landing .proj-card .arrow-link { margin-top: 20px; }
@media (max-width: 1024px) { .bp-landing .proj-feature { grid-template-columns: minmax(0, 1fr); } .bp-landing .proj-gallery { max-width: 1296px; } }
@media (max-width: 480px) { .bp-landing .proj-gallery { grid-template-columns: minmax(0, 1fr); } }

/* Projects hero: the real photos are 640px wide, so the hero image is capped
   there instead of being stretched when the hero stacks */
.bp-landing .proj-hero .page-hero__media { max-width: 640px; }
@media (max-width: 960px) { .bp-landing .proj-hero .page-hero__media { aspect-ratio: 4 / 3; } }

/* Theme reset overrides (Hello gives figure a 40px side margin and
   figcaption italics) + inline links in intro copy */
.bp-landing .rv-card { margin: 0; }
.bp-landing .rv-card figcaption { font-style: normal; }
.bp-landing :is(.page-hero__lede, .area-legacy) a {
  color: var(--pool-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(10, 111, 180, .35);
  text-underline-offset: 3px;
}
.bp-landing :is(.page-hero__lede, .area-legacy) a:hover { text-decoration-color: currentColor; }

/* Legacy city review posts (archived pages, noindex) -----------------------*/
:is(.elementor-page, .bp-landing) .legacy-post {
  padding-top: calc(var(--hdr-h, 127px) + clamp(40px, 6vw, 90px));
  padding-bottom: clamp(80px, 10vw, 140px);
}
:is(.elementor-page, .bp-landing) .legacy-post__in { max-width: 820px; }
:is(.elementor-page, .bp-landing) .legacy-post h1 {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.034em;
  color: var(--ink);
}
:is(.elementor-page, .bp-landing) .legacy-post .page-hero__lede { margin-top: 20px; font-size: 19px; line-height: 1.6; color: var(--ink-soft); }
:is(.elementor-page, .bp-landing) .legacy-post .page-hero__lede p { max-width: 62ch; }
:is(.elementor-page, .bp-landing) .legacy-note {
  margin-top: 28px;
  padding: 20px 22px;
  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, .85);
  font-size: 16px;
  line-height: 1.6;
  color: #3D5566;
}
:is(.elementor-page, .bp-landing) .legacy-note p { margin: 0; max-width: 66ch; }
:is(.elementor-page, .bp-landing) .legacy-note p + p { margin-top: 8px; }
:is(.elementor-page, .bp-landing) .legacy-note .legacy-note__t { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pool-ink); }
:is(.elementor-page, .bp-landing) .legacy-note a { color: var(--pool-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { :is(.elementor-page, .bp-landing) .legacy-post { padding-top: calc(var(--hdr-h, 115px) + 26px); } }