/* ==========================================================================
   CTE Single Base (v1 CANONICAL)
   File: site-core/themes/elements/acf-cpt/singles/cte-single-base.css

   Purpose:
   - CPT single pages (news/products/videos/articles) consistent
   - Auto-render: neutralize Kadence wrappers + hide duplicate title/meta
   - Articles: float magazine card right; body wraps then flows under
   ========================================================================== */

/* ==========================================================================
   1) AUTO-RENDER MODE — hide Kadence title/meta that would duplicate ours
   ========================================================================== */
body.cte-auto-render .entry-header,
body.cte-auto-render header.entry-header,
body.cte-auto-render .entry-title,
body.cte-auto-render h1.entry-title,
body.cte-auto-render .entry-meta,
body.cte-auto-render .post-meta,
body.cte-auto-render .kadence-post-title,
body.cte-auto-render .kadence-entry-title{
  display: none !important;
}

/* ==========================================================================
   2) AUTO-RENDER MODE — neutralize Kadence wrappers (spacing + backgrounds)
   ========================================================================== */
body.cte-auto-render #primary,
body.cte-auto-render .content-container.site-container,
body.cte-auto-render .content-area,
body.cte-auto-render .site-main,
body.cte-auto-render .content-wrap,
body.cte-auto-render .entry-content-wrap,
body.cte-auto-render .entry-content.single-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.cte-auto-render .content-container.site-container,
body.cte-auto-render .content-wrap,
body.cte-auto-render .entry-content-wrap,
body.cte-auto-render .entry-content.single-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
body.cte-auto-render .content-bg,
body.cte-auto-render .entry-content-wrap,
body.cte-auto-render .content-wrap{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.cte-auto-render .entry-content.single-content > br:first-child{
  display: none !important;
}

/* ==========================================================================
   3) CTE SINGLE CARD LAYOUT
   ========================================================================== */
.cte-single{
  padding: clamp(16px, 3vw, 30px);
}
.cte-single__header{
  padding-bottom: 10px;
}
.cte-single__header h1{
  margin: 0;
}

/* Excerpt spacing */
.cte-cpt__excerpt{
  margin-top: 8px;
}

/* Meta row (date | author) */
.cte-single__metaRow{
  margin-top: 10px;
  color: var(--cte-muted);
  font: 700 13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.cte-single__sep{
  opacity: .65;
  padding: 0 8px;
}

/* Actions row (Share + Digital) */
.cte-single__actionsRow{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ==========================================================================
   4) FEATURED IMAGE (news/products/etc. teaser float)
   ========================================================================== */
.cte-single__featured{
  margin: 14px 0 0 0;
}
.cte-single__featured img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
}
/* Default hero cap (safe crop) */
.cte-single__featured:not(.cte-single__featured--teaser) img{
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}
/* Teaser images: float right on desktop */
.cte-single__featured--teaser .cte-single__featuredImg{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (min-width: 900px){
  .cte-single__featured--teaser{
    float: right;
    width: min(460px, 42%);
    margin: 6px 0 18px 22px;
  }
}
@media (max-width: 899px){
  .cte-single__featured--teaser{
    float: none;
    width: 100%;
    margin: 14px 0 0 0;
  }
}
.cte-single__caption{
  margin-top: 8px;
  color: var(--cte-muted);
  font: 600 13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-style: italic;
}

/* Clear floats at end of body (lets wrap happen naturally) */
.cte-single__body::after{
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================================
   5) BODY TYPOGRAPHY / RHYTHM
   ========================================================================== */
.cte-single__body{
  margin-top: 16px;
}
.cte-single__body :where(p, ul, ol){
  margin: 0 0 1em 0;
}
.cte-single__body :where(h2){
  margin: 1.4em 0 .6em 0;
}
.cte-single__body :where(h3){
  margin: 1.2em 0 .5em 0;
}
.cte-single__body :where(img){
  max-width: 100%;
  height: auto;
}
.cte-single__body :where(blockquote){
  margin: 1.2em 0;
  padding: 12px 14px;
  border-left: 4px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  border-radius: 12px;
}

/* ==========================================================================
   6) PILLS (Kadence-proofing only; geometry comes from start-here-theme.css)
   ========================================================================== */
.cte-single__pills a.cte-pill br{
  display: none !important;
}
@media (max-width: 768px){
  .cte-single .cte-single__pills{ gap: var(--cte-pill-gap, 8px); }
}

/* ==========================================================================
   7) ARTICLE ASIDE (Magazine card float)
   ========================================================================== */
/* === CTE_ARTICLE_ASIDE_V1 === */
.cte-cpt--articles .cte-articleAside{
  float: right;

  --cte-mag-aside-w: clamp(180px, 46%, 360px);
  width: var(--cte-mag-aside-w);
  margin: 6px 0 14px 22px;
}
.cte-cpt--articles .cte-articleAside__cards{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cte-cpt--articles .cte-articleAside__card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.02);
  overflow: hidden;
}
.cte-cpt--articles .cte-articleAside__media{ position: relative; }
.cte-cpt--articles .cte-articleAside__mainImg{
  width: 100%;
  height: auto;
  display: block;
}
.cte-cpt--articles .cte-articleAside__body{
  padding: 12px 14px 14px;
}
.cte-cpt--articles .cte-articleAside__issue{
  font: 900 14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
}
.cte-cpt--articles .cte-articleAside__issueLink{
  color: inherit;
  text-decoration: none;
}
.cte-cpt--articles .cte-articleAside__issueLink:hover{
  text-decoration: underline;
}
.cte-cpt--articles .cte-articleAside__contrib{
  color: rgba(0,0,0,.75);
  font: 600 13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin: 10px 0 0 0;
}

/* Wrap helpers: prevent premature float-clearing on some legacy blocks */
.cte-cpt--articles .cte-single__body{
  overflow: visible;
}
.cte-cpt--articles .cte-single__body table{
  clear: none !important;
}

/* ==========================================================================
   8) ICON BUTTONS (share + digital)
   ========================================================================== */
.cte-btn.cte-btn--icon{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cte-btn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.cte-btn__icon svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Icon-only buttons */
.cte-btn--iconOnly{
  padding: 0 14px;
  min-width: 52px;
  color: rgba(0,0,0,.78);
}
.cte-btn--iconOnly .cte-btn__label{
  display: none !important;
}

/* ==========================================================================
   9) Legacy article figure markup normalization
   ========================================================================== */
/* === CTE_LEGACY_PICTURE_FIGURES_V1 === */
.cte-cpt--articles .cte-single__body figure.picture{
  margin: 16px 0;
}
.cte-cpt--articles .cte-single__body figure.picture img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
}
.cte-cpt--articles .cte-single__body figure.picture i,
.cte-cpt--articles .cte-single__body figure.picture figcaption{
  display: block;
  margin-top: 8px;
  color: var(--cte-muted);
  font: 600 13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-style: italic;
}
.cte-cpt--articles .cte-single__body figure.picture i strong,
.cte-cpt--articles .cte-single__body figure.picture figcaption strong{
  font-style: normal;
  font-weight: 800;
  color: rgba(0,0,0,.86);
}

/* === CTE_ARTICLE_H5_SECTION_HEADERS_V1 === */
.cte-cpt--articles .cte-single__body h5{
  margin: 1.2em 0 .5em 0;
  font: 900 16px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: rgba(0,0,0,.92);
  letter-spacing: -0.01em;
}


.cte-cpt--articles .cte-single__body .code-block{
  clear: none !important;
}
/* Also cover common ad wrappers just in case */
.cte-cpt--articles .cte-single__body .code-block[id],
.cte-cpt--articles .cte-single__body [class*="code-block"]{
  clear: none !important;
}

/* === CTE_ARTICLE_WRAP_CLEAR_FIX_V1 === */
/* Problem: Ad Inserter / code-block-* wrappers ship inline style="clear: both"
   which breaks wrapping next to the floating magazine cover.
   Fix: neutralize clear for those wrappers inside article body only.
*/
.cte-cpt--articles .cte-single__body .code-block{
  clear: none !important;
}

/* Some installs use different wrapper names; cover common variants */
.cte-cpt--articles .cte-single__body [class*="code-block"]{
  clear: none !important;
}
/* === CTE_ARTICLE_WRAP_CLEAR_FIX_V1_END === */


/* === CTE_ARTICLE_WRAP_IMPORTED_CONTENT_V1 ===
   cte-imported-content is a "seatbelt" wrapper that previously used overflow:hidden
   (via overrides-last.css). overflow:hidden creates a BFC and prevents text from
   wrapping beside external floats (our magazine aside). For articles, allow wrapping.
*/
.cte-cpt--articles .cte-imported-content{
  overflow: visible !important;
}
.cte-cpt--articles .cte-imported-content__inner{
  overflow: visible !important;
}


/* === CTE_ARTICLE_WRAP_FIGURE_FIX_V1 ===
   Some legacy articles start with <figure class="picture|graphic"> blocks.
   Ensure they do not clear floats (wrap should continue beside magazine aside).
*/
.cte-cpt--articles .cte-single__body figure.picture,
.cte-cpt--articles .cte-single__body figure.graphic{
  clear: none !important;
}

/* === CTE_ARTICLE_FIRST_MEDIA_LEFT_OF_MAG_V1 ===
   Goal: reduce dead whitespace when a magazine cover floats right.
   Solution: on desktop, float the FIRST meaningful figure left and size it to the remaining width.
   Handles cases where body starts with:
   - <figure class="picture|graphic">
   - <div class="roofHeader"> then a <figure ...>
*/
@media (min-width: 900px){

  /* First figure is literally first child */
  .cte-cpt--articles .cte-single__body > figure.picture:first-child,
  .cte-cpt--articles .cte-single__body > figure.graphic:first-child,

  /* Body starts with roofHeader then figure */
  .cte-cpt--articles .cte-single__body > .roofHeader + figure.picture,
  .cte-cpt--articles .cte-single__body > .roofHeader + figure.graphic{

    float: left !important;

    /* Fill the lane to the left of the magazine cover */
    width: calc(100% - var(--cte-mag-aside-w, 360px) - 22px) !important;

    /* Guard rails so it doesn't get silly-wide or too tiny */
    max-width: 680px;
    min-width: 260px;

    margin: 6px 22px 18px 0 !important;
    clear: none !important;
  }

  /* Ensure the floated figure's image behaves */
  .cte-cpt--articles .cte-single__body > figure.picture:first-child img,
  .cte-cpt--articles .cte-single__body > figure.graphic:first-child img,
  .cte-cpt--articles .cte-single__body > .roofHeader + figure.picture img,
  .cte-cpt--articles .cte-single__body > .roofHeader + figure.graphic img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}