.office-plans {
  padding-top: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}

.office-plans__grid {
  margin-top: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  --grid-layout-gap: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);
  --grid-column-count: 2;
  --grid-item--min-width: 280px;
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc(
    (100% - var(--total-gap-width)) / var(--grid-column-count)
  );
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)
  );
  grid-gap: var(--grid-layout-gap);
}

.office-plans__grid > li {
  min-width: 0;
}

.office-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-block: 4.625rem 1.875rem;
  padding-inline: clamp(0.625rem, 0.375rem + 1.25vw, 1.875rem);
  background-color: var(--color-surface);
  border-radius: clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem) 0 0 0;
}

.office-plan-card--accent {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

.office-plans__grid > *:nth-last-child(-n + 2) .office-plan-card {
  border-radius: 0 0 clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem) 0;
}

.office-plan-card__tags {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  left: 0;
  top: clamp(1.25rem, 0.725rem + 2.625vw, 3.875rem);
}

.office-plan-card--accent .office-plan-card__tags {
  /*top: 1.25rem;*/
}

.office-plan-card__tag {
  padding: clamp(0.1875rem, 0.1625rem + 0.125vw, 0.3125rem)
    clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
  border-radius: 0 var(--space-xs) var(--space-xs) 0;
  background-color: var(--color-tag-discount);
  color: var(--color-bg);
  font-family: var(--font-body-semibold);
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  line-height: clamp(1rem, 0.8625rem + 0.6875vw, 1.6875rem);
}

.office-plan-card__tag--50 {
  background-color: var(--color-tag-discount);
}

.office-plan-card__tag--100 {
  background-color: var(--color-tag-popular);
}

.office-plan-card__tag--150 {
  background-color: var(--color-tag-new);
}

.office-plan-card__tag--200 {
  background-color: var(--color-btn-hover);
}

.office-plan-card__tag--popular {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.office-plan-card__media {
  width: clamp(9.375rem, 7.125rem + 11.25vw, 20.625rem);
  height: clamp(9.375rem, 7.125rem + 11.25vw, 20.625rem);
  aspect-ratio: 1/1;
  flex-shrink: 1;
  align-self: center;
}

/* Product photos aren't square — keep them inside the square box so they
   don't spill onto the card title below. */
.office-plan-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 990.98px) {
  .office-plan-card__media {
    margin-block: clamp(0.75rem, 0.5rem + 1.25vw, 1.5rem);
  }
}

.office-plan-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.office-plan-card__title {
  font-family: var(--font-heading-bold);
  font-size: clamp(1.3125rem, 1.1375rem + 0.875vw, 2.1875rem);
  line-height: clamp(1.5625rem, 1.35rem + 1.0625vw, 2.625rem);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-office-plan-card-line);
  margin-bottom: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);
}

.office-plan-card--accent .office-plan-card__title {
  color: var(--color-text-invert);
}

.office-plan-card__desc {
  font-family: var(--font-body-medium);
  font-size: clamp(1.125rem, 1.0375rem + 0.4375vw, 1.5625rem);
  line-height: 1.4;
  opacity: 0.85;
}

.office-plan-card__list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
    margin-bottom:20px;
}

.office-plan-card__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--font-body-bold);
  font-size: clamp(0.8125rem, 0.75rem + 0.3125vw, 1.125rem);
  line-height: clamp(1.125rem, 1.0375rem + 0.4375vw, 1.5625rem);
}

.office-plan-card__item-img {
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
}

.office-plan-card .btn {
  margin-top: auto;
  align-self: flex-start;
  width: 100%;
  white-space: normal;
  text-align: center;
  background-color: var(--color-accent-gold);
  color: var(--color-text-invert);
  padding-block: clamp(0.8125rem, 0.725rem + 0.4375vw, 1.25rem);
  font-family: var(--font-body-bold);
  font-size: clamp(0.8125rem, 0.6875rem + 0.625vw, 1.4375rem);
  line-height: clamp(1.125rem, 0.9625rem + 0.8125vw, 1.9375rem);
}

.office-plan-card .btn:hover {
  background-color: var(--color-btn-hover);
}

.office-plan-card__content .btn + * {
  margin-top: 0;
}

@media (min-width: 991px) {
  .office-plan-card {
    padding-block: 1.875rem;
    flex-direction: row;
  }
  .office-plans__grid > *:nth-last-child(-n + 2) .office-plan-card {
    border-radius: 0 0 0 clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem);
  }
}

/* ==========================================================================
   Plan card hover (see js/modules/planCardsHover.js)
   Hover-only states live behind (hover: hover) and (pointer: fine), so touch
   devices keep stable cards. Base-state transitions are the slower "return"
   curve; the :hover state swaps in the quicker "lift" curve.
   ========================================================================== */

.office-plan-card {
  --plan-card-ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --plan-card-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --plan-card-light: rgba(244, 237, 227, 0.55);
  --plan-card-shadow: rgba(60, 34, 20, 0.3);
  isolation: isolate;
}

.office-plan-card--accent {
  --plan-card-light: rgba(122, 76, 48, 0.42);
  --plan-card-shadow: rgba(20, 10, 4, 0.45);
}

/* Pointer-following light, injected by JS on fine-pointer devices only. */
.office-plan-card__light {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--plan-card-ease-out);
}

/* Centered on the card's top-left corner; JS moves it with x/y transforms. */
.office-plan-card__light-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 130%;
  aspect-ratio: 1;
  margin: -65% 0 0 -65%;
  background: radial-gradient(closest-side, var(--plan-card-light), transparent);
  will-change: transform;
}

.office-plan-card__media {
  position: relative;
}

.office-plan-card__media img {
  position: relative;
  z-index: 1;
}

/* Contact shadow under the machine — stays on the "table" while the machine lifts. */
.office-plan-card__media::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -2%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--plan-card-shadow), transparent);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.9s var(--plan-card-ease-out),
    transform 0.9s var(--plan-card-ease-out);
  pointer-events: none;
}

.office-plan-card__tag {
  position: relative;
}

/* Fills the gap at the card edge when the badge slides right. */
.office-plan-card__tag::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 0.5rem;
  background: inherit;
}

.office-plan-card .btn {
  transition:
    background-color 0.35s ease,
    transform 0.6s var(--plan-card-ease-out),
    box-shadow 0.6s var(--plan-card-ease-out);
}

.office-plan-card .btn:active {
  transform: scale(0.98);
  transition-duration: 0.12s;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .office-plan-card,
  .office-plan-card__tag {
    transition: transform 0.9s var(--plan-card-ease-out);
  }

  .office-plan-card:hover {
    transform: translate3d(0, -6px, 0) scale(1.004);
    transition-duration: 0.6s;
    transition-timing-function: var(--plan-card-ease-in);
  }

  .office-plan-card:hover .office-plan-card__light {
    opacity: 1;
    transition-duration: 0.6s;
  }

  .office-plan-card:hover .office-plan-card__media::after {
    opacity: 1;
    transform: scale(1.12);
    transition-duration: 0.6s;
    transition-timing-function: var(--plan-card-ease-in);
  }

  .office-plan-card:hover .office-plan-card__tag {
    transform: translate3d(0.375rem, 0, 0);
    transition-duration: 0.6s;
    transition-timing-function: var(--plan-card-ease-in);
  }

  .office-plan-card:hover .btn {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 0.625rem 1.25rem -0.875rem var(--plan-card-shadow);
  }

  .office-plan-card .btn:active {
    transform: translate3d(0, -1px, 0) scale(0.98);
  }
}