/* Mela Reference 4.3.0
 * Final component contracts for the areas that must not be reinterpreted by
 * legacy cascade layers. Keep this file loaded last.
 */

/* -------------------------------------------------------------------------
   SELF-CHECK CATALOG — full brand-colour panels, consistent with the large
   violet featured container. No black mini-cards, no white form-box look.
   ------------------------------------------------------------------------- */
.test-hub-catalog {
  --mela-card-radius: 0;
}

.test-hub-featured,
.test-hub-grid > button,
.test-hub-grid > a,
.test-hub-grid > .test-hub-profile {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--mela-card-radius) !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* Featured Ausgangslage-Check: the visual reference for all cards. */
.test-hub-featured {
  background: var(--violet) !important;
  color: var(--white) !important;
}
.test-hub-featured :is(strong, p, span, i),
.test-hub-featured .test-card-bar small,
.test-hub-featured-copy > small {
  color: var(--white) !important;
  -webkit-text-fill-color: currentColor !important;
}
.test-hub-featured-copy > small,
.test-hub-featured .test-card-bar small {
  color: var(--signal) !important;
}
.test-hub-featured .test-card-bar,
.test-hub-featured .test-hub-featured-copy,
.test-hub-featured .test-hub-featured-mark {
  border-color: rgba(255,255,255,.34) !important;
}

/* The remaining checks deliberately rotate only through approved brand
 * surfaces. Their structure stays identical; only the surface changes. */
.test-hub-grid > button,
.test-hub-grid > a,
.test-hub-grid > .test-hub-profile {
  display: flex !important;
  min-height: 25rem !important;
  flex-direction: column !important;
  padding: clamp(1.65rem, 3vw, 2.35rem) !important;
}

.test-hub-grid > button:nth-child(1) {
  background: var(--violet-light) !important;
  color: var(--black) !important;
}
.test-hub-grid > button:nth-child(2) {
  background: var(--signal) !important;
  color: var(--black) !important;
}
.test-hub-grid > button:nth-child(3) {
  background: var(--violet) !important;
  color: var(--white) !important;
}
.test-hub-grid > button:nth-child(4) {
  background: var(--violet-light) !important;
  color: var(--black) !important;
}
.test-hub-grid > button:nth-child(5) {
  background: var(--signal) !important;
  color: var(--black) !important;
}
.test-hub-grid > .test-hub-profile {
  background: var(--violet) !important;
  color: var(--white) !important;
}

.test-hub-grid > button :is(strong, p, span, i),
.test-hub-grid > a :is(strong, p, span, i) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
.test-hub-grid > button:nth-child(3) .test-card-bar small,
.test-hub-grid > .test-hub-profile .test-card-bar small {
  color: var(--signal) !important;
  -webkit-text-fill-color: var(--signal) !important;
}
.test-hub-grid > button:not(:nth-child(3)) .test-card-bar small {
  color: var(--violet) !important;
  -webkit-text-fill-color: var(--violet) !important;
}
.test-hub-grid > button:nth-child(2) .test-card-bar small,
.test-hub-grid > button:nth-child(5) .test-card-bar small {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}

.test-hub-grid .test-card-bar {
  min-height: 0 !important;
  margin: 0 0 2rem !important;
  padding: 0 0 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  background: transparent !important;
}
.test-hub-grid > :is(button, a) > strong {
  display: block !important;
  margin: 0 !important;
}
.test-hub-grid > :is(button, a) > p {
  margin: 1.25rem 0 0 !important;
}
.test-hub-grid > :is(button, a) > .test-card-data-note {
  display: block !important;
  margin-top: auto !important;
  padding-top: 2rem !important;
  opacity: .82;
  font-size: .68rem !important;
  font-weight: 750;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
}
.test-hub-grid > :is(button, a) > i {
  display: flex !important;
  width: 100% !important;
  min-height: 3.35rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 1rem !important;
  padding: .95rem 1rem !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  font-family: var(--display) !important;
  font-size: var(--ui-cta, .78rem) !important;
  font-style: normal !important;
}
.test-hub-grid > :is(button, a) > i::after {
  content: "" !important;
  width: .6rem !important;
  height: .6rem !important;
  flex: 0 0 .6rem !important;
  background: currentColor !important;
}

/* -------------------------------------------------------------------------
   BLOG / JOURNAL CONTENT — personal and business articles use exactly the
   same component treatment. Inline conversion areas now follow the approved
   violet container contract instead of turning into black boxes.
   ------------------------------------------------------------------------- */
.article-page--personal .article-inline-check,
.article-page--business .article-inline-check,
.article-page--personal .article-quote,
.article-page--business .article-quote {
  background: var(--violet) !important;
  color: var(--white) !important;
}
.article-page :is(.article-inline-check, .article-quote) :is(h2, h3, p, strong, blockquote) {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
.article-page :is(.article-inline-check, .article-quote) > small,
.article-page .article-quote > span {
  color: var(--signal) !important;
  -webkit-text-fill-color: var(--signal) !important;
}
.article-page .article-inline-check .brand-action {
  --action-bg: var(--black) !important;
  --action-fg: var(--white) !important;
  --action-square: var(--signal) !important;
  background: var(--black) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
.article-page .article-inline-check .brand-action::after {
  background: var(--signal) !important;
}

/* Keep the article conversion panel aligned with the same violet visual
 * language; it is a section, not a black card. */
.article-page .article-conversion {
  background: var(--violet) !important;
  color: var(--white) !important;
}
.article-page .article-conversion :is(h2, p) {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
.article-page .article-conversion > small {
  color: var(--signal) !important;
}
.article-page .article-conversion .brand-action {
  --action-bg: var(--black) !important;
  --action-fg: var(--white) !important;
  --action-square: var(--signal) !important;
  background: var(--black) !important;
  color: var(--white) !important;
}
.article-page--personal .article-body,
.article-page--business .article-body,
.article-page--personal .article-layout,
.article-page--business .article-layout {
  width: 100%;
}

/* -------------------------------------------------------------------------
   CONTACT TEXT AREA — explicit visible "AUSGANGSLAGE" field. The browser or
   a dark parent surface may no longer collapse, recolour or visually lose it.
   ------------------------------------------------------------------------- */
.inquiry-form label:has(textarea) {
  display: grid !important;
  gap: .7rem !important;
  width: 100% !important;
}
.inquiry-form textarea[name="message"] {
  display: block !important;
  width: 100% !important;
  min-height: 11rem !important;
  resize: vertical !important;
  padding: 1rem 1.05rem !important;
  border: 1px solid var(--black) !important;
  border-radius: 0 !important;
  background: var(--white) !important;
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
  caret-color: var(--violet) !important;
  opacity: 1 !important;
}
.inquiry-form textarea[name="message"]::placeholder {
  color: #5d5d61 !important;
  -webkit-text-fill-color: #5d5d61 !important;
  opacity: 1 !important;
}
.inquiry-form textarea[name="message"]:focus {
  outline: 3px solid color-mix(in srgb, var(--violet) 28%, transparent) !important;
  outline-offset: 2px !important;
  border-color: var(--violet) !important;
}

/* -------------------------------------------------------------------------
   WORK TOOLS — public cards use one clear DOWNLOAD action.
   The file itself is managed in WordPress and released after the e-mail gate.
   ------------------------------------------------------------------------- */
.product-card > .worktool-action {
  display: flex !important;
  width: 100% !important;
  min-height: 3.55rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 1.75rem !important;
  padding: 1rem 1.15rem !important;
  text-decoration: none !important;
}
.product-card > .worktool-action::after {
  content: "" !important;
  width: .65rem !important;
  height: .65rem !important;
  flex: 0 0 .65rem !important;
}

/* -------------------------------------------------------------------------
   MOBILE — cards become one clean, full-width rail instead of clipped boxes.
   ------------------------------------------------------------------------- */
@media (max-width: 819px) {
  .test-hub-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .test-hub-grid > button,
  .test-hub-grid > a,
  .test-hub-grid > .test-hub-profile {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 23rem !important;
    flex-basis: auto !important;
    margin: 0 !important;
  }
  .test-hub-featured {
    width: 100% !important;
  }
  .article-page .article-inline-check {
    margin: 3.5rem 0 !important;
    padding: 2rem 1.25rem !important;
  }
  .article-page .article-quote,
  .article-page .article-conversion {
    padding: 4rem 1.25rem !important;
  }
  .inquiry-form textarea[name="message"] {
    min-height: 12rem !important;
    font-size: 16px !important; /* Prevents iOS form zoom. */
  }
}
.inquiry-form label > textarea[name="message"] { margin-top: .7rem !important; }