/* //////////////////////////////////////////////////////////////////////////

   CSS Part IV

   //////////////////////////////////////////////////////////////////////////

   I. Ghost Cards
   |
   ├─ Customize
   └─ Normalize

   //////////////////////////////////////////////////////////////////////////

   I. Ghost Cards

   ////////////////////////////////////////////////////////////////////////// */

/* Customize
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-post-content] {

   /* Typography */

   /* Font used by card copy, metadata, and non-heading controls. */
   --kg-font-family-body: var(--font-family-body);
   /* Font used by card titles, headings, and prominent labels. */
   --kg-font-family-heading: var(--font-family-subheading);
   /* Font used by buttons and other call-to-action labels. */
   --kg-font-family-action: var(--font-family-subheading);
   /* Heading size for non-split full-width Header and Signup cards. */
   --kg-font-size-heading-large: var(--font-size-xxxl);
   /* Default Header and Signup heading size. */
   --kg-font-size-heading: var(--font-size-xxl);
   /* Subheading size for non-split full-width Header and Signup cards. */
   --kg-font-size-subheading-large: var(--font-size-l);
   /* Default Header and Signup subheading size. */
   --kg-font-size-subheading: var(--font-size-m);
   /* Text size for card buttons and Toggle headings. */
   --kg-font-size-action: var(--font-size-r);
   /* Text size for longer card content, such as an expanded Toggle. */
   --kg-font-size-content: var(--font-size-s);
   /* Compact size for Signup success and error messages. */
   --kg-font-size-status: var(--font-size-xxs);
   /* Size for captions and the Signup disclaimer. */
   --kg-font-size-caption: var(--font-size-caption);
   /* Weight shared by card headings and titles. */
   --kg-font-weight-heading: var(--font-weight-regular);
   /* Weight shared by card buttons and Signup status messages. */
   --kg-font-weight-action: var(--font-weight-regular);
   /* Line height shared by prominent card headings. */
   --kg-line-height-heading: 1.18;

   /* Color */

   /* Primary text color for cards skinned by the theme. */
   --kg-color-text: var(--color-font-one);
   /* Default surface for cards that must follow the active color scheme. */
   --kg-color-background: var(--color-bg);
   /* Hover surface for fully clickable cards in the active color scheme. */
   --kg-color-background-hover: var(--color-three);
   /* Text color inside the Signup email field. */
   --kg-color-input-text: var(--color-font-one);
   /* Surface behind the Signup input and its field wrapper. */
   --kg-color-input-background: var(--color-body);
   /* Computed readable text color on the publication accent. */
   --kg-color-on-accent: var(--ghost-accent-contrast, var(--color-font-white, #fff));

   /* Border */

   /* Border applied to theme-skinned card surfaces. */
   --kg-border: none;
   /* Border applied to buttons and form controls. */
   --kg-border-control: none;
   /* Default outer radius for cards and their primary media. */
   --kg-border-radius: var(--radius-medium);
   /* Independent outer radius for every full-width card. */
   --kg-border-radius-full: var(--kg-border-radius);
   /* Smaller radius for images and icons nested inside cards. */
   --kg-border-radius-media: var(--radius-extra-small);
   /* Radius shared by buttons and Signup form controls. */
   --kg-border-radius-control: var(--radius-full);
   /* Shadow applied to theme-skinned card surfaces. */
   --kg-box-shadow: none;

   /* Size */

   /* Shared desktop height for Header buttons and Signup form controls. */
   --kg-height-control: 3.5rem;

   /* Transition */
   /* Transition used when a linked card changes its surface on hover. */
   --kg-transition-background: background-color .3s ease;

   /* Link */
   /* Decoration used by card buttons and other action links. */
   --kg-text-decoration-line-action: none;
   /* Decoration used by inline links inside card copy. */
   --kg-text-decoration-line-link: var(--text-decoration-line-link);
   /* Thickness shared by inline links inside card copy. */
   --kg-text-decoration-thickness-link: var(--text-decoration-thickness-link);
   /* Distance between inline card-link text and its underline. */
   --kg-text-underline-offset-link: var(--text-underline-offset-link);

   /* Alignment */

   /* Alignment inherited from the article for cards without an author setting. */
   --kg-alignment-content: var(--v-alignment-content, center);

   /* Spacing */

   /* Inline auto-margin used to align intrinsic card media and embeds. */
   --kg-margin-inline-content: var(--v-margin-inline-content, auto);
   /* Gap between heading and subheading in large non-split cards. */
   --kg-margin-subheading-large: clamp(1.5rem, 1.25rem + 1vw, 2rem);
   /* Inset between the Signup fields wrapper and its controls. */
   --kg-padding-signup-fields: calc(var(--gap-mini) / 3);
   /* Inline gutter for non-split full-width Header and Signup content. */
   --kg-padding-wide: var(--gap-grid);

   /* State */

   /* Opacity for descriptions, metadata, and other secondary information. */
   --kg-opacity-muted: .7;
   /* Opacity shared by media captions and the Signup disclaimer. */
   --kg-opacity-caption: var(--opacity-caption);
   /* Hover opacity for card buttons and other compact actions. */
   --kg-opacity-hover: .8;
}

/* --------------------------------------------------------------------------
   1.Normalize
   -------------------------------------------------------------------------- */

/* Typography
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Replace Ghost’s card-specific system fonts with the theme body font. */
[data-post-content] :is(.kg-audio-card, .kg-callout-card, .kg-cta-card, .kg-header-card.kg-v2, .kg-signup-card, .kg-toggle-card),
[data-post-content] .kg-bookmark-content,
[data-post-content] .kg-file-card .kg-file-card-container,
[data-post-content] .kg-nft-card .kg-nft-card-container,
[data-post-content] .kg-product-card-container,
[data-post-content] .kg-video-player {
   font-family: var(--kg-font-family-body);
}

/* Fix: Replace Ghost’s card title fonts and weights with the theme heading style. */
[data-post-content] .kg-audio-title,
[data-post-content] .kg-bookmark-title,
[data-post-content] .kg-file-card-title,
[data-post-content] .kg-nft-card .kg-nft-title,
[data-post-content] .kg-product-card .kg-product-card-title,
[data-post-content] .kg-toggle-card .kg-toggle-heading-text,
[data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card) :is(.kg-header-card-heading, .kg-header-card-subheading, .kg-signup-card-heading, .kg-signup-card-subheading) {
   font-family: var(--kg-font-family-heading);
   font-weight: var(--kg-font-weight-heading);
}

/* Fix: Replace Ghost’s card-specific action fonts with the theme action style. */
[data-post-content] .kg-button-card .kg-btn,
[data-post-content] .kg-cta-card .kg-cta-button,
[data-post-content] .kg-header-card.kg-v2 .kg-header-card-button,
[data-post-content] .kg-product-card .kg-product-card-button,
[data-post-content] .kg-signup-card .kg-signup-card-button {
   font-family: var(--kg-font-family-action);
   font-size: var(--kg-font-size-action);
   font-weight: var(--kg-font-weight-action);
   text-decoration-line: var(--kg-text-decoration-line-action);
}

/* Fix: Match the CTA sponsor label to the action font without changing its compact scale. */
[data-post-content] .kg-cta-sponsor-label {
   font-family: var(--kg-font-family-action);
}

/* Fix: Keep Header V2 and Signup headings aligned with the theme’s responsive type scale. */
[data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card) h2:is(.kg-header-card-heading, .kg-signup-card-heading) {
   font-size: var(--kg-font-size-heading);
   line-height: var(--kg-line-height-heading);
}

/* Fix: Replace Ghost’s fixed Header V2 and Signup subheading scale. */
[data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card) :is(.kg-header-card-subheading, .kg-signup-card-subheading) {
   font-size: var(--kg-font-size-subheading);
}

/* Fix: Give only non-split wide cards the theme’s large heading scale. */
[data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card).kg-width-full.kg-content-wide:not(.kg-layout-split) h2:is(.kg-header-card-heading, .kg-signup-card-heading) {
   font-size: var(--kg-font-size-heading-large);
}

/* Fix: Give only non-split wide cards the theme’s large subheading scale. */
[data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card).kg-width-full.kg-content-wide:not(.kg-layout-split) :is(.kg-header-card-subheading, .kg-signup-card-subheading) {
   font-size: var(--kg-font-size-subheading-large);
}

/* Fix: Keep the non-split wide subheading rhythm configurable. */
[data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card).kg-width-full.kg-content-wide:not(.kg-layout-split) h2 + :is(.kg-header-card-subheading, .kg-signup-card-subheading) {
   margin-block-start: var(--kg-margin-subheading-large);
}

/* Fix: Normalize toggle content and Signup feedback typography. */
[data-post-content] .kg-toggle-card .kg-toggle-heading-text {
   font-size: var(--kg-font-size-action);
}

/* Fix: Replace Ghost’s fixed Toggle content scale with the theme scale. */
[data-post-content] .kg-toggle-content {
   font-size: var(--kg-font-size-content);
}

/* Fix: Replace Ghost’s fixed Signup feedback typography. */
[data-post-content] .kg-signup-card-success,
[data-post-content] .kg-signup-card-error {
   font-size: var(--kg-font-size-status);
   font-weight: var(--kg-font-weight-action);
}

/* Fix: Replace Ghost’s fixed Signup disclaimer treatment. */
[data-post-content] .kg-signup-card-disclaimer {
   font-size: var(--kg-font-size-caption);
   opacity: var(--kg-opacity-caption);
}

/* Fix: Use one muted treatment for secondary card metadata. */
[data-post-content] .kg-audio-time,
[data-post-content] .kg-bookmark-description,
[data-post-content] .kg-bookmark-metadata > :not(img),
[data-post-content] .kg-file-card:not(.kg-file-card-medium) .kg-file-card-caption,
[data-post-content] .kg-file-card-filesize,
[data-post-content] .kg-product-card .kg-product-card-description :is(p, ol, ul),
[data-post-content] .kg-toggle-heading svg {
   opacity: var(--kg-opacity-muted);
}

[data-post-content] figcaption {
   opacity: var(--kg-opacity-caption);
}

/* Links
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Keep inline links inside cards consistent with the theme underline style. */
[data-post-content] :is(.kg-callout-text, .kg-cta-text, .kg-header-card-subheading, .kg-product-card-description, .kg-signup-card-disclaimer, .kg-signup-card-subheading, .kg-toggle-content) a {
   text-decoration-line: var(--kg-text-decoration-line-link);
   text-decoration-thickness: var(--kg-text-decoration-thickness-link);
   text-underline-offset: var(--kg-text-underline-offset-link);
}

/* Fix: Animate theme-aware background changes on linked card surfaces. */
[data-post-content] .kg-bookmark-card .kg-bookmark-container,
[data-post-content] .kg-file-card .kg-file-card-container,
[data-post-content] .kg-nft-card .kg-nft-card-container {
   transition: var(--kg-transition-background);
}

/* Fix: Use the theme’s shared hover response for card actions. */
[data-post-content] .kg-button-card .kg-btn:hover,
[data-post-content] .kg-cta-card .kg-cta-button:hover,
[data-post-content] .kg-header-card.kg-v2 .kg-header-card-button:hover,
[data-post-content] .kg-product-card .kg-product-card-button:hover,
[data-post-content] .kg-signup-card .kg-signup-card-button:hover {
   text-decoration-line: var(--kg-text-decoration-line-action);
   opacity: var(--kg-opacity-hover);
}

/* Surface
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Replace hard-coded Ghost card surfaces, borders, shadows, and text colors. */
[data-post-content] .kg-audio-card,
[data-post-content] .kg-bookmark-card a.kg-bookmark-container,
[data-post-content] .kg-file-card a.kg-file-card-container,
[data-post-content] .kg-nft-card a.kg-nft-card-container,
[data-post-content] .kg-product-card-container,
[data-post-content] .kg-toggle-card {
   box-shadow: var(--kg-box-shadow);
   color: var(--kg-color-text);
   border: var(--kg-border);
   background-color: var(--kg-color-background);
}

/* Fix: Map Ghost’s white Callout and CTA variants to the theme surface. */
[data-post-content] :is(.kg-callout-card-white, .kg-cta-bg-white) {
   box-shadow: var(--kg-box-shadow);
   border: var(--kg-border);
   background-color: var(--kg-color-background);
}

/* Fix: Give linked cards a theme-aware hover surface without changing their text or border. */
[data-post-content] .kg-bookmark-card .kg-bookmark-container:hover,
[data-post-content] .kg-file-card .kg-file-card-container:hover,
[data-post-content] .kg-nft-card .kg-nft-card-container:hover {
   color: var(--kg-color-text);
   border: var(--kg-border);
   background-color: var(--kg-color-background-hover);
}

/* Fix: Replace hard-coded legacy NFT copy colors with the active theme colors. */
[data-post-content] .kg-nft-card :is(.kg-nft-title, .kg-nft-creator, .kg-nft-creator span, .kg-nft-description) {
   color: var(--kg-color-text);
}

/* Fix: Keep legacy NFT creator metadata visually secondary. */
[data-post-content] .kg-nft-creator {
   opacity: var(--kg-opacity-muted);
}

/* Fix: Replace Ghost’s hard-coded Signup input surface while preserving author card colors. */
[data-post-content] .kg-signup-card-input {
   color: var(--kg-color-input-text);
}

/* Fix: Replace Ghost’s hard-coded Signup input and field backgrounds. */
[data-post-content] .kg-signup-card-input,
[data-post-content] .kg-signup-card-fields {
   background-color: var(--kg-color-input-background);
}

/* Border & radius
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Replace inconsistent Ghost control borders and radii with theme controls. */
[data-post-content] .kg-button-card .kg-btn,
[data-post-content] .kg-cta-card .kg-cta-button,
[data-post-content] .kg-header-card.kg-v2 .kg-header-card-button,
[data-post-content] .kg-product-card .kg-product-card-button,
[data-post-content] .kg-signup-card .kg-signup-card-button {
   border: var(--kg-border-control);
   border-radius: var(--kg-border-radius-control);
}

/* Fix: Replace Ghost’s Signup field border and radius with the theme control. */
[data-post-content] .kg-signup-card-fields {
   border: var(--kg-border-control);
   border-radius: var(--kg-border-radius-control);
}

/* Fix: Keep the Signup input radius aligned with its field wrapper. */
[data-post-content] .kg-signup-card-input {
   border-radius: var(--kg-border-radius-control);
}

/* Fix: Replace inconsistent Ghost card and primary media radii with the theme radius. */
[data-post-content] :is(.kg-audio-card, .kg-callout-card, .kg-cta-card, .kg-toggle-card),
[data-post-content] :is(.kg-header-card, .kg-signup-card),
[data-post-content] .kg-bookmark-card a.kg-bookmark-container,
[data-post-content] .kg-file-card a.kg-file-card-container,
[data-post-content] .kg-nft-card .kg-nft-card-container,
[data-post-content] .kg-product-card-container,
[data-post-content] .kg-video-container,
[data-post-content] :is(.kg-image-card, .kg-gallery-card) img {
   border-radius: var(--kg-border-radius);
}

/* Fix: Give every full-width card root an independently configurable radius. */
[data-post-content] .kg-card.kg-width-full {
   border-radius: var(--kg-border-radius-full);
}

/* Fix: Apply the full-width radius to Image and Video media instead of only their figure wrappers. */
[data-post-content] .kg-image-card.kg-width-full img,
[data-post-content] .kg-video-card.kg-width-full .kg-video-container {
   border-radius: var(--kg-border-radius-full);
}

/* Fix: Remove the lower corners when a non-Video full-width card begins a connected stack. */
[data-post-content] > .kg-card.kg-width-full:not(.kg-card-hascaption, .kg-video-card):has(+ .kg-card.kg-width-full:not(.kg-video-card)),
[data-post-content] > .kg-image-card.kg-width-full:not(.kg-card-hascaption):has(+ .kg-card.kg-width-full:not(.kg-video-card)) img {
   border-end-start-radius: 0;
   border-end-end-radius: 0;
}

/* Fix: Remove the upper corners when a non-Video full-width card continues a connected stack. */
[data-post-content] > .kg-card.kg-width-full:not(.kg-card-hascaption, .kg-video-card) + .kg-card.kg-width-full:not(.kg-video-card),
[data-post-content] > .kg-card.kg-width-full:not(.kg-card-hascaption, .kg-video-card) + .kg-image-card.kg-width-full img {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
}

/* Fix: Clip only cards whose media must follow the outer card radius. */
[data-post-content] :is(.kg-header-card, .kg-signup-card),
[data-post-content] .kg-bookmark-card .kg-bookmark-container,
[data-post-content] .kg-nft-card .kg-nft-card-container,
[data-post-content] .kg-video-container {
   overflow: hidden;
}

/* Fix: Use the smaller theme radius for compact card media. */
[data-post-content] .kg-audio-thumbnail,
[data-post-content] .kg-cta-image-container img,
[data-post-content] .kg-file-card-icon::before,
[data-post-content] .kg-product-card-image {
   border-radius: var(--kg-border-radius-media);
}

/* Spacing
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Align only non-split full-width card content with the theme gutter. */
[data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card).kg-width-full.kg-content-wide:not(.kg-layout-split) :is(.kg-header-card-content, .kg-signup-card-content) {
   padding-inline: var(--kg-padding-wide);
}

/* Fix: Keep the Signup fields inset configurable through the card adapter. */
[data-post-content] .kg-signup-card-fields {
   padding: var(--kg-padding-signup-fields);
}

/* Accent
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Use the computed accent contrast only where Ghost has no author text-color control. */
[data-post-content] .kg-button-card .kg-btn-accent,
[data-post-content] .kg-product-card .kg-product-card-btn-accent,
[data-post-content] .kg-callout-card.kg-callout-card-accent {
   color: var(--kg-color-on-accent);
}

/* Fix: Use the theme contrast for the currently visible accent Signup button label. */
[data-post-content] .kg-signup-card .kg-signup-card-form:not(.loading) .kg-signup-card-button.kg-style-accent > .kg-signup-card-button-default,
[data-post-content] .kg-signup-card .kg-signup-card-form.loading .kg-signup-card-button.kg-style-accent > .kg-signup-card-button-loading {
   color: var(--kg-color-on-accent);
}

/* Fix: Keep links legible on the accent Callout without forcing a new color. */
[data-post-content] .kg-callout-card.kg-callout-card-accent a {
   color: inherit;
}

/* Fix: Keep the Audio placeholder icon legible on the Ghost accent surface. */
[data-post-content] .kg-audio-thumbnail.placeholder svg {
   fill: var(--kg-color-on-accent);
}

/* Alignment
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Follow the article layout for embeds without an author-controlled alignment. */
[data-post-content] .kg-embed-card {
   display: grid;
   justify-items: var(--kg-alignment-content);
}

/* Fix: Follow the article layout for legacy NFT and Product cards with constrained inner surfaces. */
[data-post-content] .kg-nft-card,
[data-post-content] .kg-product-card {
   align-items: var(--kg-alignment-content);
}

/* Fix: Follow the article layout for the Transistor player without changing its iframe contract. */
[data-post-content] .kg-transistor-card {
   justify-content: var(--kg-alignment-content);
}

/* Fix: Align intrinsic Image media and provider-generated Embed content with the article layout. */
[data-post-content] .kg-image-card img,
[data-post-content] .kg-embed-card > div > * {
   margin-inline: var(--kg-margin-inline-content);
}

/* Audio
   ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Fix: Replace Ghost’s hard-coded audio icon and control colors. */
[data-post-content] .kg-audio-card svg {
   fill: var(--kg-color-text);
}

/* Fix: Replace Ghost’s fixed Audio time and playback-rate text colors. */
[data-post-content] .kg-audio-time,
[data-post-content] .kg-audio-playback-rate {
   color: var(--kg-color-text);
}

/* RWD — Ghost Cards
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width:769px) {
   /* Fix: Decouple Header and Signup control height from Ghost’s inconsistent local em sizing. */
   [data-post-content] .kg-header-card.kg-v2 .kg-header-card-button,
   [data-post-content] .kg-signup-card :is(.kg-signup-card-input, .kg-signup-card-button) {
      height: var(--kg-height-control);
      min-height: var(--kg-height-control);
   }

   /* Fix: Scale Ghost’s oversized wide Header block inset with the selected site width. */
   [data-post-content] .kg-header-card.kg-v2.kg-width-wide .kg-header-card-text {
      padding-block: var(--kg-padding-block-header-wide);
   }

   /* Fix: Scale Ghost’s oversized full and split card block inset with the selected site width. */
   [data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card).kg-width-full :is(.kg-header-card-text, .kg-signup-card-text) {
      padding-block: var(--kg-padding-block-full);
   }

   /* Fix: Keep content-wide split cards proportional to their text column. */
   [data-post-content] :is(.kg-header-card.kg-v2, .kg-signup-card).kg-layout-split.kg-content-wide :is(.kg-header-card-text, .kg-signup-card-text) {
      padding-block: var(--kg-padding-block-split-content-wide);
   }
}