/* Shared front-end and editor presentation for the native Piet block pattern. */
.ad-piet-tip {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: min-content 1fr;
  grid-template-areas: "mascot label" "mascot copy";
  align-items: start;
  column-gap: 24px;
  row-gap: 8px;
  clear: both;
  margin: 28px 0;
  padding: 24px;
  border: 1px solid rgba(120, 199, 210, .28);
  border-left: 4px solid #ee9654;
  border-radius: 8px;
  background: #10313e;
  color: #eff1e9;
}
.ad-piet-tip > .ad-piet-tip-mascot,
.ad-piet-tip > .wp-block-html:has(.ad-piet-tip-mascot) {
  grid-area: mascot;
  position: relative;
  align-self: center;
  width: 100%;
  margin: 0;
  line-height: 0;
}
.ad-piet-tip-mascot > img { display: block; width: 100%; height: auto; }
/* Piet is exempt from the AI badge, including older inserted copies. */
.ad-piet-tip-mascot .ad-ai-badge { display: none; }
.ad-piet-tip > .ad-piet-tip-label,
.nacht-redaktion .ad-category-guide .ad-piet-tip > .ad-piet-tip-label {
  grid-area: label;
  margin: 0;
  padding: 0;
  color: #ffc38a;
  font: 700 20px/1.4 Manrope, Arial, sans-serif;
  letter-spacing: -.3px;
  text-transform: none;
  text-wrap: balance;
}
.ad-piet-tip > p,
.nacht-redaktion .nwp-prose .ad-piet-tip > p {
  grid-area: copy;
  min-width: 0;
  margin: 0;
  color: #e2e9e7;
  font: 400 16px/1.8 Manrope, Arial, sans-serif;
  overflow-wrap: break-word;
}
@media (max-width: 600px) {
  .ad-piet-tip {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "mascot label" "copy copy";
    gap: 16px;
    margin: 24px 0;
    padding: 18px;
  }
  .ad-piet-tip > .ad-piet-tip-label,
  .nacht-redaktion .ad-category-guide .ad-piet-tip > .ad-piet-tip-label {
    align-self: center;
    font-size: 19px;
  }
}