/* ===========================================================================
   Post typography & layout system  (scope: .post)
   Fluid, responsive-by-default reading experience for case studies.
   The author chooses block *meaning*; this file owns how it looks on every
   device. Theme-aware (light/dark). No fixed breakpoints — uses clamp().
   =========================================================================== */

/* Project title — fluid, scales smoothly 36px -> ~68px (no breakpoint jump). */
.post-title {
  font-family: "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2.25rem, 1.55rem + 3.3vw, 4.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.post {
  /* Fluid type scale (min .. max scale smoothly with viewport width) */
  --fs-body:  clamp(1.0625rem, 1.0rem + 0.35vw, 1.25rem);   /* 17 -> 20 */
  --fs-small: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);      /* 14 -> 16 */
  --fs-h4:    clamp(1.2rem,  1.1rem + 0.5vw,  1.5rem);      /* 19 -> 24 */
  --fs-h3:    clamp(1.5rem,  1.3rem + 1.0vw,  2rem);        /* 24 -> 32 */
  --fs-h2:    clamp(1.9rem,  1.55rem + 1.7vw, 2.75rem);     /* 30 -> 44 */
  --fs-quote: clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem);

  --measure: 42rem;         /* narrow, centered reading column */
  --lh-body: 1.75;
  --space:   clamp(1.1rem, 0.9rem + 1vw, 1.6rem);

  font-family: "acumin-pro", "Acumin Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--fs-body) * var(--text-scale, 1));
  line-height: var(--lh-body);
  /* Centered "work showcase" column (à la Behance): contained with generous
     side margins on desktop; on mobile it simply fills the available width. */
  max-width: var(--canvas, 87.5rem);   /* 1400px default — Styles panel: narrow/standard/full */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  /* Body text inherits the themed page color (slate-600 / dark:slate-300). */
}

/* Text sits in a narrow centered measure; media spans the wider showcase column. */
.post > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.post > figure,
.post > .post-gallery,
.post > .post-embed { max-width: 100%; }

/* ---- Paragraphs ---- */
.post p {
  margin: 0 0 1.4em;
  text-wrap: pretty;
}
.post > :first-child { margin-top: 0; }
.post a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.dark .post a { color: #60a5fa; }
.post mark { background: rgba(0, 114, 255, .18); color: inherit; padding: 0 .15em; border-radius: .2em; }
.post code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgba(127,127,127,.15); padding: .1em .35em; border-radius: .3em; }

/* ---- Headings: real hierarchy + rhythm (more space above than below) ---- */
.post h2, .post h3, .post h4 {
  color: #0f172a;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.dark .post h2, .dark .post h3, .dark .post h4 { color: #ffffff; }
.post h2 { font-size: var(--fs-h2); margin: 1.6em 0 .5em; }
.post h3 { font-size: var(--fs-h3); margin: 1.5em 0 .45em; font-weight: 700; }
.post h4 { font-size: var(--fs-h4); margin: 1.4em 0 .4em; font-weight: 700; }

/* ---- Lists ---- */
.post ul, .post ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.post ul { list-style: disc; }
.post ol { list-style: decimal; }
.post li { margin: 0 0 .5em; padding-left: .25em; }
.post li::marker { color: #0072ff; }

/* ---- Blockquote ---- */
.post blockquote {
  font-size: var(--fs-quote);
  line-height: 1.4;
  font-weight: 500;
  border-inline-start: 3px solid #0072ff;
  padding-inline-start: 1.1em;
  margin: 1.8em auto;
  color: #0f172a;
}
.dark .post blockquote { color: #f1f5f9; }
.post blockquote cite { display: block; font-size: var(--fs-small); font-weight: 600; opacity: .7; margin-top: .6em; font-style: normal; }

/* ---- Figures / images: layout variants ---- */
.post figure { margin: var(--space) auto; }
.post figure img {
  width: 100%; height: auto; display: block;
  border-radius: 1rem;
  box-shadow: 0 10px 30px -10px rgba(2, 6, 23, .25);
}
.dark .post figure img { box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.06); }
.post figcaption {
  font-size: var(--fs-small); color: #64748b; text-align: center;
  margin-top: .7em; line-height: 1.5;
}
.dark .post figcaption { color: #94a3b8; }
.post figure img.lightbox-trigger { cursor: zoom-in; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.post figure img.lightbox-trigger:hover { transform: translateY(-4px); }

/* Layout variants stay CONTAINED within the showcase column (no edge-to-edge):
   default media fills the column; "wide" matches it; "full" also stays in-column
   so the centered structure is preserved on every screen. */
.post figure[data-layout="wide"],
.post figure[data-layout="full"] { max-width: 100%; }

/* ---- Photo grid / gallery: honors the chosen column count, collapses on mobile ---- */
.post .post-gallery {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--ps-gap, 12px);
  margin: var(--space) auto;
  --ps-bg-default: #eef2f7;
}
.dark .post .post-gallery { --ps-bg-default: #1b2336; }
.post .post-gallery figure { margin: 0; border-radius: var(--ps-radius, 12px); overflow: hidden; }
.post .post-gallery img { width: 100%; display: block; aspect-ratio: var(--ps-aspect, 4 / 3); object-fit: cover; border-radius: var(--ps-radius, 12px); }
/* Contain = show the WHOLE image (no crop), centered on a letterbox background */
.post .post-gallery.ps-fit-contain img { object-fit: contain; background: var(--ps-bg, var(--ps-bg-default)); }
.post .post-gallery.ps-fit-cover img { object-fit: cover; }
/* Auto = keep each image's natural proportions (no fixed ratio, no crop) */
.post .post-gallery.ps-aspect-auto img { aspect-ratio: auto; height: auto; }
@media (max-width: 760px) { .post .post-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .post .post-gallery { grid-template-columns: 1fr; } }

/* ===================== Advanced image slider ===================== */
.post .post-slider-wrap { position: relative; margin: var(--space) auto; --ps-bg-default: #eef2f7; }
.dark .post .post-slider-wrap { --ps-bg-default: #1b2336; }
/* width variants */
.post .post-slider-wrap.ps-w-text { max-width: var(--measure); }
.post .post-slider-wrap.ps-w-wide { max-width: 56rem; }
.post .post-slider-wrap.ps-w-full { max-width: 100%; }

/* track (slide transition) */
.post .ps-track {
  display: flex;
  gap: var(--ps-gap, 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.post .ps-track::-webkit-scrollbar { display: none; }
.post .ps-slide {
  margin: 0;
  flex: 0 0 var(--ps-slidew, 100%);
  scroll-snap-align: center;
  background: var(--ps-bg, var(--ps-bg-default));
  border-radius: var(--ps-radius, 12px);
  overflow: hidden;
}
.post .ps-slide img {
  width: 100%;
  display: block;
  aspect-ratio: var(--ps-aspect, 4/3);
  max-height: 75vh;
  border-radius: var(--ps-radius, 12px);
}
.post .ps-fit-contain .ps-slide img { object-fit: contain; }
.post .ps-fit-cover .ps-slide img { object-fit: cover; }
.post .ps-aspect-auto .ps-slide img { aspect-ratio: auto; width: auto; max-width: 100%; max-height: 75vh; margin: 0 auto; }
.post .ps-shadow .ps-slide { box-shadow: 0 12px 32px -10px rgba(0,0,0,.28); }
.post .ps-cap { text-align: center; font-size: .9em; color: #64748b; padding: .5em; }
.dark .post .ps-cap { color: #94a3b8; }

/* arrows */
.post .ps-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 2.6rem; height: 2.6rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: #0f172a; border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: pointer; font-size: 1.5rem; line-height: 1;
  transition: background .2s ease, opacity .2s ease;
}
.post .ps-arrow:hover { background: #fff; }
.dark .post .ps-arrow { background: rgba(21,28,44,.92); color: #fff; border-color: rgba(255,255,255,.15); }
.dark .post .ps-arrow:hover { background: #2a3650; }
.post .ps-prev { inset-inline-start: .5rem; }
.post .ps-next { inset-inline-end: .5rem; }
.post .ps-arrows-outside .ps-prev { inset-inline-start: -1.25rem; }
.post .ps-arrows-outside .ps-next { inset-inline-end: -1.25rem; }
.post .ps-arrows-hover .ps-arrow { opacity: 0; }
.post .ps-arrows-hover:hover .ps-arrow { opacity: 1; }

/* dots */
.post .ps-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.post .ps-dot { width: .55rem; height: .55rem; border-radius: 9999px; border: none; padding: 0; cursor: pointer; background: rgba(15,23,42,.22); transition: background .2s, transform .2s; }
.dark .post .ps-dot { background: rgba(255,255,255,.28); }
.post .ps-dot.is-active { background: #0072ff; transform: scale(1.3); }

/* counter */
.post .ps-counter { text-align: center; font-size: .8rem; color: #64748b; margin-top: .5rem; }
.dark .post .ps-counter { color: #94a3b8; }

/* thumbnails */
.post .ps-thumbs { display: flex; gap: .4rem; overflow-x: auto; margin-top: .7rem; scrollbar-width: none; justify-content: center; }
.post .ps-thumbs::-webkit-scrollbar { display: none; }
.post .ps-thumb { flex: 0 0 auto; width: 4rem; height: 3rem; border-radius: .4rem; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; opacity: .65; transition: opacity .2s, border-color .2s; }
.post .ps-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post .ps-thumb.is-active { border-color: #0072ff; opacity: 1; }
.post .ps-thumb:hover { opacity: 1; }

/* autoplay progress + play/pause */
.post .ps-progress { height: 3px; background: rgba(15,23,42,.1); border-radius: 2px; margin-top: .6rem; overflow: hidden; }
.dark .post .ps-progress { background: rgba(255,255,255,.12); }
.post .ps-progress > span { display: block; height: 100%; width: 0; background: #0072ff; }
.post .ps-playpause { position: absolute; bottom: .6rem; inset-inline-end: .6rem; z-index: 6; width: 2.1rem; height: 2.1rem; border-radius: 9999px; border: 1px solid rgba(15,23,42,.12); cursor: pointer; background: rgba(255,255,255,.92); color: #0f172a; display: flex; align-items: center; justify-content: center; }
.dark .post .ps-playpause { background: rgba(21,28,44,.92); color: #fff; border-color: rgba(255,255,255,.15); }
.post .ps-playpause::before { content: '\23F8'; font-size: .85rem; }
.post .ps-playpause[data-state="paused"]::before { content: '\25B6'; }

/* fade transition */
.post .ps-trans-fade .ps-track { display: block; position: relative; overflow: hidden; aspect-ratio: var(--ps-aspect, 4/3); border-radius: var(--ps-radius, 12px); }
.post .ps-trans-fade.ps-aspect-auto .ps-track { aspect-ratio: 16/9; }
.post .ps-trans-fade .ps-slide { position: absolute; inset: 0; flex: none; opacity: 0; transition: opacity var(--ps-speed, 400ms) ease; }
.post .ps-trans-fade .ps-slide.is-active { opacity: 1; z-index: 1; }
.post .ps-trans-fade .ps-slide img { height: 100%; aspect-ratio: auto; max-height: none; }

/* mobile: collapse multi-per-view to a single peeking slide */
@media (max-width: 640px) {
  .post .post-slider-wrap:not(.ps-trans-fade) .ps-slide { flex-basis: 88%; }
  .post .ps-arrows-outside .ps-prev { inset-inline-start: .3rem; }
  .post .ps-arrows-outside .ps-next { inset-inline-end: .3rem; }
}

/* ---- Video embeds (responsive 16:9) ---- */
.post .post-embed {
  position: relative; width: 100%; max-width: min(100%, 56rem);
  aspect-ratio: 16 / 9; margin: var(--space) auto;
  border-radius: 1rem; overflow: hidden; background: #0b0f19;
}
.post .post-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Custom HTML / CSS block (admin-authored, sanitized) ---- */
.post > .post-raw { max-width: 100%; }
.post .post-raw { margin: var(--space) auto; max-width: var(--measure); }
.post .post-raw img, .post .post-raw iframe, .post .post-raw video { max-width: 100%; }
.post .post-raw :where(table) { width: 100%; border-collapse: collapse; }

/* ---- Delimiter / spacer ---- */
.post .post-delimiter { border: 0; text-align: center; margin: 2.2em auto; }
.post .post-delimiter::before { content: "* * *"; letter-spacing: .6em; color: #94a3b8; }

/* ---- RTL (Arabic) ---- */
[dir="rtl"] .post { text-align: right; }
[dir="rtl"] .post ul, [dir="rtl"] .post ol { padding-left: 0; padding-right: 1.4em; }

/* Re-center the text column inside the showcase width. The per-element rules
   above use `margin: x 0 y` (zeroing the inline margins), which left-pins text
   in the wide 1400px column; restore auto inline margins so it stays centered. */
.post > p,
.post > h2, .post > h3, .post > h4,
.post > ul, .post > ol,
.post > blockquote { margin-inline: auto; }

/* ---- Results / KPI row (metrics block) ---- */
.post > .post-metrics { max-width: min(100%, 60rem); }
.post .post-metrics {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 1rem;
  margin: var(--space) auto;
}
.post .post-metric {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
  padding: 1.4rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(0, 114, 255, .05);
}
.dark .post .post-metric { background: rgba(0, 114, 255, .1); border-color: rgba(255, 255, 255, .1); }
.post .post-metric-value {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: #0072ff;
}
.dark .post .post-metric-value { color: #5ea3ff; }
.post .post-metric-label { font-size: var(--fs-small); line-height: 1.35; opacity: .85; }
@media (max-width: 640px) { .post .post-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Spacer block ---- */
.post .post-spacer { margin: 0 auto; }

/* ---- Button / call-to-action block ---- */
.post .post-cta { margin: var(--space) auto; }
.post a.post-btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-small); text-decoration: none; transition: background .15s, color .15s;
}
.post a.post-btn-solid { background: #0072ff; color: #fff; }
.post a.post-btn-solid:hover { background: #005fd6; }
.post a.post-btn-outline { border: 2px solid #0072ff; color: #0072ff; }
.post a.post-btn-outline:hover { background: rgba(0, 114, 255, .08); }
.dark .post a.post-btn-outline { color: #7fb5ff; border-color: #5ea3ff; }