/* ==========================================================================
   LocalWorks Offer Section (partials/lw-offer-section.php)
   Self-contained styles — every rule is scoped under .lwo / .lwo- prefixes so
   the component can be dropped into any template without depending on
   listing-hero.css or Divi module styles.
   ========================================================================== */

.lwo,
.lwo * {
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

/* Width + horizontal padding are matched to .po_section / .primary (1400px)
   so the section lines up with every other section on the location page. */
.lwo {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 0;
  color: #333;

  /* Brand checkmark, shared by both checklists below. */
  --lwo-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M26.9601 8.6503L27.3782 9.06846C27.5997 9.28998 27.7241 9.59038 27.7241 9.9036C27.7241 10.2168 27.5997 10.5172 27.3782 10.7387L13.8293 24.2877C13.6078 24.5091 13.3074 24.6335 12.9942 24.6335C12.681 24.6335 12.3806 24.5091 12.159 24.2877L6.28824 18.4169C6.06679 18.1953 5.94238 17.8949 5.94238 17.5817C5.94238 17.2685 6.06679 16.9681 6.28824 16.7466L6.7064 16.3284C6.92791 16.107 7.22832 15.9826 7.54154 15.9826C7.85476 15.9826 8.15517 16.107 8.37668 16.3284L12.159 20.1108C12.3806 20.3322 12.681 20.4566 12.9942 20.4566C13.3074 20.4566 13.6078 20.3322 13.8293 20.1108L25.2898 8.6503C25.5113 8.42885 25.8117 8.30444 26.1249 8.30444C26.4382 8.30444 26.7386 8.42885 26.9601 8.6503Z' fill='%239A78AB'/%3E%3C/svg%3E");
}

/* ---- Header ---- */

.lwo-header {
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
}

/* Every <p> rule in this file carries the .lwo prefix on purpose: it lifts them
   to (0,2,0), which beats listing-hero.css's `.primary p` (0,1,1). Without it
   the theme forces 20px/#828282/500/36px on every paragraph in the component
   and none of the values below render. Don't drop the prefix. */
.lwo .lwo-eyebrow {
  color: #9A78AB;
  text-align: center;
  font-family: "Open Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.88px;
  text-transform: uppercase;
  padding-bottom: 8px !important;
}

.lwo .lwo-title {
 color: #333;
  text-align: center;
  font-family: "Open Sans";
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.92px;
}

.lwo .lwo-sub {
  color: #333;
  text-align: center;
  font-family: "Open Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.12px;
}

.lwo .lwo-lede {
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  font-family: "Open Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 174%; /* 38.28px */
  letter-spacing: -0.88px;
}

/* ---- Summary cards ---- */

/* align-items: start keeps each card at its own height, so expanding one
   card's "what's included" panel doesn't stretch its neighbours' rows. */
/* Two-tier layout (most locations): cap each card at 530px and centre the pair,
   otherwise they stretch to ~688px each in the 1400px container. The three-tier
   variant still fills the width. */
.lwo-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 530px));
  justify-content: center;
  align-items: start;
  gap: 24px;
  margin: 36px 0 24px;
}

.lwo-cards--3 {
  grid-template-columns: repeat(3, 1fr);
  justify-content: stretch;
}

.lwo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: #fff;
  border: 2px solid #9A78AB;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.lwo-card:hover {
  transform: translateY(-3px);
  background: #FCFAFD;
  box-shadow: 0 10px 26px rgba(90, 60, 110, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .lwo-card {
    transition: none;
  }

  .lwo-card:hover {
    transform: none;
  }

  .lwo-card__includes,
  .lwo-card__includes.is-open {
    transition: none;
  }
}

.lwo-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.lwo .lwo-card__title, .lwo .lwo-card__title a {
 color: #333;
  font-family: "Open Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%; /* 39.6px */
  letter-spacing: -0.88px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.lwo-card__title a {
  color: inherit !important;
  /* The sitewide customizer rule `a { font-weight: 500 }` targets the anchor
     directly, which beats any weight inherited from the h3 — so the title's
     weight never rendered without this. */
  font-weight: inherit;
  text-decoration: none;
}

.lwo-card__title a:hover {
  color: #9A78AB !important;
}

/* Stretched link: the title anchor's overlay covers the whole card, so a click
   anywhere on the card follows it down to that tier's detail section. */
.lwo-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The real controls have to sit above that overlay to stay clickable. */
.lwo-card__toggle,
.lwo-card__cta-link {
  position: relative;
  z-index: 2;
}

.lwo .lwo-card__meta {
  color: rgba(0, 0, 0, 0.70);
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 32.4px */
  letter-spacing: -0.72px;
  padding-bottom: 15px;
}

/* Title, badge and meta are identical across the tiers, so the foot is the only
   thing that varies: Individual/Coworking carry a price (a 26px <strong>, ~36px
   tall) while Team carries a plain text link (~25px). Flooring the foot at the
   price's height keeps every collapsed card the same height, while
   align-items: start on .lwo-cards still lets one card expand on its own. */
.lwo-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 36px;
  margin-top: auto;
}

.lwo .lwo-card__price {
 color: #000;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 32.4px */
  letter-spacing: -0.72px;
}

.lwo .lwo-card__price strong {
  color: #9A78AB;
  font-family: "Open Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.04px;
}

.lwo-card__cta-link {
  color: #222 !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
}

.lwo-card__cta-link:hover {
  color: #9A78AB !important;
}

.lwo-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: none;
  color: #555;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  color: #000;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 32.4px */
  letter-spacing: -0.72px;
}

.lwo-card__toggle:hover {
  color: #9A78AB;
}

.lwo-card__toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.lwo-card__toggle[aria-expanded="true"]::after {
  margin-top: 4px;
  transform: rotate(225deg);
}

/* Collapsed by default and animated open via grid-template-rows 0fr -> 1fr,
   which eases to the panel's real height without hardcoding a max-height.
   visibility is delayed to the end of the collapse so the panel stays out of
   the accessibility tree while shut. */
.lwo-card__includes {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease,
              margin-top 0.3s ease, padding-top 0.3s ease,
              border-top-color 0.3s ease, visibility 0s linear 0.3s;
}

.lwo-card__includes.is-open {
  grid-template-rows: 1fr;
  margin-top: 16px;
  padding-top: 14px;
  border-top-color: #EEE9F2;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease,
              margin-top 0.3s ease, padding-top 0.3s ease,
              border-top-color 0.3s ease, visibility 0s;
}

/* The single grid child has to be able to shrink to zero for the row to animate. */
.lwo .lwo-card__includes ul {
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  list-style: none;
}

.lwo .lwo-card__includes li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 24px;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.lwo .lwo-card__includes li::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--lwo-check) no-repeat center / contain;
}

/* ---- Badges ---- */

.lwo-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  margin-bottom: 10px;
}

.lwo-badge--green {
  background: rgba(97, 156, 94, 0.15); /* #619C5E @ 15% */
  border-radius: 6px;
  color: #46685A;
}

.lwo-badge--purple {
  background: #F1EAF6;
  color: #7C5C90;
  border-radius: 6px !important;
}

.lwo-badge--yellow {
  background: rgba(200, 197, 166, 0.30);
  color: #918836;
}

.lwo-badge--neutral {
  background: #F2F0F4;
  color: #555;
}

/* ---- Detail sections ---- */

.lwo-detail {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  scroll-margin-top: 120px;
}

.lwo-detail__media {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
}

/* Square 640x640 per the mockup; capped by max-width so it scales down
   on narrow viewports instead of overflowing. */
.lwo-detail__media img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
}

.lwo-detail__media figcaption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
}

.lwo .lwo-detail__heading {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "Open Sans", sans-serif;
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: -1.36px;
}

/* Needs the .lwo prefix to out-specify listing-hero.css's `.primary p`
   (0,1,1), which otherwise forces 20px/#828282/500 on every <p> in here. */
/* Divi inlines `p{padding-bottom:1em}`, which at 26px means 26px of padding
   under the price/note that margin alone can't touch. 0.5em halves it. */
.lwo .lwo-detail__price,
.lwo .lwo-detail__note {
  margin: 16px 0 0;
  padding-bottom: 0.5em;
  color: #9A78AB;
  font-family: "Open Sans", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -1.04px;
}

.lwo .lwo-detail__note {
  margin-top: 0px;
}

/* Shared body copy for the detail sections. The .lwo prefix is load-bearing on
   .lwo-detail__desc: it's a <p>, so without it listing-hero.css's `.primary p`
   (0,1,1) wins and none of this renders. */
.lwo .lwo-detail__desc,
.lwo .lwo-checklist li {
  color: #000;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  letter-spacing: -0.72px;
}

.lwo .lwo-detail__desc {
  margin: 0 0 20px;
}

.lwo .lwo-checklist {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.lwo .lwo-checklist li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 40px;
}

/* top centres the mark on the first line: (32.4px line box - 22px) / 2. */
.lwo .lwo-checklist li::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 30px;
  height: 30px;
  background: var(--lwo-check) no-repeat center / contain;
}

.lwo-detail__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.lwo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 210px;
  padding: 20px 22px;
  background: #222;
  border-radius: 8px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lwo-btn:hover {
  background: #9A78AB;
  color: #fff !important;
}

.lwo-btn__arrow {
  flex: 0 0 auto;
}

.lwo-call {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.54px;
}

.lwo-call a {
  color: #222 !important;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.lwo-call a:hover {
  color: #9A78AB !important;
}

/* ---- Footnote ---- */

/* .lwo prefix required: it's a <p>, so `.primary p` would otherwise win. */
.lwo .lwo-footnote {
  margin: 28px 0 0;
  color: rgba(0, 0, 0, 0.60);
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.54px;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .lwo-cards,
  .lwo-cards--3 {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }
}

@media (max-width: 860px) {
  .lwo {
    padding: 40px 0;
  }

  .lwo .lwo-title {
    font-size: 32px;
  }

  .lwo-sub {
    font-size: 19px;
  }

  .lwo-detail {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }

  .lwo .lwo-detail__heading {
    font-size: 25px;
  }
}

@media (max-width: 480px) {
  .lwo-card__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}