/* DJC Article -- Skeleton

 * Structural layout only + skeleton defaults for the article component.
 * All visual properties are driven by --article-* CSS custom properties.
 *
 * Slots / parts:
 *   __header-slot   -- pre-content injection point
 *   __media         -- video player mount target (when mediaUrl is set)
 *   __image         -- cover image
 *   __heading       -- title + byline
 *   __title         -- h1
 *   __byline        -- h2
 *   __share         -- share row (icons or DJC_ShareMenu mount)
 *   __html          -- article body HTML (caller-supplied)
 *   __related-slot  -- "more like this" / related content
 *   __footer-slot   -- cross-promo CTAs
 *
 * NO SKIN: renders a visible skeleton -- neutral colors, readable type,
 * sensible spacing. Functional but unbranded.
 *
 * TO SKIN: set --article-* variables on .djc-article
 * See /skins/article.djc.css for the DJC brand skin.
*/

@import url('skins/article.djc.css');


.djc-article {
  /* colors */
  --article-bg: transparent;
  --article-text: #222;
  --article-heading: #111;
  --article-byline: #555;
  --article-link: #2e5db4;
  --article-link-hover: #4071cc;
  --article-rule: rgba(0, 0, 0, 0.08);
  --article-share-icon: #555;
  --article-share-icon-hover: #111;

  /* typography */
  --article-font: inherit;
  --article-body-size: 17px;
  --article-body-leading: 1.6;
  --article-title-size: clamp(28px, 4vw, 44px);
  --article-byline-size: 18px;
  --article-byline-weight: 400;
  --article-share-size: 14px;

  /* spacing */
  --article-max-width: 720px;
  --article-section-gap: 32px;
  --article-image-radius: 0;
}


/* reset */
.djc-article *,
.djc-article *::before,
.djc-article *::after {
  box-sizing: border-box;
}


/* wrapper */
.djc-article {
  display: block;
  width: 100%;
  background: var(--article-bg);
  color: var(--article-text);
  font-family: var(--article-font);
  font-size: var(--article-body-size);
  line-height: var(--article-body-leading);
}


/* inner -- max-width container; callers can override via classNames or skin */
.djc-article__inner {
  display: flex;
  flex-direction: column;
  gap: var(--article-section-gap);
  width: 100%;
  max-width: var(--article-max-width);
  margin: 0 auto;
  padding: 0 20px;
}


/* media (video) */
.djc-article__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--article-image-radius);
  overflow: hidden;
}


/* cover image */
.djc-article__image {
  width: 100%;
  border-radius: var(--article-image-radius);
  overflow: hidden;
}

.djc-article__image img {
  display: block;
  width: 100%;
  height: auto;
}


/* heading */
.djc-article__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.djc-article__title {
  margin: 0;
  font-size: var(--article-title-size);
  line-height: 1.15;
  color: var(--article-heading);
}

.djc-article__byline {
  margin: 0;
  font-size: var(--article-byline-size);
  font-weight: var(--article-byline-weight);
  color: var(--article-byline);
}


/* share row */
.djc-article__share {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--article-rule);
  border-bottom: 1px solid var(--article-rule);
  font-size: var(--article-share-size);
}

.djc-article__share-label {
  color: var(--article-byline);
}

.djc-article__share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--article-share-icon);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.djc-article__share-icon:hover {
  color: var(--article-share-icon-hover);
  background: var(--article-rule);
}

.djc-article__share-icon--copied {
  color: #2c8a3a;
}


/* body html (caller-supplied; minimal opinion) */
.djc-article__html>*+* {
  margin-top: 1em;
}

.djc-article__html a {
  color: var(--article-link);
}

.djc-article__html a:hover {
  color: var(--article-link-hover);
}

.djc-article__html img {
  max-width: 100%;
  height: auto;
}


/* slots -- structural only; theming is per-caller */
.djc-article__header-slot,
.djc-article__related-slot {
  width: 100%;
}


/* full-width footers (outside __inner so they can break out of the
 * article's max-width container -- e.g. a gradient "More Like This"
 * slider, or a sticky offer pinned at the very bottom). */
.djc-article__footer,
.djc-article__overlay-footer {
  display: block;
  width: 100%;
  margin: 0;
}


/* inline offer placeholder
 *
 * Each <djc-offer-slot> tag in the body html becomes one of these
 * sections. They start hidden so an unfilled placeholder leaves no
 * visible gap.
 * DJC_Offers (or any other consumer) removes the [hidden] attribute
 * when it materializes the offer.
 *
 * data-djc-offer-name carries the authoring identifier, e.g.
 * "book-of-signs". A .djc-offer-slot--{name} modifier class is also
 * added when the name is a
 * safe identifier (alphanumerics / dashes / underscores) so skins can
 * theme each offer variant without parsing the data-attribute.
 */
.djc-offer-slot {
  display: block;
  width: 100%;
  margin: 0;
}

.djc-offer-slot[hidden] {
  display: none;
}


/* ===========================================================
   CARD VARIANT
   compact preview tile -- the whole tile is one block-level <a>.
   activated via configType: 'card' or class .djc-article--card.
   =========================================================== */

.djc-article--card {
  /* card-specific tokens (default skin; override per project) */
  --article-card-bg: #ffffff;
  --article-card-radius: 12px;
  --article-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  --article-card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.10);
  --article-card-image-aspect: 16 / 9;
  --article-card-padding: 16px;
  --article-card-title-size: clamp(16px, 1.4vw, 20px);
  --article-card-title-color: var(--article-heading);
  --article-card-teaser-size: 14px;
  --article-card-teaser-color: #555;
  --article-card-teaser-lines: 3;
  --article-card-readmore-color: var(--article-link);
  --article-card-readmore-size: 13px;
  --article-card-transition: transform 0.25s ease, box-shadow 0.25s ease;
  --article-card-gap: 8px;
}


/* card overrides the article-level inner: full width, no padding */
.djc-article--card .djc-article__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}


/* the click target spans the entire tile */
.djc-article--card .djc-article__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--article-card-bg);
  border-radius: var(--article-card-radius);
  box-shadow: var(--article-card-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--article-card-transition);
}

.djc-article--card .djc-article__link:hover,
.djc-article--card .djc-article__link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--article-card-shadow-hover);
  text-decoration: none;
  color: inherit;
}


/* image fills the top of the card at a fixed aspect ratio */
.djc-article--card .djc-article__image {
  width: 100%;
  aspect-ratio: var(--article-card-image-aspect);
  border-radius: 0;
  overflow: hidden;
}

.djc-article--card .djc-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* title -- compact, multi-line allowed.
   text-transform: none overrides any global h3 rule from the host site
   so the title renders exactly as it sits in the content row. */
.djc-article--card .djc-article__title {
  margin: 0;
  padding: var(--article-card-padding) var(--article-card-padding) 0;
  font-size: var(--article-card-title-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--article-card-title-color);
  text-transform: none;
}


/* teaser -- line-clamped via CSS; JS does not truncate */
.djc-article--card .djc-article__teaser {
  margin: 0;
  padding: var(--article-card-gap) var(--article-card-padding) 0;
  font-size: var(--article-card-teaser-size);
  line-height: 1.5;
  color: var(--article-card-teaser-color);
  display: -webkit-box;
  -webkit-line-clamp: var(--article-card-teaser-lines);
  line-clamp: var(--article-card-teaser-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* read-more affordance -- pinned to the bottom of the tile */
.djc-article--card .djc-article__readmore {
  margin-top: auto;
  padding: 12px var(--article-card-padding) var(--article-card-padding);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--article-card-readmore-size);
  font-weight: 600;
  color: var(--article-card-readmore-color);
}

.djc-article--card .djc-article__link:hover .djc-article__readmore i {
  transform: translateX(2px);
  transition: transform 0.2s ease;
}


/* ============================================================
 * Modal overlay -- DJC_Article.openModal() renders the full
 * (default-variant) article inside a centered, scrollable panel
 * over a dim backdrop. BEM block is `djc-article-modal` so the
 * inner .djc-article keeps its own selectors intact.
 * ============================================================ */
.djc-article-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: djc-article-modal-in 0.25s ease both;
}

.djc-article-modal--closing {
  animation: djc-article-modal-out 0.2s ease both;
}

@keyframes djc-article-modal-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes djc-article-modal-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.djc-article-modal__overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.djc-article-modal__overlay-panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.djc-article-modal__overlay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: #222;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.djc-article-modal__overlay-close:hover {
  background: #fff;
  color: #000;
}

.djc-article-modal__body {
  overflow-y: auto;
  padding: 0;
}

body.djc-article-modal-open {
  overflow: hidden;
}

/* In-modal article layout
 *
 * The article inside the modal goes "full-bleed" for its hero image
 * (and any media-player slot), while title/byline/share/body copy
 * stay in a narrower padded text column. Tokens bump body + heading
 * type sizes for comfortable reading at this larger width.
 */
/* Token overrides for in-modal articles.
 *
 * !important is necessary here because the DJC skin (article.djc.css)
 * sets these same tokens at equal specificity, and on the live CMS
 * page the skin <link> ends up loaded a second time AFTER this file
 * (the cache-busted PHP <link> and the un-busted requireStylesheet()
 * call don't string-match, so requireStylesheet appends a duplicate).
 * Until that double-load is sorted we need !important to win
 * regardless of skin load order.
 */
.djc-article-modal .djc-article,
.djc-article-modal .djc.djc-article {
  --article-body-size: clamp(17px, 1.2vw + 14px, 20px) !important;
  --article-body-leading: 1.7 !important;
  --article-title-size: clamp(32px, 4.2vw, 52px) !important;
  --article-byline-size: 19px !important;
}

/* Force computed font-size on the article + paragraph levels, since
 * host stylesheets ship a generic `p { font-size: 14px }` rule that
 * otherwise overrides the inherited body-size. */
.djc-article-modal .djc-article {
  font-size: var(--article-body-size) !important;
  line-height: var(--article-body-leading) !important;
}

.djc-article-modal .djc-article__html,
.djc-article-modal .djc-article__html p,
.djc-article-modal .djc-article__html li {
  font-size: var(--article-body-size) !important;
  line-height: var(--article-body-leading) !important;
}

.djc-article-modal .djc-article__inner {
  max-width: none;
  padding: 0;
  gap: 28px;
}

/* Hero treatment for the cover image + video media slot */
.djc-article-modal .djc-article__media,
.djc-article-modal .djc-article__image {
  width: 100%;
  border-radius: 0;
  margin: 0;
}

.djc-article-modal .djc-article__image {
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.djc-article-modal .djc-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text-content blocks: readable column, centered, padded.
   __html stays a bit wider so long-form body copy gets more room. */
.djc-article-modal .djc-article__header-slot,
.djc-article-modal .djc-article__heading,
.djc-article-modal .djc-article__share,
.djc-article-modal .djc-article__html,
.djc-article-modal .djc-article__related-slot,
.djc-article-modal .djc-article__footer-slot {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

.djc-article-modal .djc-article__html {
  max-width: 1000px;
}

/* Long-form readability inside the modal body:
 *   - extra rhythm between paragraphs
 *   - clear heading hierarchy
 *   - styled blockquotes + list indentation
 */
.djc-article-modal .djc-article__html>*+* {
  margin-top: 1.25em;
}

.djc-article-modal .djc-article__html h2,
.djc-article-modal .djc-article__html h3,
.djc-article-modal .djc-article__html h4 {
  line-height: 1.25;
  color: var(--article-heading);
  margin-top: 1.8em;
}

.djc-article-modal .djc-article__html h2 {
  font-size: 1.6em;
  font-weight: 700;
}

.djc-article-modal .djc-article__html h3 {
  font-size: 1.3em;
  font-weight: 700;
}

.djc-article-modal .djc-article__html h4 {
  font-size: 1.1em;
  font-weight: 600;
}

.djc-article-modal .djc-article__html blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--article-rule);
  font-style: italic;
  color: var(--article-byline);
}

/* Pull-quote callout. Heavier visual weight than the default blockquote
 * (tinted card, accent rail, oversized opening quote glyph, optional
 * right-aligned attribution). Authors write:
 *
 *   <div class='callout'>
 *     <p>Body of the callout&hellip;</p>
 *     <cite>Attribution</cite>
 *   </div>
 *
 * <blockquote class='callout'> works too. Themed via the
 * --article-callout-* token hooks; skins override on the same selector.
 */
.djc-article-modal .djc-article__html .callout {
  position: relative;
  margin: 2em 0;
  padding: 60px 32px 60px 60px;
  background: var(--article-callout-bg, #f3f3f5);
  border-left: 4px solid var(--article-callout-rail, #bdbdbd);
  border-radius: 4px;
}

.djc-article-modal .djc-article__html .callout::before {
  content: '\201C';
  position: absolute;
  top: 4px;
  left: 14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 7vw, 72px);
  line-height: 1;
  color: var(--article-callout-quote, #c8c8cc);
  pointer-events: none;
}

.djc-article-modal .djc-article__html .callout>*+* {
  margin-top: 12px;
}

.djc-article-modal .djc-article__html .callout p {
  margin: 0;
  font-size: calc(var(--article-body-size) * 1.08) !important;
  line-height: 1.55 !important;
  font-style: italic;
  color: var(--article-callout-text, var(--article-heading));
}

.djc-article-modal .djc-article__html .callout cite {
  display: block;
  margin-top: 14px;
  font-size: 0.9em;
  font-style: normal;
  font-weight: 600;
  text-align: right;
  letter-spacing: 0.02em;
  color: var(--article-callout-cite, var(--article-byline));
}

.djc-article-modal .djc-article__html .callout cite::before {
  content: '\2014\00A0';
}

.djc-article-modal .djc-article__html ul,
.djc-article-modal .djc-article__html ol {
  padding-left: 1.4em;
}

.djc-article-modal .djc-article__html li+li {
  margin-top: 0.4em;
}

/* Tighter spacing between the hero image and the heading below it */
.djc-article-modal .djc-article__image+.djc-article__heading,
.djc-article-modal .djc-article__media+.djc-article__heading {
  margin-top: -8px;
}

/* Bottom breathing room so the final text block doesn't hug the modal edge */
.djc-article-modal .djc-article__inner> :last-child {
  margin-bottom: 40px;
}

@media (max-width: 640px) {
  .djc-article-modal {
    padding: 0;
  }

  .djc-article-modal__overlay-panel {
    border-radius: 0;
    max-height: 100%;
  }

  .djc-article-modal__body {
    padding: 0;
  }

  .djc-article-modal .djc-article__header-slot,
  .djc-article-modal .djc-article__heading,
  .djc-article-modal .djc-article__share,
  .djc-article-modal .djc-article__html,
  .djc-article-modal .djc-article__related-slot,
  .djc-article-modal .djc-article__footer-slot {
    padding-left: 20px;
    padding-right: 20px;
  }

  .djc-article-modal .djc-article__image {
    aspect-ratio: 16 / 9;
  }

  .djc-article-modal .djc-article__html .callout {
    padding: 44px 20px 44px 44px;
  }

  .djc-article-modal .djc-article__html .callout::before {
    top: 2px;
    left: 10px;
  }
}