/* ==========================================================================
   STRAYCY BLOG / READING LAYOUT
   Full-width container, but the text holds a comfortable measure.
   Images and wide blocks break out beyond the text column.
   ========================================================================== */

/* --- Reading progress bar (top) --- */
.stry-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: transparent; z-index: 9999;
  pointer-events: none;
}
/* Sit below the WordPress admin bar when it's showing */
.admin-bar .stry-progress { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .stry-progress { top: 46px; }
}
.stry-progress-fill {
  display: block; height: 100%; width: 0;
  background: var(--stry-orange);
  transition: width .08s linear;
}

/* --- Single post wrapper --- */
.stry-article {
  background: var(--stry-white);
  padding: 0 24px 80px;
}
.stry-article .stry-measure {
  max-width: var(--stry-measure);
  margin-left: auto; margin-right: auto;
}

/* --- Post header --- */
.stry-post-head {
  max-width: var(--stry-measure);
  margin: 0 auto;
  padding: 56px 0 32px;
  text-align: left;
}
.stry-post-cat {
  font-family: var(--stry-font-mono);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--stry-orange); text-decoration: none;
}
.stry-post-title {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12; margin: 14px 0 18px;
  color: var(--stry-ink);
}
.stry-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 14px; color: var(--stry-stone);
}
.stry-post-meta .stry-dot { color: var(--stry-border); }
.stry-post-author {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; color: var(--stry-body);
}
.stry-post-author img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
}

/* --- Featured image: breaks out wider than text --- */
.stry-post-hero {
  max-width: var(--stry-wide);
  margin: 8px auto 44px;
}
.stry-post-hero img {
  width: 100%; height: auto; display: block;
  border-radius: var(--stry-radius);
  box-shadow: 0 12px 32px rgba(11,14,19,0.10);
}

/* --- Post body: the readable measure --- */
.stry-post-body {
  max-width: var(--stry-measure);
  margin: 0 auto;
  font-size: 18px; line-height: 1.75; color: var(--stry-body);
}
.stry-post-body > * { margin-bottom: 1.4em; }
.stry-post-body h2 {
  font-size: 28px; margin-top: 1.8em; margin-bottom: .5em; color: var(--stry-ink);
}
.stry-post-body h3 {
  font-size: 22px; margin-top: 1.5em; margin-bottom: .4em; color: var(--stry-ink);
}
.stry-post-body a { color: var(--stry-orange); text-decoration: underline; text-underline-offset: 2px; }
.stry-post-body ul, .stry-post-body ol { padding-left: 1.3em; }
.stry-post-body li { margin-bottom: .5em; }
.stry-post-body blockquote {
  border-left: 3px solid var(--stry-orange);
  padding: 4px 0 4px 22px; margin-left: 0;
  font-size: 20px; color: var(--stry-ink); font-style: italic;
}
.stry-post-body code {
  background: var(--stry-mist); padding: 2px 6px; border-radius: 4px;
  font-size: 0.88em; color: var(--stry-navy);
}
.stry-post-body pre {
  background: var(--stry-ink); color: #E6E9EF;
  padding: 20px; border-radius: var(--stry-radius-sm);
  overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.stry-post-body pre code { background: none; color: inherit; padding: 0; }

/* --- Images inside the editor --- */
/* Breakout: make the figure 960px wide and center it by pulling it left of the
   720px text column. Setting an explicit width (not just negative margins) means
   the figure no longer inherits the 720px measure from .stry-post-body, which is
   what was constraining the image to text width. The translateX-free centering
   uses auto margins won't work with a wider-than-parent child, so we offset with
   a calculated left margin. */
.stry-post-body figure,
.stry-post-body .wp-block-image,
.stry-post-body .alignwide {
  width: var(--stry-wide);
  max-width: calc(100vw - 48px);
  margin-left: calc((var(--stry-measure) - var(--stry-wide)) / 2);
  margin-right: calc((var(--stry-measure) - var(--stry-wide)) / 2);
}
.stry-post-body figure img,
.stry-post-body .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--stry-radius);
  box-shadow: 0 8px 24px rgba(11,14,19,0.08);
}
/* WordPress adds sizes="auto" to lazy-loaded images, and the browser's UA
   stylesheet then applies `contain: size` with contain-intrinsic-size of
   ~300px, which collapses the image to 300px wide. Undo that containment
   GLOBALLY (the hero image lives outside .stry-post-body, so this must not be
   scoped to the post body). */
img[sizes="auto" i],
img[sizes^="auto," i] {
  contain: none !important;
  contain-intrinsic-size: none !important;
}
.stry-post-body figure figcaption,
.stry-post-body .wp-block-image figcaption {
  text-align: center; font-size: 13px; color: var(--stry-stone);
  margin-top: 10px; font-family: var(--stry-font-mono);
}
/* Center / no-breakout: keep at the text column width. */
.stry-post-body .aligncenter {
  margin-left: auto; margin-right: auto;
}
.stry-post-body .aligncenter img { margin-left: auto; margin-right: auto; }
/* Full alignment: true edge to edge. Using calc(-50vw + 50%) for the margins
   avoids the right-side gap that 100vw causes (100vw includes the scrollbar
   width, pushing content left and leaving a gap). */
.stry-post-body .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.stry-post-body .alignfull img { border-radius: 0; width: 100%; }

/* --- Sticky social share rail --- */
/* Positioned relative to the centered content column: the measure is 720px,
   so its left edge sits at calc(50% - 360px). Place the rail just left of it. */
.stry-share {
  position: fixed; top: 50%; transform: translateY(-50%);
  left: calc(50% - 360px - 132px);
  display: flex; flex-direction: column; gap: 10px; z-index: 50;
  align-items: center;
  opacity: 0; visibility: hidden; /* hidden until reading.js reveals it past the hero */
  transition: opacity .35s ease, visibility .35s ease;
}
/* reading.js adds this once the reader has scrolled past the hero and the rail
   isn't overlapping an image */
.stry-share.stry-share-visible {
  opacity: 1; visibility: visible;
}
.stry-share-label {
  writing-mode: vertical-rl; font-family: var(--stry-font-mono);
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--stry-stone); margin-bottom: 4px;
}
.stry-share-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--stry-white); border: 1px solid var(--stry-border);
  color: var(--stry-ink); font-family: var(--stry-font-mono);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.stry-share-btn:hover { transform: translateY(-2px); border-color: var(--stry-orange); color: var(--stry-orange); }
.stry-share-copy.copied { background: var(--stry-green); color: #fff; border-color: var(--stry-green); }

/* --- Back to top --- */
.stry-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--stry-ink); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; padding: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.stry-top.visible { opacity: 1; pointer-events: auto; }
.stry-top:hover { transform: translateY(-2px); }

/* --- End-of-post CTA --- */
.stry-cta { margin-top: 48px; }
.stry-cta-box, .stry-cta-widget {
  background: linear-gradient(135deg, var(--stry-ink), var(--stry-navy));
  border-radius: var(--stry-radius);
  padding: 36px 32px;
  text-align: center;
  color: #fff;
}
.stry-cta-heading {
  color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.stry-cta-text {
  color: #C4CAD3; font-size: 16px; line-height: 1.6; margin-bottom: 22px;
  max-width: 460px; margin-left: auto; margin-right: auto;
}
.stry-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--stry-orange); color: #fff;
  padding: 13px 28px; border-radius: var(--stry-radius-sm);
  font-weight: 600; font-size: 16px; text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.stry-cta-btn:hover { background: #d44e2f; transform: translateY(-1px); color: #fff; }

/* --- Post footer / author card / related --- */
.stry-post-foot {
  max-width: var(--stry-measure); margin: 56px auto 0;
}
.stry-author-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--stry-white); border: 1px solid var(--stry-border);
  border-radius: var(--stry-radius); padding: 22px;
}
.stry-author-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.stry-author-card .stry-author-name { font-weight: 700; color: var(--stry-ink); }
.stry-author-card .stry-author-bio { font-size: 14px; color: var(--stry-stone); margin-top: 4px; }

/* ==========================================================================
   ARCHIVE / BLOG LISTING
   ========================================================================== */
.stry-archive {
  max-width: 1140px; margin: 0 auto; padding: 56px 24px 80px;
}
.stry-archive-head { text-align: center; margin-bottom: 48px; }
.stry-archive-head h1 { font-size: clamp(32px, 5vw, 44px); }
.stry-archive-head p { color: var(--stry-stone); font-size: 17px; margin-top: 12px; }

.stry-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.stry-card {
  background: var(--stry-white); border: 1px solid var(--stry-border);
  border-radius: var(--stry-radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stry-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,14,19,.08); }
.stry-card-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--stry-mist); }
.stry-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stry-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.stry-card-cat {
  font-family: var(--stry-font-mono); font-size: 11px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--stry-orange); margin-bottom: 8px;
}
.stry-card-title { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.stry-card-title a { color: var(--stry-ink); text-decoration: none; }
.stry-card-title a:hover { color: var(--stry-orange); }
.stry-card-excerpt { font-size: 14px; color: var(--stry-stone); line-height: 1.6; flex: 1; }
.stry-card-meta {
  display: flex; gap: 10px; align-items: center; margin-top: 16px;
  font-size: 12px; color: var(--stry-stone); font-family: var(--stry-font-mono);
}

/* --- Featured (first) post on archive can span wider --- */
.stry-card.stry-featured { grid-column: 1 / -1; flex-direction: row; }
.stry-card.stry-featured .stry-card-thumb { flex: 1 1 55%; aspect-ratio: auto; }
.stry-card.stry-featured .stry-card-body { flex: 1 1 45%; justify-content: center; padding: 36px; }
.stry-card.stry-featured .stry-card-title { font-size: 28px; }
.stry-card.stry-featured .stry-card-excerpt { font-size: 16px; }

/* --- Pagination --- */
.stry-pagination {
  display: flex; justify-content: center; gap: 8px; margin-top: 48px;
}
.stry-pagination a, .stry-pagination span {
  padding: 9px 15px; border-radius: var(--stry-radius-sm);
  border: 1px solid var(--stry-border); background: var(--stry-white);
  color: var(--stry-ink); text-decoration: none; font-size: 14px; font-weight: 600;
}
.stry-pagination .current { background: var(--stry-ink); color: #fff; border-color: var(--stry-ink); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .stry-share { display: none; } /* hide vertical rail when it would crowd content; inline share used instead */
}
@media (max-width: 900px) {
  .stry-grid { grid-template-columns: repeat(2, 1fr); }
  .stry-card.stry-featured { flex-direction: column; }
  .stry-card.stry-featured .stry-card-thumb { aspect-ratio: 16/9; }
}
/* When the viewport is too narrow for the 960px breakout, collapse images back
   to full content width so they don't overflow. The max-width:calc(100vw-48px)
   on the base rule already prevents overflow, but this guarantees clean behavior
   and full-width fill on smaller screens. */
@media (max-width: 1008px) {
  .stry-post-body figure,
  .stry-post-body .wp-block-image,
  .stry-post-body .alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .stry-post-body { font-size: 17px; }
  .stry-post-body .alignfull {
    margin-left: -24px;
    margin-right: -24px;
  }
  .stry-post-hero { margin-left: -24px; margin-right: -24px; }
  .stry-post-hero img { border-radius: 0; }
}
@media (max-width: 600px) {
  .stry-grid { grid-template-columns: 1fr; }
}

/* --- Inline share for mobile (appears in post footer) --- */
.stry-share-inline {
  display: none; gap: 10px; margin: 32px 0; align-items: center;
}
.stry-share-inline .stry-share-label { writing-mode: horizontal-tb; margin: 0; }
@media (max-width: 1000px) {
  .stry-share-inline { display: flex; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .stry-progress-fill, .stry-top, .stry-card, .stry-share-btn { transition: none; }
}