/* =============================================================================
   Phase 151O.8.3.2 — Final CTA Glass Restore Without Size Regression

   Intentional, opt-in use of the 151O.8.2 glass token contract. This file is
   deliberately scoped to approved card families only. It must not become an
   all-card/global panel override. Project story motion cards are intentionally excluded because they already own
   locked sizing and motion behavior. The final CTA uses a visual-only modifier
   so glass material does not import layout utility behavior.
   ========================================================================== */

/* Shared approved card families only. */
.mht-faq__item.mht-glass-card,
.mht-testimonial.mht-glass-card,
.mht-thought-card.mht-glass-card,
.mht-thinking-page .mht-thinking-card.mht-glass-card,
.mht-post-single__related .mht-thinking-card.mht-glass-card,
.mht-resources__card.mht-glass-card,
.mht-query-card.mht-glass-card,
.mht-contact-fallback__link.mht-glass-card {
  background: var(--mht-glass-card-bg) !important;
  border: 1px solid var(--mht-glass-border-line-soft) !important;
  box-shadow: var(--mht-glass-shadow-card) !important;
  -webkit-backdrop-filter: var(--mht-glass-blur);
  backdrop-filter: var(--mht-glass-blur);
}

/* Approved panel surfaces only. */
.mht-contact-fallback__card.mht-glass-panel,
.mht-enquiries-page .mht-enq-card.mht-glass-panel,
.mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel,
.mht-project-single .mht-project-case__block-inner.mht-glass-panel,
.mht-project-single .mht-project-case__quote.mht-glass-panel,
.mht-project-single .mht-project-case__related-card.mht-glass-panel {
  background: var(--mht-glass-panel-bg) !important;
  border: 1px solid var(--mht-glass-border-line) !important;
  box-shadow: var(--mht-glass-shadow-panel) !important;
  -webkit-backdrop-filter: var(--mht-glass-blur);
  backdrop-filter: var(--mht-glass-blur);
}

/* Keep existing component light/glow layers subtle instead of stacking into a
   fake purple wash. The base surface is glass; component atmosphere stays as an
   accent only. */
.mht-faq__item.mht-glass-card::before,
.mht-testimonial.mht-glass-card::before,
.mht-thought-card.mht-glass-card::before,
.mht-thinking-page .mht-thinking-card.mht-glass-card::before,
.mht-post-single__related .mht-thinking-card.mht-glass-card::before,
.mht-resources__card.mht-glass-card::before,
.mht-query-card.mht-glass-card::before,
.mht-contact-fallback__link.mht-glass-card::before,
.mht-contact-fallback__card.mht-glass-panel::before,
.mht-enquiries-page .mht-enq-card.mht-glass-panel::before,
.mht-project-single .mht-project-case__related-card.mht-glass-panel::before {
  opacity: .76;
}


/* Phase 151O.8.4.6: approved glass surfaces keep the same readable text
   contract in dark and light modes. Visual variables only; no sizing. */
.mht-glass-card,
.mht-glass-panel,
.mht-glass-surface,
.mht-page-cta__card--approved-glass {
  --text-primary: var(--mht-glass-text, #F6F2F7);
  --text-secondary: var(--mht-glass-text, #F6F2F7);
  --text-muted: var(--mht-glass-text-muted, rgba(221,214,227,.76));
  color: var(--mht-glass-text, #F6F2F7) !important;
}

/* Contact/project panel text must stay above the glass border layer. */
.mht-contact-fallback__card.mht-glass-panel > *,
.mht-enquiries-page .mht-enq-card.mht-glass-panel > *,
.mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel > *,
.mht-project-single .mht-project-case__block-inner.mht-glass-panel > *,
.mht-project-single .mht-project-case__quote.mht-glass-panel > *,
.mht-project-single .mht-project-case__related-card.mht-glass-panel > * {
  position: relative;
  z-index: 1;
}

/* FAQ open state stays readable and intentional. */
.mht-faq__item.mht-glass-card.is-open {
  border-color: rgba(183, 140, 255, .28) !important;
  box-shadow: var(--mht-glass-shadow-card), 0 0 0 1px rgba(183, 140, 255, .07) !important;
}

/* Testimonial/footer dividers remain gentle inside the glass card. */
.mht-testimonial.mht-glass-card .mht-testimonial__footer {
  border-top-color: rgba(246, 242, 247, .10);
}

.mht-testimonial.mht-glass-card .mht-testimonial__pill,
.mht-thought-card.mht-glass-card .mht-thought-card__pill,
.mht-thinking-card.mht-glass-card .mht-thinking-card__cat,
.mht-resources__card.mht-glass-card .mht-resources__type,
.mht-resources__card.mht-glass-card .mht-resources__status,
.mht-query-card.mht-glass-card .mht-query-card__meta span {
  text-shadow: 0 1px 14px rgba(0, 0, 0, .18);
}



/* Phase 151O.8.4.8: Recommended Thinking metadata stays text metadata,
   not a chip. This clears inherited old label/chip paint without changing
   card layout, spacing, source, or query behavior. */
.mht-thinking-card.mht-glass-card .mht-thinking-card__meta,
.mht-thinking-card.mht-glass-card .mht-thinking-card__cat,
.mht-thinking-card.mht-glass-card .mht-thinking-card__dur,
.mht-thinking-card.mht-glass-card .mht-thinking-card__date {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mht-thinking-card.mht-glass-card .mht-thinking-card__meta,
.mht-thinking-card.mht-glass-card .mht-thinking-card__dur,
.mht-thinking-card.mht-glass-card .mht-thinking-card__date {
  color: var(--mht-glass-text-muted, rgba(221,214,227,.76)) !important;
}

.mht-thinking-card.mht-glass-card .mht-thinking-card__cat {
  color: var(--accent-soft, #C5A6D3) !important;
}

/* Thinking/resource cards: preserve image crop and existing card layouts. */
.mht-thought-card.mht-glass-card .mht-thought-card__media,
.mht-thinking-page .mht-thinking-card.mht-glass-card .mht-thinking-card__media,
.mht-post-single__related .mht-thinking-card.mht-glass-card .mht-thinking-card__media,
.mht-resources__card.mht-glass-card .mht-resources__media,
.mht-query-card.mht-glass-card .mht-query-card__media {
  border-color: rgba(246, 242, 247, .10);
}

/* Final CTA glass restore: visual material only.
   Do not add mht-glass-panel here; the CTA owns locked sizing in 19__page-cta.css.
   Phase 151O.8.4.6 aligns the CTA material with the approved header glass: same
   dark translucent logic, same blur/filter, same off-white text contract in dark
   and light modes. No padding, min-height, display, flex/grid, gap, margin,
   transform, or button sizing is set here. */
.mht-page-cta__card--approved-glass {
  --text-primary: var(--mht-glass-text, #F6F2F7);
  --text-secondary: var(--mht-glass-text, #F6F2F7);
  --text-muted: var(--mht-glass-text-muted, rgba(221,214,227,.76));
  background: var(--mht-glass-panel-bg) !important;
  border-color: var(--mht-glass-border-line) !important;
  box-shadow: var(--mht-glass-shadow-panel), var(--mht-glass-purple-glow) !important;
  -webkit-backdrop-filter: var(--mht-glass-filter) !important;
  backdrop-filter: var(--mht-glass-filter) !important;
  color: var(--mht-glass-text, #F6F2F7) !important;
}

.mht-page-cta__card--approved-glass::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 38%;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .22;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.055) 44%, rgba(255,255,255,0) 100%) !important;
}

.mht-page-cta__card--approved-glass::after {
  content: "";
  position: absolute;
  inset: auto 12px 2px 12px;
  height: 1px;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: .18;
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 -10px 22px var(--mht-glass-lowlight) !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mht-page-cta__card--approved-glass {
    background: var(--mht-glass-nav-bg-fallback) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Direct contact cards should never render as empty-looking boxes. */
.mht-contact-fallback__link.mht-glass-card {
  min-height: 82px;
}

.mht-contact-fallback__link.mht-glass-card:hover {
  border-color: rgba(183, 140, 255, .32) !important;
  background: var(--mht-glass-card-bg) !important;
  box-shadow: var(--mht-glass-shadow-hover), var(--mht-glass-purple-glow) !important;
}

/* Single project panels: keep article flow, just make approved panels glass. */
.mht-project-single .mht-project-case__block-inner.mht-glass-panel,
.mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel,
.mht-project-single .mht-project-case__quote.mht-glass-panel {
  border-radius: clamp(18px, 2vw, 26px);
}

.mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel,
.mht-project-single .mht-project-case__block-inner.mht-glass-panel {
  padding: clamp(22px, 3vw, 36px);
}

.mht-project-single .mht-project-case__block-label,
.mht-project-single .mht-project-case__snapshot-row dt {
  color: var(--accent-soft, #C5A6D3);
}

/* Project Story / What I Changed motion cards are protected.
   17c__project-story-slides.css owns their material, stacking, and active state. */

@media (hover: hover) and (pointer: fine) {
  .mht-testimonial.mht-glass-card:hover,
  .mht-thought-card.mht-glass-card:hover,
  .mht-thinking-page .mht-thinking-card.mht-glass-card:hover,
  .mht-post-single__related .mht-thinking-card.mht-glass-card:hover,
  .mht-resources__card.mht-glass-card:hover,
  .mht-query-card.mht-glass-card:hover {
    border-color: rgba(183, 140, 255, .28) !important;
    box-shadow: var(--mht-glass-shadow-hover), var(--mht-glass-purple-glow) !important;
  }
}

/* Phase 151O.8.4.8: light mode approved glass parity.
   Approved content glass keeps the dark translucent material and off-white copy
   in both modes. Visual material only; no sizing or layout changes. */
html[data-mht-theme-effective="light"] .mht-faq__item.mht-glass-card,
html[data-mht-theme="light"] .mht-faq__item.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-testimonial.mht-glass-card,
html[data-mht-theme="light"] .mht-testimonial.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-thought-card.mht-glass-card,
html[data-mht-theme="light"] .mht-thought-card.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-thinking-page .mht-thinking-card.mht-glass-card,
html[data-mht-theme="light"] .mht-thinking-page .mht-thinking-card.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-post-single__related .mht-thinking-card.mht-glass-card,
html[data-mht-theme="light"] .mht-post-single__related .mht-thinking-card.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-resources__card.mht-glass-card,
html[data-mht-theme="light"] .mht-resources__card.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-query-card.mht-glass-card,
html[data-mht-theme="light"] .mht-query-card.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-contact-fallback__link.mht-glass-card,
html[data-mht-theme="light"] .mht-contact-fallback__link.mht-glass-card,
html[data-mht-theme-effective="light"] .mht-contact-fallback__card.mht-glass-panel,
html[data-mht-theme="light"] .mht-contact-fallback__card.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-enquiries-page .mht-enq-card.mht-glass-panel,
html[data-mht-theme="light"] .mht-enquiries-page .mht-enq-card.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-page-cta__card--approved-glass,
html[data-mht-theme="light"] .mht-page-cta__card--approved-glass,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__block-inner.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__block-inner.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__quote.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__quote.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__related-card.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__related-card.mht-glass-panel {
  background: var(--mht-glass-card-bg) !important;
  border-color: var(--mht-glass-border-line) !important;
  box-shadow: var(--mht-glass-shadow-card), var(--mht-glass-purple-glow) !important;
  color: var(--mht-glass-text, #F6F2F7) !important;
}

html[data-mht-theme-effective="light"] .mht-contact-fallback__card.mht-glass-panel,
html[data-mht-theme="light"] .mht-contact-fallback__card.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-enquiries-page .mht-enq-card.mht-glass-panel,
html[data-mht-theme="light"] .mht-enquiries-page .mht-enq-card.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-page-cta__card--approved-glass,
html[data-mht-theme="light"] .mht-page-cta__card--approved-glass,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__snapshot-grid.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__block-inner.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__block-inner.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__quote.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__quote.mht-glass-panel,
html[data-mht-theme-effective="light"] .mht-project-single .mht-project-case__related-card.mht-glass-panel,
html[data-mht-theme="light"] .mht-project-single .mht-project-case__related-card.mht-glass-panel {
  background: var(--mht-glass-panel-bg) !important;
  box-shadow: var(--mht-glass-shadow-panel), var(--mht-glass-purple-glow) !important;
}