@charset "UTF-8";

/*
 * Your IT & Tech Mates shared editorial theme — A0019340
 *
 * Transitional master stylesheet for blog posts, guides and case studies.
 * It is intentionally loaded after legacy post CSS and scoped to pages carrying
 * data-yitm-post-type. Topic variants change tokens only; structural rules stay
 * shared. Forced-priority declarations are not used in this file.
 */

body[data-yitm-post-type] {
  --yitm-post-ink: #14213d;
  --yitm-post-muted: #53627a;
  --yitm-post-accent: #1f654f;
  --yitm-post-accent-strong: #174b3d;
  --yitm-post-surface: #ffffff;
  --yitm-post-surface-soft: #f4f8f5;
  --yitm-post-border: #d7e2dc;
  --yitm-post-focus: #f2b900;
  --yitm-post-measure: 72ch;
  --yitm-post-wide: 1180px;
  --yitm-post-radius: 18px;
  --yitm-post-shadow: 0 18px 45px rgba(20, 33, 61, 0.09);
  --yitm-post-space-1: clamp(0.75rem, 0.65rem + 0.35vw, 1rem);
  --yitm-post-space-2: clamp(1rem, 0.8rem + 0.75vw, 1.5rem);
  --yitm-post-space-3: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  --yitm-post-space-4: clamp(2.25rem, 1.55rem + 2.5vw, 4rem);
  color: var(--yitm-post-ink);
  background: #f7f5ef;
}

body[data-yitm-post-theme="software-ai"] {
  --yitm-post-accent: #285dc7;
  --yitm-post-accent-strong: #173f91;
  --yitm-post-surface-soft: #f2f6ff;
  --yitm-post-border: #d7e2f7;
}

body[data-yitm-post-theme="cyber"] {
  --yitm-post-accent: #9a4d00;
  --yitm-post-accent-strong: #713800;
  --yitm-post-surface-soft: #fff7e8;
  --yitm-post-border: #ecd9b7;
}

body[data-yitm-post-theme="scam"] {
  --yitm-post-accent: #a13a32;
  --yitm-post-accent-strong: #792821;
  --yitm-post-surface-soft: #fff3f1;
  --yitm-post-border: #ecd2ce;
}

body[data-yitm-post-theme="repair"] {
  --yitm-post-accent: #176a69;
  --yitm-post-accent-strong: #0d4f4e;
  --yitm-post-surface-soft: #eef8f7;
  --yitm-post-border: #cfe4e2;
}

body[data-yitm-post-theme="reflect-thrive"] {
  --yitm-post-ink: #25342e;
  --yitm-post-muted: #5b675f;
  --yitm-post-accent: #687b62;
  --yitm-post-accent-strong: #4b5e47;
  --yitm-post-surface-soft: #f5f1e7;
  --yitm-post-border: #ddd5c4;
}

body[data-yitm-post-type],
body[data-yitm-post-type] *,
body[data-yitm-post-type] *::before,
body[data-yitm-post-type] *::after {
  box-sizing: border-box;
}

body[data-yitm-post-type] main {
  min-width: 0;
}

body[data-yitm-post-type] main :where(img, picture, video, iframe, svg) {
  max-width: 100%;
}

body[data-yitm-post-type] main :where(img, video) {
  height: auto;
}

body[data-yitm-post-type] main :where(h1, h2, h3, h4) {
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

body[data-yitm-post-type] main h1 {
  font-size: clamp(2.25rem, 1.65rem + 2.6vw, 4.75rem);
  letter-spacing: -0.04em;
}

body[data-yitm-post-type] main h2 {
  font-size: clamp(1.65rem, 1.35rem + 1.25vw, 2.6rem);
  letter-spacing: -0.025em;
}

body[data-yitm-post-type] main h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  letter-spacing: -0.015em;
}

body[data-yitm-post-type] main :where(p, li, dd) {
  line-height: 1.68;
  overflow-wrap: break-word;
}

body[data-yitm-post-type] main :where(.lead, .lede, .yitm-subtitle, .blog-article-lead) {
  color: var(--yitm-post-muted);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.62;
}

body[data-yitm-post-type] main :where(
  .yitm-prose,
  .yitm-article-body,
  .leadroom-content,
  .guide-body,
  .article-body,
  .post-content
) {
  color: var(--yitm-post-ink);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
}

body[data-yitm-post-type] main :where(
  .yitm-prose,
  .yitm-article-body,
  .leadroom-content,
  .guide-body,
  .article-body,
  .post-content
) :where(h2, h3, h4) {
  color: var(--yitm-post-ink);
}

body[data-yitm-post-type] main :where(
  .yitm-prose,
  .yitm-article-body,
  .leadroom-content,
  .guide-body,
  .article-body,
  .post-content
) > :where(p, ul, ol, blockquote) {
  max-width: var(--yitm-post-measure);
}

body[data-yitm-post-type] main :where(a:not([class])) {
  color: var(--yitm-post-accent-strong);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

body[data-yitm-post-type] main :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--yitm-post-focus);
  outline-offset: 3px;
}

body[data-yitm-post-type] main :where(
  .yitm-btn,
  .btn,
  .yitm-pathway-btn,
  .leadroom-button,
  .yitm-button
) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  max-width: 100%;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

body[data-yitm-post-type] main :where(
  .yitm-hero-grid,
  .hero-grid,
  .blog-article-hero-grid,
  .premium-hero-grid,
  .yitm-grid-2,
  .guide-grid,
  .cross-links,
  .cross-links-grid,
  .yitm-reader-related-grid,
  .yitm-reader-benefit-grid
) > * {
  min-width: 0;
}

/* Compatibility alias: both historic cross-link class names now share a grid. */
body[data-yitm-post-type] main :where(.cross-links, .cross-links-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--yitm-post-space-2);
}

body[data-yitm-post-type] main :where(
  .yitm-card,
  .card,
  .content-card,
  .article-card,
  .guide-card,
  .faq-card,
  .cross-link-card,
  .leadroom-card,
  .yitm-post-card
) {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-yitm-post-type] main :where(
  .yitm-hero-media,
  .yitm-hero-image,
  .yitm-proof-hero-media,
  .blog-article-hero-media,
  .premium-hero-media
) img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Canonical components for new and migrated posts. */
body[data-yitm-post-type] .yitm-post-shell {
  width: min(calc(100% - 2rem), var(--yitm-post-wide));
  margin-inline: auto;
}

body[data-yitm-post-type] .yitm-post-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  gap: var(--yitm-post-space-3);
  align-items: center;
  padding-block: var(--yitm-post-space-4);
  color: var(--yitm-post-ink);
}

body[data-yitm-post-type] .yitm-post-prose {
  width: min(100%, var(--yitm-post-measure));
  color: var(--yitm-post-ink);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.68;
}

body[data-yitm-post-type] .yitm-post-card {
  padding: var(--yitm-post-space-2);
  border: 1px solid var(--yitm-post-border);
  border-radius: var(--yitm-post-radius);
  background: var(--yitm-post-surface);
  box-shadow: var(--yitm-post-shadow);
}

body[data-yitm-post-type] .yitm-post-callout {
  padding: var(--yitm-post-space-2);
  border: 1px solid var(--yitm-post-border);
  border-left: 5px solid var(--yitm-post-accent);
  border-radius: var(--yitm-post-radius);
  background: var(--yitm-post-surface-soft);
}

body[data-yitm-post-type] .yitm-post-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  border-radius: var(--yitm-post-radius);
  object-fit: cover;
}

body[data-yitm-post-type] .yitm-post-media-contain {
  height: auto;
  object-fit: contain;
}

body[data-yitm-post-type] .yitm-post-cta-offset {
  margin-top: 1.5rem;
}

@media (max-width: 760px) {
  body[data-yitm-post-type] main h1 {
    font-size: clamp(2rem, 1.55rem + 4vw, 3rem);
  }

  body[data-yitm-post-type] main :where(
    .yitm-hero-grid,
    .hero-grid,
    .blog-article-hero-grid,
    .premium-hero-grid,
    .yitm-grid-2,
    .guide-grid,
    .cross-links,
    .cross-links-grid,
    .yitm-reader-related-grid,
    .yitm-reader-benefit-grid,
    .yitm-post-hero
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-yitm-post-type] main :where(
    .hero-actions,
    .yitm-actions,
    .yitm-cta-row,
    .yitm-bottom-cta-row,
    .yitm-pathway-actions,
    .yitm-reader-cta-actions
  ) {
    align-items: stretch;
  }

  body[data-yitm-post-type] main :where(
    .hero-actions,
    .yitm-actions,
    .yitm-cta-row,
    .yitm-bottom-cta-row,
    .yitm-pathway-actions,
    .yitm-reader-cta-actions
  ) :where(.yitm-btn, .btn, .yitm-pathway-btn, .leadroom-button, .yitm-button) {
    width: 100%;
  }
}

@media (max-width: 420px) {
  body[data-yitm-post-type] .yitm-post-shell {
    width: min(calc(100% - 1.25rem), var(--yitm-post-wide));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-yitm-post-type] *,
  body[data-yitm-post-type] *::before,
  body[data-yitm-post-type] *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}