/* BuildKitly UI fix sprint — agent D1: Home / Services / Pricing / Licenses page bodies (all languages).
   Class-scoped, so every Polylang translation gets the same fix. Loads after bk-home-*, bk-hp, bk-pg, bk-pr
   (glob order), with higher specificity where it overrides them. Content fixes (service copy, FAQ heading,
   ES tier name, licenses CTAs) come from inc/bk-fix-pages-a.php. No motion here (bk-motion.css owns it). */

/* =====================================================================
   HOME
   ===================================================================== */

/* R9 — tools: keep all 4 cards between 901 and 1200 px (was 3 + 4th hidden).
   2 x 2 up to 1099 px, 4 in a row from 1100 px. */
@media (min-width: 901px) and (max-width: 1200px) {
  .elementor .elementor-element.elementor-widget.bk-hp-tools-grid.bk-hp-tools-grid .elementor-loop-container > .e-loop-item.e-loop-item { display: block; }
  .elementor .elementor-element.elementor-widget.bk-hp-tools-grid.bk-hp-tools-grid .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) and (max-width: 1200px) {
  .elementor .elementor-element.elementor-widget.bk-hp-tools-grid.bk-hp-tools-grid .elementor-loop-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* R10 — featured themes 768–900 px: all 3 cards in a horizontal scroller (third card peeks = affordance)
   instead of hiding the 3rd one. */
@media (min-width: 768px) and (max-width: 900px) {
  .elementor .elementor-element.elementor-widget.bk-hp-themes--featured.bk-hp-themes--featured .elementor-loop-container {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 22px) / 2.15);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0;
    padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--e-global-color-border, #d9dbd6) transparent;
  }
  .elementor .bk-hp-themes--featured.bk-hp-themes--featured .elementor-loop-container > .e-loop-item.e-loop-item { display: block; scroll-snap-align: start; }
}

/* R11 — tools below 480 px: one column, compact horizontal card (icon | pill / title / excerpt). */
@media (max-width: 479px) {
  .elementor .elementor-element.elementor-widget.bk-hp-tools-grid.bk-hp-tools-grid .elementor-loop-container { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .elementor .bk-hp-tools-grid .e-loop-item > .e-con.bk-tl-card.bk-tl-card {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-auto-rows: auto; column-gap: 16px; row-gap: 6px;
    align-content: start; min-height: 0;
  }
  .elementor .bk-hp-tools-grid .bk-tl-card.bk-tl-card > .e-con.bk-tl-card-icons { grid-column: 1; grid-row: 1 / span 3; margin: 0; --margin-bottom: 0px; width: 40px; }
  .elementor .bk-hp-tools-grid .bk-tl-card.bk-tl-card > .elementor-widget.bk-tl-pill {
    position: static; grid-column: 2; grid-row: 1; justify-self: start; margin: 0; inset: auto; transform: none;
  }
  .elementor .bk-hp-tools-grid .bk-tl-card.bk-tl-card > .elementor-widget.bk-tl-card-title { grid-column: 2; grid-row: 2; margin: 0; width: auto; }
  .elementor .bk-hp-tools-grid .bk-tl-card.bk-tl-card > .elementor-widget.bk-tl-card-excerpt { grid-column: 2; grid-row: 3; margin: 0; width: auto; }
  .elementor .bk-hp-tools-grid .bk-tl-card .bk-tl-card-excerpt,
  .elementor .bk-hp-tools-grid .bk-tl-card .bk-tl-card-excerpt p { font-size: 14px; line-height: 1.55; }
}

/* R13 — logo strip label: never squeeze it into a 170 px column.
   901–1199 px: label on its own row above the logos; >= 1200 px: one line. */
@media (min-width: 901px) {
  .elementor .elementor-element.elementor-widget.bk-ha-band-label.bk-ha-band-label { width: auto; max-width: none; --container-widget-width: auto; }
  .elementor .bk-ha-band-label .elementor-heading-title { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .elementor .elementor-element.elementor-widget.bk-ha-band-label.bk-ha-band-label { width: 100%; max-width: 100%; --container-widget-width: 100%; }
  .bk-ha-band > .e-con-inner, .bk-ha-band.e-con-full { row-gap: 18px; --row-gap: 18px; }
}

/* =====================================================================
   SERVICES (.bk-pg-services)
   ===================================================================== */

/* V2 — 1024 px: 4 columns (no 3 + 3 + 2 with an empty slot); 481–900 px: 2 columns. */
@media (min-width: 901px) and (max-width: 1279px) {
  .elementor .bk-pg-services .e-con.e-con.e-con.bk-pg-grid { --e-con-grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 480px) and (max-width: 900px) {
  .elementor .bk-pg-services .e-con.e-con.e-con.bk-pg-grid { --e-con-grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* V1 — below 480 px: one column, title and arrow on one row, readable body copy. */
@media (max-width: 479px) {
  .elementor .bk-pg-services .e-con.e-con.e-con.bk-pg-grid { --e-con-grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); --row-gap: 12px; row-gap: 12px; }
  .elementor .bk-pg-services .bk-pg-card.bk-pg-card { min-height: 0; }
  .elementor .bk-pg-services .bk-pg-card .elementor-widget.bk-pg-card-title { flex: 1 1 auto; }
  .elementor .bk-pg-services .bk-pg-card .elementor-widget.bk-pg-card-arrow { flex: 0 0 auto; margin-left: auto; }
  .elementor .bk-pg-services .bk-pg-card-copy.bk-pg-card-copy,
  .elementor .bk-pg-services .bk-pg-card-copy.bk-pg-card-copy p { font-size: 14px; line-height: 1.6; }
}
/* V3 copy is 1 line at desktop, up to 3 in 4 columns: keep card rows even */
.bk-pg-services .bk-pg-card-copy p { margin: 0; }

/* V4 — enquiry section: heading above a full-width form below 900 px. */
@media (max-width: 900px) {
  .elementor .bk-pg-services .e-con.e-con.e-con.bk-pg-split { --e-con-grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); --row-gap: 28px; row-gap: 28px; }
  .elementor .bk-pg-services .bk-pg-split .bk-pg-h2 .elementor-heading-title { text-wrap: balance; }
  .elementor .bk-pg-services .bk-pg-split .bk-pg-prose { max-width: 62ch; }
}

/* =====================================================================
   PRICING + LICENSES — license tier cards (loop 367 in .bk-pr-lic-grid)
   ===================================================================== */

/* P1 / L1 — equal-height cards, fine print + button pinned to the bottom, at every width. */
.elementor .bk-pr-lic-grid .e-loop-item > .e-con.bk-pr-lic { height: 100%; }
.elementor .bk-pr-lic-grid .bk-pr-lic > .elementor-widget.bk-pr-lic-fine { margin-top: auto; }
/* when a card has no fine print, the button itself goes to the bottom */
.elementor .bk-pr-lic-grid .bk-pr-lic:not(:has(> .bk-pr-lic-fine)) > .elementor-widget.bk-pr-btn { margin-top: auto; }

/* Tablet (768–1024): 3-up on both pages, number scales with the card instead of filling it. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor .elementor-element.elementor-widget.bk-pr-lic-grid.bk-pr-lic-grid .elementor-loop-container { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .elementor .bk-pr-lic-grid .bk-pr-lic-sites .elementor-heading-title.elementor-heading-title { font-size: clamp(28px, 4.3vw, 44px); line-height: 1.12; }
  .elementor .bk-pr-lic-grid .bk-pr-lic-sites .elementor-heading-title small { font-size: 15px; }
  .elementor .bk-pr-lic-grid .bk-pr-lic-feats .elementor-icon-list-text { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .elementor .bk-pr-lic-grid .e-con.bk-pr-lic.bk-pr-lic { --padding-top: 20px; --padding-right: 18px; --padding-bottom: 20px; --padding-left: 18px; }
  .elementor .bk-pr-lic-grid .bk-pr-lic-desc, .elementor .bk-pr-lic-grid .bk-pr-lic-desc p { font-size: 14px; line-height: 1.55; }
  .elementor .bk-pr-lic-grid .bk-pr-btn .elementor-button { padding-left: 16px; padding-right: 16px; }
}
/* "Unlimited sites": the unit may wrap under the number, but never the word itself */
.elementor .bk-pr-lic-grid .bk-pr-lic-sites .elementor-heading-title { max-width: 100%; }

/* =====================================================================
   PRICING (.bk-pr-pricing)
   ===================================================================== */

/* P2 — FAQ gets its own heading (inserted by PHP) and normal section spacing. */
.elementor .bk-pr-pricing .elementor-widget.bk-pr-faq-grid { margin-top: clamp(56px, 7vw, 80px); }
.bk-pr-pricing .bk-fxa-faq-h {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--e-global-typography-primary-font-family), Helvetica, sans-serif;
  font-size: var(--e-global-typography-primary-font-size); font-weight: var(--e-global-typography-primary-font-weight, 500);
  line-height: var(--e-global-typography-primary-line-height); letter-spacing: var(--e-global-typography-primary-letter-spacing);
  color: var(--e-global-color-primary);
}

/* P3 — bundles: 1 column on phones; "Planned" tag sits above the H2 instead of wrapping under it. */
@media (max-width: 599px) {
  .elementor .bk-pr-pricing .e-con.e-con.e-con.bk-pr-grid { --e-con-grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .elementor .bk-pr-pricing .e-con.bk-pr-section-top.bk-pr-section-top:has(.bk-pr-pill) { --gap: 12px; row-gap: 12px; }
  .elementor .bk-pr-pricing .bk-pr-section-top .elementor-widget.bk-pr-pill { order: -1; }
}

/* P4 — dark CTA box: both buttons full width on phones. */
@media (max-width: 767px) {
  .elementor .bk-pr-pricing .bk-pr-cta .elementor-widget.bk-pr-btn { width: 100%; max-width: 100%; --container-widget-width: 100%; flex: 1 1 100%; }
  .elementor .bk-pr-pricing .bk-pr-cta .bk-pr-btn .elementor-button { width: 100%; justify-content: center; }
}

/* =====================================================================
   LICENSES (.bk-pr-licenses)
   ===================================================================== */

/* L2 — clearer H1 / H2 hierarchy and a readable measure for the policy prose. */
.elementor .bk-pr-licenses .bk-pr-h1 .elementor-heading-title.elementor-heading-title { font-size: clamp(2.6rem, 6.4vw, 4.9rem); }
@media (max-width: 767px) {
  .elementor .bk-pr-licenses .bk-pr-h2 .elementor-heading-title.elementor-heading-title { font-size: clamp(1.5rem, 6.4vw, 1.75rem); }
}
.elementor .bk-pr-licenses .bk-pr-prose .elementor-widget-container > *,
.elementor .bk-pr-licenses .bk-pr-prose > p, .elementor .bk-pr-licenses .bk-pr-prose > ul,
.elementor .bk-pr-licenses .bk-pr-lead p { max-width: 60ch; }  /* Arial ch ~ 8.9px: 60ch = ~70 characters per line */

/* L1 — tiers 3-up from 768 px (same component as /pricing/; tablet rule above). */

/* L3 — the support link becomes a sentence with the link, spaced as the page's closing line. */
.elementor .bk-pr-licenses .elementor-widget.bk-pr-textlink { margin-top: 32px; }
.bk-pr-licenses .bk-pr-textlink .bk-fxa-lead { color: var(--e-global-color-text); font-weight: 400; margin-right: 4px; }
.bk-pr-licenses .bk-pr-textlink .elementor-heading-title a { white-space: nowrap; }