/* ==========================================================================
   LaSpa Blocks — shared design system
   Sections   .lbuy  heroes (1, 2)        .lsm   split image/text (4, 5)
              .lmg   four cards (3)       .lacc  accordion (6)
              .lct   contact + team (7)   .lcar  image carousel (8)
   ========================================================================== */

/* ---------- Brand tokens (change a colour here, it changes everywhere) ---------- */
:root {
  --lmg-ink: #232620;          /* dark green text */
  --lmg-muted: #8A7A50;        /* gold-brown labels and secondary text */
  --lmg-btn: #E2D8C3;          /* button background (sand beige) */
  --lmg-btn-hover: #6f7859;    /* button hover, accordion icon */
  --lmg-olive: #8a946f;        /* carousel dot, list bullets */
  --lmg-accent: #46573D;       /* contact links */
  --lmg-bg: #F7EFE9;           /* beige section background */
  --lmg-bg-blush: #f2e8e3;     /* alternative blush background */
  --lmg-line: #e3e0d8;         /* card dividers */
  --lmg-rule: #DDD2BC;         /* accordion dividers */
  --lmg-serif: "Caslon 540 LT Std", "Libre Caslon Text", Georgia, serif;
  --lmg-sans: "Brown LL", "Helvetica Neue", Arial, sans-serif;
}

.lbuy, .lmg, .lsm, .lacc, .lct, .lcar { color: var(--lmg-ink); box-sizing: border-box; }
.lbuy *, .lmg *, .lsm *, .lacc *, .lct *, .lcar * { box-sizing: border-box; }

/* ---------- Full screen width on the live site ----------
   !important is needed: WordPress's content-width rules set max-width and
   "margin: auto !important" on page content, which otherwise squeezes
   these sections into the narrow text column. */
.lbuy.lbuy-hero, .lmg, .lsm, .lacc, .lct, .lcar {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* ...but not inside the editor canvas, where 100vw would overflow */
.editor-styles-wrapper .lbuy.lbuy-hero,
.editor-styles-wrapper .lmg,
.editor-styles-wrapper .lsm,
.editor-styles-wrapper .lacc,
.editor-styles-wrapper .lct,
.editor-styles-wrapper .lcar {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Let the full-width sections extend past the theme's content column.
   Without this, the theme can clip them at the column edges. */
.entry-content { overflow: visible !important; }

/* Classic themes wrap group content in an extra div — make it invisible to the layout */
.lbuy .wp-block-group__inner-container,
.lmg .wp-block-group__inner-container,
.lsm .wp-block-group__inner-container,
.lacc .wp-block-group__inner-container,
.lct .wp-block-group__inner-container,
.lcar .wp-block-group__inner-container { display: contents; }

/* Headings never split a word mid-way (the theme allows breaking anywhere) */
.lbuy :is(h1, h2, h3), .lmg :is(h1, h2, h3), .lsm :is(h1, h2, h3),
.lacc :is(h1, h2, h3), .lct :is(h1, h2, h3) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* ---------- Shared: eyebrow labels ---------- */
.lbuy .lbuy-eyebrow, .lacc .lbuy-eyebrow,
.lmg .lsm-label, .lsm .lsm-label, .lct .lsm-label {
  font-family: var(--lmg-sans);
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--lmg-muted);
  margin: 0 0 14px;
}
.lbuy .lbuy-eyebrow, .lacc .lbuy-eyebrow { font-weight: 500; }
.lmg .lsm-label, .lsm .lsm-label, .lct .lsm-label { font-weight: 300; }

/* ---------- Shared: primary button (.lbuy-btn on a Button block) ---------- */
body .wp-block-button.lbuy-btn .wp-block-button__link {
  display: inline-block;
  background: var(--lmg-btn);
  color: var(--lmg-ink);
  padding: 15px 30px;
  font-family: var(--lmg-sans);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
body .wp-block-button.lbuy-btn .wp-block-button__link:hover,
body .wp-block-button.lbuy-btn .wp-block-button__link:focus-visible {
  color: #fff;
  background: var(--lmg-btn-hover);
}

/* ---------- Shared: secondary text link (.lbuy-textlink on a Button block) ---------- */
body .wp-block-button.lbuy-textlink .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  color: var(--lmg-muted);
  padding: 0 0 6px;
  font-family: var(--lmg-sans);
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid #D8CDB8;
  border-radius: 0;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
body .wp-block-button.lbuy-textlink .wp-block-button__link:hover,
body .wp-block-button.lbuy-textlink .wp-block-button__link:focus-visible {
  background: none;
  color: var(--lmg-ink);
  border-bottom-color: var(--lmg-ink);
}

body .wp-block-button.lbuy-btn .wp-block-button__link:focus-visible,
body .wp-block-button.lbuy-textlink .wp-block-button__link:focus-visible,
.lcar-dot:focus-visible,
.lacc summary:focus-visible {
  outline: 2px solid var(--lmg-ink);
  outline-offset: 3px;
}

/* ==========================================================================
   1–2  HEROES  (.lbuy)
   ========================================================================== */
.lbuy { background: var(--lmg-bg); font-family: var(--lmg-serif); }
/* margin-top: the gap between the page title banner and the hero */
.lbuy.lbuy-hero { margin-top: 40px; padding: 0; overflow: hidden; }
.lbuy .lbuy-hero-row {
  display: flex;
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
}
.lbuy .lbuy-hero-text {
  width: min(560px, 46vw);
  flex: none;
  position: relative;
  z-index: 2;
  background: var(--lmg-bg);
  padding: 20px 56px 20px clamp(24px, 6vw, 110px);
  margin: 0;
}
.lbuy .lbuy-hero-text h1 {
  font-family: var(--lmg-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.08;
  color: var(--lmg-ink);
  margin: 0 0 22px;
}
.lbuy .lbuy-hero-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--lmg-ink);
  max-width: 38ch;
  margin: 0 0 30px;
}
.lbuy .lbuy-hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.lbuy .lbuy-hero-phone { font-size: 14px; color: var(--lmg-ink); margin: 0; }
.lbuy .lbuy-hero-phone a { color: inherit; }
.lbuy .lbuy-hero-media {
  flex: 1;
  margin: 0 0 0 -120px;
  height: 640px;
  position: relative;
}
.lbuy .lbuy-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   3  FOUR CARDS  (.lmg)
   ========================================================================== */
.lmg {
  padding: 50px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lmg .lmg-intro {
  width: 90%;
  max-width: 760px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0 0 56px;
}
.lmg .lmg-intro h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0 0 22px; }
.lmg .lmg-intro p:not(.lsm-label) { font-size: 17px; line-height: 1.75; color: var(--lmg-ink); margin: 0; }
.lmg .lmg-cards {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.lmg .lmg-card {
  padding: 0 22px;
  margin: 0;
  text-align: center;
  border-right: 1px solid var(--lmg-line);
  display: flex;
  flex-direction: column;
}
.lmg .lmg-card:last-child { border-right: none; }
.lmg .lmg-card .wp-block-image { margin: 0 0 22px; }
.lmg .lmg-card .wp-block-image img { width: 100%; height: 220px; object-fit: cover; display: block; }
.lmg .lmg-card h3 { letter-spacing: .2px; font-weight: 600; font-size: 20px; margin: 0 0 12px; }
.lmg .lmg-card .lmg-card-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--lmg-ink);
  margin: 0 0 14px;
  flex: 1 0 auto;              /* pushes price + button to the bottom */
}
.lmg .lmg-card .lmg-price { font-weight: 600; font-size: 18px; margin: 0 0 18px; }
.lmg .lmg-card-actions { margin: 0; }
.lmg .lmg-card-actions .lbuy-btn { width: 100%; }
body .lmg .lmg-card-actions .lbuy-btn .wp-block-button__link { display: block; width: 100%; text-align: center; }

/* ==========================================================================
   4–5  SPLIT IMAGE / TEXT  (.lsm, .lsm--blush for the blush background)
   ========================================================================== */
.lsm {
  background: var(--lmg-bg);
  font-size: 17px;
  line-height: 1.6;
  padding: 110px 8vw;
}
.lsm.lsm--blush { background: var(--lmg-bg-blush); }
.lsm .lsm-row-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 60px;
  align-items: center;
}
.lsm .lsm-row-img { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 2px; }
.lsm .lsm-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lsm .lsm-row-text { margin: 0; }
.lsm .lsm-label { margin: 0; }
.lsm h2 {
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  margin: 18px 0 20px;
}
.lsm .lsm-row-text p:not(.lsm-label) { margin: 0 0 28px; max-width: 440px; color: rgba(28, 27, 25, .85); }
.lsm .wp-block-buttons { margin: 0; }

/* ==========================================================================
   6  ACCORDION  (.lacc) — uses the core Details block
   ========================================================================== */
.lacc {
  background: var(--lmg-bg);
  font-family: var(--lmg-serif);
  padding: 40px 24px 50px;
}
.lacc .lacc-intro, .lacc .lacc-list { max-width: 1000px; margin: 0 auto; }
.lacc .lacc-intro { padding: 20px 4px 24px; }
.lacc .lacc-intro h2 {
  font-family: var(--lmg-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.12;
  margin: 0;
}
.lacc .lacc-item { border-bottom: 1px solid var(--lmg-rule); margin: 0; }
.lacc .lacc-item:first-child { border-top: 1px solid var(--lmg-rule); }
.lacc .lacc-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  font-family: var(--lmg-sans);
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lmg-ink);
}
.lacc .lacc-item summary::-webkit-details-marker { display: none; }
.lacc .lacc-item summary::marker { content: ""; }
/* plus / minus icon */
.lacc .lacc-item summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background:
    linear-gradient(var(--lmg-btn-hover), var(--lmg-btn-hover)) center / 14px 2px no-repeat,
    linear-gradient(var(--lmg-btn-hover), var(--lmg-btn-hover)) center / 2px 14px no-repeat;
  transition: background-size .2s ease;
}
.lacc .lacc-item[open] summary::after { background-size: 14px 2px, 2px 0; }
/* body */
.lacc .lacc-item > :not(summary) { margin: 0 0 16px; padding: 0 4px; max-width: 100ch; }
.lacc .lacc-item > :not(summary):last-child { margin-bottom: 34px; }
.lacc .lacc-item p { font-size: 17px; line-height: 1.7; color: var(--lmg-ink); }
/* Lists: one plain browser bullet in olive. The theme draws its own bullet with
   li::before, so every drawn bullet is switched off here to avoid double dots. */
.lacc .lacc-item ul {
  list-style: disc !important;
  padding-left: 22px !important;
}
.lacc .lacc-item li {
  list-style: inherit !important;
  padding-left: 4px !important;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lmg-ink);
}
.lacc .lacc-item li + li { margin-top: 14px; }
.lacc .lacc-item li::before,
.lacc .lacc-item li::after { content: none !important; display: none !important; }
.lacc .lacc-item li::marker { color: var(--lmg-olive); }
.lacc .lacc-item li ul { margin: 8px 0 0; }
.lacc .lacc-item li li { font-size: 14px; }

/* ==========================================================================
   7  CONTACT + TEAM  (.lct)
   ========================================================================== */
.lct { font-family: var(--lmg-serif); }
.lct .lct-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.lct .lct-form-card {
  flex: 1 1 420px;
  max-width: 480px;
  background: var(--lmg-bg);
  padding: 56px 44px;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lct .lct-sub { font-size: 17px; line-height: 1.7; margin: 0 0 22px; }
.lct .lct-contact { font-size: 13px; margin: 4px 0; }
.lct .lct-contact a, .lct .lct-small a { color: var(--lmg-accent); font-weight: 700; text-decoration: underline; }
.lct .lct-form-card .wp-block-buttons { margin: 26px 0 0; }
.lct .lct-form-card .lbuy-btn { width: 100%; }
body .lct .lct-form-card .lbuy-btn .wp-block-button__link { display: block; width: 100%; text-align: center; }
.lct .lct-note { font-size: 11px; color: var(--lmg-muted); margin: 14px 0 0; }
.lct .lct-people { flex: 2 1 480px; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; }
.lct .lct-person { flex: 1 1 220px; text-align: center; margin: 0; }
.lct .lct-person .wp-block-image { margin: 0 0 18px; }
.lct .lct-person .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.lct .lct-person h3 { font-size: 19px; font-weight: 400; margin: 0 0 4px; }
.lct .lct-role { font-size: 13px; font-style: italic; color: var(--lmg-muted); margin: 0 0 14px; }
.lct .lct-small { font-size: 12.5px; margin: 2px 0; }
/* Desktop spacing above and below the contact section, so it doesn't sit
   right under the section before it (tablet and phone spacing is set in the
   responsive rules at the end). !important beats the theme's group spacing. */
@media (min-width: 901px) {
  body .lct { padding-top: 96px !important; padding-bottom: 96px !important; }
}

/* ---------- Gravity Forms inside the contact card ----------
   Works with both the "Gravity Forms 2.5" and "Orbital" form themes.
   Scoped to .lct, so forms elsewhere on the site are not affected. */
.lct .lct-form-card .gform_wrapper { margin: 26px 0 0; text-align: left; }
.lct .gform_wrapper .gform_heading { display: none; }
.lct .gform_wrapper .gform_fields { row-gap: 16px !important; column-gap: 16px !important; }
.lct .gform_wrapper :is(.gfield_label, .gform-field-label) {
  display: block;
  font-family: var(--lmg-serif);
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--lmg-ink) !important;
  margin: 0 0 6px !important;
}
.lct .gform_wrapper .gfield_required { color: var(--lmg-muted) !important; }
.lct .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  width: 100%;
  min-height: 0;
  padding: 13px 14px !important;
  border: 1px solid var(--lmg-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--lmg-ink) !important;
}
.lct .gform_wrapper textarea { text-transform: none; font-size: 14px !important; letter-spacing: 0; }
.lct .gform_wrapper :is(input, textarea)::placeholder { color: #8a8a80; opacity: 1; }
.lct .gform_wrapper :is(input, select, textarea):focus {
  outline: 2px solid var(--lmg-olive) !important;
  outline-offset: 1px;
}
.lct .gform_wrapper :is(.gform_footer, .gform_page_footer) { margin: 8px 0 0 !important; padding: 0 !important; }
.lct .gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button, .gform_button) {
  width: 100% !important;
  background: var(--lmg-btn) !important;
  color: var(--lmg-ink) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px !important;
  font-family: var(--lmg-sans) !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lct .gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button, .gform_button):is(:hover, :focus-visible) {
  background: var(--lmg-btn-hover) !important;
  color: #fff !important;
}
.lct .gform_wrapper .gfield_validation_message { font-size: 12px; }
.lct .gform_confirmation_message {
  margin: 26px 0 0;
  font-size: 17px;
  line-height: 1.7;
  text-align: center;
  color: var(--lmg-ink);
}

/* ==========================================================================
   8  IMAGE CAROUSEL  (.lcar) — dots are added by laspa-blocks.js
   ========================================================================== */
.lcar { background: var(--lmg-bg); padding: 10px 0 56px; overflow: hidden; }
.lcar .lcar-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 8vw;
  padding: 0 0 0 8vw;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lcar .lcar-track::-webkit-scrollbar { display: none; }
.lcar .lcar-track::after { content: ""; flex: 0 0 8vw; }
.lcar .lcar-slide {
  flex: 0 0 clamp(260px, 27vw, 420px);
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0;
}
.lcar .lcar-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcar .lcar-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 32px; }
.lcar .lcar-dot {
  width: 9px;
  height: 9px;
  min-height: 0;
  border-radius: 50%;
  border: 1px solid var(--lmg-muted);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.lcar .lcar-dot.is-active { background: var(--lmg-olive); border-color: var(--lmg-olive); }
/* In the editor: show slides as a wrapping grid so they are easy to swap */
.editor-styles-wrapper .lcar .lcar-track { flex-wrap: wrap; overflow: visible; padding: 0 24px; }
.editor-styles-wrapper .lcar .lcar-track::after { display: none; }
.editor-styles-wrapper .lcar .lcar-slide { flex: 0 0 160px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .lbuy .lbuy-hero-row { flex-direction: column; }
  .lbuy .lbuy-hero-text { width: 100%; padding: 44px 24px 36px; }
  .lbuy .lbuy-hero-media { margin-left: 0; width: 100%; height: 380px; }

  .lmg .lmg-cards { grid-template-columns: 1fr; padding: 0 24px; }
  .lmg .lmg-card { border-right: none; border-bottom: 1px solid var(--lmg-line); padding-bottom: 36px; margin-bottom: 36px; }
  .lmg .lmg-card:last-child { border-bottom: none; }
  /* Card photos run edge to edge, the same size as the hero photo above.
     The -46px margins cancel the list padding (24px) and card padding (22px);
     the text below keeps its padding. The 3:2 shape matches the hero photo. */
  .lmg .lmg-card .wp-block-image {
    width: calc(100% + 92px);
    max-width: none;
    margin: 0 -46px 22px;
  }
  .lmg .lmg-card .wp-block-image img { height: auto; aspect-ratio: 3 / 2; }

  .lct { padding: 60px 32px; }
  .lct .lct-form-card { flex: 1 1 100%; max-width: 100%; }
  .lct .lct-people { flex: 1 1 100%; }
}
@media (max-width: 860px) {
  .lsm .lsm-row-inner { grid-template-columns: 1fr; }
  .lsm .lsm-row-img { order: -1; }
}
@media (max-width: 700px) {
  .lacc { padding-left: 20px; padding-right: 20px; }
  .lacc .lacc-item summary { font-size: 12.5px; }
  .lcar .lcar-slide { flex-basis: 72vw; }
  .lcar .lcar-track { padding-left: 20px; scroll-padding-left: 20px; }
  .lcar .lcar-track::after { flex-basis: 20px; }
}
@media (max-width: 640px) {
  .lsm { padding-left: 20px; padding-right: 20px; }
}
/* Phones: every LaSpa button runs the full width of its section */
@media (max-width: 600px) {
  body .wp-block-button.lbuy-btn,
  body .wp-block-button.lbuy-btn .wp-block-button__link { width: 100%; text-align: center; }
}
@media (max-width: 520px) {
  .lct { padding: 48px 20px; }
  .lct .lct-form-card { padding: 44px 28px; }
  .lct .lct-people { flex-direction: column; }
}