/**
 * [packages] pricing tables (inc/packages.php). Design: Claude Design
 * "Creative Pages" board 2a - heading row with a size switch, a comparison
 * table, and a "need something bigger?" strip. Phones get one card per package.
 */
.mm-pkgs-section { padding-block: clamp(56px, 10vh, 96px); }
.mm-pkgs {
  --pk-ink: var(--wp--preset--color--mm-hero, #3a3e35);
  --pk-body: #57544c;
  --pk-line: #dcdad4;
  --pk-sage: var(--wp--preset--color--mm-sage, #8c9082);
  color: var(--pk-ink);
}
.mm-pkgs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(24px, 4vh, 36px); }
.mm-pkgs__script { margin: 0; font-family: "Mistgak Signature", var(--mm-font); font-size: clamp(30px, 2.6vw, 36px); line-height: 1; color: var(--pk-sage); }
.mm-pkgs__heading { margin: 10px 0 0; font-size: clamp(32px, 3.2vw, 44px); font-weight: 200; line-height: 1.06; color: var(--pk-ink); }

/* size switch: rounded pills, the selected one dark */
.mm-pkgs__sizes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 300px; background: #e6e4de; } /* a shade darker than the bone background, no outline */
.mm-pkgs__sizes button {
  padding: 10px 18px;
  border: 0;
  border-radius: 300px;
  background: transparent;
  color: var(--pk-ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mm-pkgs__sizes button:hover,
.mm-pkgs__sizes button:focus-visible { background: rgba(58, 62, 53, 0.08); }
.mm-pkgs__sizes button.is-active { background: var(--pk-ink); color: #fff; }

/* table */
.mm-pkgs__table { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--pk-ink); }
.mm-pkgs__table thead td,
.mm-pkgs__table tbody th { width: 220px; }
.mm-pkgs__table thead th { padding: 28px 24px; border-left: 1px solid var(--pk-line); vertical-align: top; text-align: left; font-weight: inherit; }
.mm-pkgs__card { display: flex; flex-direction: column; gap: 10px; }
.mm-pkgs__name { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pk-ink); }
.mm-pkgs__price { font-size: clamp(30px, 2.6vw, 36px); font-weight: 200; line-height: 1; color: var(--pk-ink); }
.mm-pkgs__ideal { font-size: 14px; line-height: 1.5; color: var(--pk-ink); }
.mm-pkgs__desc { font-size: 13px; line-height: 1.6; color: var(--pk-body); text-wrap: pretty; }
.mm-pkgs__table tbody tr { border-top: 1px solid var(--pk-line); }
.mm-pkgs__table tbody th { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; font-weight: inherit; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pk-body); }
.mm-pkgs__table tbody td { padding: 16px 24px; border-left: 1px solid var(--pk-line); vertical-align: top; font-size: 14px; line-height: 1.5; color: var(--pk-ink); }

/* strip */
.mm-pkgs__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--pk-ink); }
.mm-pkgs__foot-title { margin: 0; font-size: 15px; color: var(--pk-ink); }
.mm-pkgs__foot-text { margin: 4px 0 0; font-size: 13px; color: var(--pk-body); }
.mm-pkgs__btn {                    /* same size and type as the site's Spectra buttons */
  background: var(--pk-ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding: 5px 20px;
  border-radius: 300px;
  font-size: var(--wp--preset--font-size--small, 0.9rem);
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.mm-pkgs__btn::after { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat; } /* the site buttons' arrow */
.mm-pkgs__btn:hover,
.mm-pkgs__btn:focus-visible { background: var(--pk-sage); color: #fff; }

/* phones: one card per package */
.mm-pkgs__cards { display: none; }
@media (max-width: 900px) {
  .mm-pkgs__table { display: none; }
  .mm-pkgs__cards { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--pk-ink); }
  .mm-pkgs__mcard { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--pk-line); }
  .mm-pkgs__mcard h3.mm-pkgs__name { margin: 0; font-weight: inherit; }
  .mm-pkgs__mcard dl { margin: 10px 0 0; }
  .mm-pkgs__mcard dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--pk-line); }
  .mm-pkgs__mcard dt { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pk-body); }
  .mm-pkgs__mcard dd { margin: 0; font-size: 14px; line-height: 1.5; }
  .mm-pkgs__foot { border-top: 0; }
  .mm-pkgs__sizes { border-radius: 20px; }
}