/*
 * Responsive grid column classes for Astro-rendered dynamic components.
 * The Webflow CSS uses #w-node-* IDs for responsive grid control — these
 * class-based equivalents make the same breakpoints work on dynamic lists.
 */

/* Desktop defaults */
.gc-3  { grid-column: span 3  / span 3;  }
.gc-4  { grid-column: span 4  / span 4; align-self: start; }
.gc-6  { grid-column: span 6  / span 6;  }
.gc-8  { grid-column: span 8  / span 8;  }
.gc-12 { grid-column: span 12 / span 12; }

/* Tablet — 991px */
@media screen and (max-width: 991px) {
  /* cards stay 3-wide on tablet (4 across) */
}

/* Mobile landscape — 767px */
@media screen and (max-width: 767px) {
  .gc-3  { grid-column: span 6  / span 6; }   /* 2 across */
  .gc-4  { grid-column: span 12 / span 12; }  /* sidebar goes full width */
  .gc-6  { grid-column: span 12 / span 12; }  /* homepage cards go full width */
  .gc-8  { grid-column: span 12 / span 12; }  /* main content goes full width */
}

/* Mobile portrait — 479px */
@media screen and (max-width: 479px) {
  .gc-3  { grid-column: span 12 / span 12; }  /* 1 across */
}

/* ─── Compact typography for case study & blog detail pages ─── */

/* Author photo: 8.3rem → 4rem */
.aauthor-img {
  width: 4rem;
}

/* Author block bottom gap: 3rem → 1.5rem */
.blog-author-wrap {
  margin-bottom: 1.5rem;
}

/* Author name: 1.94rem → 1.125rem */
.author-name {
  font-size: 1.125rem;
  line-height: 1.4;
}

/* Author position: 1.25rem → 0.9375rem */
.text-md {
  font-size: 0.9375rem;
}

/* Shared base override for both author text blocks */
.author-description {
  font-size: 1.375rem;
  line-height: 1.4;
  margin-bottom: 2.5rem;
}

/* Client testimonial — italic, left border, curly quotes */
.author-quote {
  font-style: italic;
  padding-left: 1.25rem;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}
.author-quote::before { content: '\201C'; margin-right: 0.15em; }
.author-quote::after  { content: '\201D'; margin-left:  0.1em;  }

/* RAY assistant bio — plain, smaller, muted */
.author-bio {
  font-size: 1rem;
  opacity: 0.6;
  margin-bottom: 2rem;
}

/* Richtext headings: 1.94rem → 1.25rem */
.cs-rich-text h2 {
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
}

.cs-rich-text h3 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

/* Richtext body: 1.25rem → 1rem, spacing: 5rem → 2rem */
.cs-rich-text p,
.cs-rich-text ul,
.cs-rich-text ol {
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* List items: 1rem gap → 0.4rem */
.cs-rich-text li {
  margin-bottom: 0.4rem;
}

/* Areas of support sidebar: tighten paragraph spacing */
.areas-of-support-rich-text p {
  margin-bottom: 0.875rem;
}

/* ─── LinkedIn-style blog post card ─── */
.li-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 19.375rem;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}
.li-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.13); }

.li-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem 0.5rem;
}
.li-card-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.li-card-meta { flex: 1; min-width: 0; }
.li-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #000;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.li-card-role {
  font-size: 0.75rem;
  color: #666;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.li-card-time {
  font-size: 0.75rem;
  color: #888;
  margin: 0.15rem 0 0;
}

.li-card-body {
  padding: 0 1rem 0.625rem;
  font-size: 0.875rem;
  color: #000;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.li-card-img {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  object-fit: cover;
  display: block;
}

.li-card-stats {
  padding: 0.5rem 1rem 0.375rem;
  font-size: 0.75rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.li-card-reactions { flex: 1; }
.li-card-counts { white-space: nowrap; }

.li-card-actions {
  border-top: 1px solid #e8e8e8;
  display: flex;
  padding: 0.25rem 0;
}
.li-card-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #666;
  padding: 0.5rem 0;
}

/* ─── LinkedIn posts section on blog page ─── */
.section-linkedin-posts {
  padding: 3rem 0 2.5rem;
  background: #f3f2f0;
  margin-top: -2rem;
}

.linkedin-posts-inner {
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 2rem 1.5rem;
  overflow: hidden;
}

.section-linkedin-posts .h2 {
  margin-bottom: 1.25rem;
}

.linkedin-posts-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  gap: 1.25rem;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  user-select: none;
}
.linkedin-posts-grid::-webkit-scrollbar { display: none; }

.linkedin-embed-wrap {
  /* iframe is 504×670 — scale to 70%: 353×469 */
  flex-shrink: 0;
  width: 353px;
  height: 469px;
  overflow: hidden;
  border-radius: 0.75rem;
  scroll-snap-align: start;
}

/* ─── Success Stories hero: smoother gradient (overview + detail) ─── */
.section-case-studies-hero {
  background-image: linear-gradient(180deg,
    #516ba9 0%,
    #6b86c2 18%,
    #8db1de 38%,
    #aacef3 55%,
    #cfe1f3 72%,
    #e8eef4 86%,
    #ffffff 100%
  );
}

/* Pull preview cards closer to the hero on /success-stories and /blogs */
.section-case-studies-blog {
  padding-top: 2rem;
}

/* Match the same start position on case-study detail pages */
.section-cs-blog {
  padding-top: 2rem;
}

/* Bigger Client / RAY headshots and names on case study detail pages */
body.cs-detail-page .aauthor-img {
  width: 11rem;
}
body.cs-detail-page .author-name {
  font-size: 2.5rem;
  line-height: 1.2;
}

/* ─── Case study detail: mobile optimizations ─── */
@media screen and (max-width: 767px) {
  /* Shrink hero so case-study body peeks above the fold */
  .section-case-studies-hero {
    padding-top: 6rem;
    padding-bottom: 3.5rem;
  }
  .case-studies-hero-wrap .h1 {
    font-size: 2rem;
    line-height: 1.25;
  }

  /* Stack client/RAY block vertically, centered */
  body.cs-detail-page .blog-author-wrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }
  body.cs-detail-page .blog-author-wrap > .col {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  body.cs-detail-page .blog-author-wrap .author-name,
  body.cs-detail-page .blog-author-wrap .text-md {
    width: 100%;
    text-align: center;
  }
  body.cs-detail-page .aauthor-img {
    width: 8.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  body.cs-detail-page .author-name {
    font-size: 1.625rem;
  }
}

@media screen and (max-width: 479px) {
  .section-case-studies-hero {
    padding-top: 5.5rem;
    padding-bottom: 3rem;
  }
  body.cs-detail-page .aauthor-img {
    width: 7.5rem;
  }
  body.cs-detail-page .author-name {
    font-size: 1.5rem;
  }
}

/* ─── Customer company link in case-study client block ─── */
.customer-company-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,0.25);
  transition: text-decoration-color 0.15s, color 0.15s;
}
.customer-company-link:hover {
  color: #2a6394;
  text-decoration-color: #2a6394;
}

/* ─── Scrubber below LinkedIn carousel ─── */
.li-scrubber-track {
  position: relative;
  width: 100%;
  max-width: 12rem;
  height: 3px;
  background: linear-gradient(to right, #6f8ec7 0%, #aacef3 60%, #d4e9ff 100%);
  border-radius: 9999px;
  margin: 1.25rem auto 0;
}

.li-scrubber-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  background: #ffffff;
  border-radius: 50%;
  cursor: grab;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 0 0 1px rgba(42,99,148,0.35), 0 1px 3px rgba(0,0,0,0.15);
}
.li-scrubber-handle:hover  { transform: translateY(-50%) scale(1.2); }
.li-scrubber-handle:active { cursor: grabbing; transform: translateY(-50%) scale(1.1); }

.linkedin-embed-wrap iframe {
  transform: scale(0.7);
  transform-origin: top left;
  display: block;
}

/* ─── Mobile: native swipe carousel for LinkedIn posts ─── */
@media screen and (max-width: 767px) {
  .section-linkedin-posts {
    padding: 2rem 0 2rem;
  }
  .linkedin-posts-inner {
    padding: 0 0 1rem;
    overflow: visible;
  }
  .section-linkedin-posts .h2 {
    padding: 0 1.25rem;
  }
  .linkedin-posts-grid {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 1.25rem 0.5rem;
    gap: 1rem;
    user-select: auto;
    cursor: grab;
  }
  .linkedin-embed-wrap {
    scroll-snap-align: center;
  }
  .li-scrubber-track {
    display: none;
  }
}

/* ─── LinkedIn badge on blog tiles ─── */
.li-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 2;
  background: #0a66c2;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  letter-spacing: 0.01em;
}

/* ─── Blog card: photo fills the tile (unlike logo-style case study images) ─── */
.cs-image.cs-image-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Blog card title: prevent overflow with long headlines on mobile ─── */
.cs-card .text-lg {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
@media screen and (max-width: 767px) {
  .cs-card .text-lg {
    font-size: 1.125rem;
    line-height: 1.3;
  }
}
@media screen and (max-width: 479px) {
  .cs-card .text-lg {
    font-size: 1.25rem;
  }
}

/* ─── Blog detail: cover image hero ─── */
.blog-cover-hero {
  position: relative;
  width: 100%;
  height: 28rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.blog-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);
}

.blog-cover-title-wrap {
  position: relative;
  z-index: 1;
  padding: 2.5rem 4rem;
  width: 100%;
  max-width: 860px;
}

/* Title scales fluidly with viewport; length class adjusts the upper bound */
.blog-cover-title {
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  font-size: clamp(2.25rem, 7vw, 4rem);
}
.blog-cover-title.title-medium { font-size: clamp(2rem,    6.2vw, 3.5rem); }
.blog-cover-title.title-long   { font-size: clamp(1.75rem, 5.6vw, 3rem);   }
.blog-cover-title.title-xlong  { font-size: clamp(1.625rem, 5vw,  2.625rem); }

@media screen and (max-width: 767px) {
  /* min-height instead of fixed height — hero grows if title is long */
  .blog-cover-hero {
    height: auto;
    min-height: 20rem;
  }
  .blog-cover-title-wrap {
    padding: 6rem 1.5rem 1.75rem;
  }
}

/* ─── Blog meta row: date + LinkedIn stats ─── */
.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.blog-li-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  opacity: 0.6;
  margin-bottom: 0;
}

/* ─── Pricing section: smoother top/bottom fades ─── */
.overlay-top {
  background-image: linear-gradient(
    to top,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,0.02) 15%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.2)  45%,
    rgba(255,255,255,0.45) 62%,
    rgba(255,255,255,0.75) 78%,
    rgba(255,255,255,1)   100%
  );
  height: 18%;
}

.overlay-bottom {
  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,0.02) 15%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.2)  45%,
    rgba(255,255,255,0.45) 62%,
    rgba(255,255,255,0.75) 78%,
    rgba(255,255,255,1)   100%
  );
  height: 18%;
}

/* ─── Homepage case study card quote truncation ─── */
.cs-card-quote-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.cs-card-quote {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.cs-card-more {
  display: block;
  font-size: 0.8125rem;
  opacity: 0.5;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

/* ─── Author byline on blog detail page ─── */
.author-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.author-byline-photo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}

.author-byline-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.author-byline-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
.author-byline-name:hover { text-decoration: underline; }

.author-byline-meta {
  font-size: 0.8rem;
  opacity: 0.55;
}

/* ─── Author profile page ─── */
.author-hero {
  background: #1a1a2e;
  color: #fff;
  padding: 5rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.author-hero-photo {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid rgba(255,255,255,0.15);
}

.author-hero-name {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.author-hero-role {
  font-size: 1rem;
  opacity: 0.6;
  margin: 0;
}

.author-hero-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.author-social-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  transition: color 0.15s, border-color 0.15s;
}
.author-social-link:hover { color: #fff; border-color: rgba(255,255,255,0.6); }

.author-bio-section {
  max-width: 680px;
  margin: 3rem auto;
  padding: 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  opacity: 0.75;
}

.author-posts-section {
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

.author-posts-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 2rem;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tighten the gap above "The secret weapon behind top founders & investors" */
.section-how-executive-use-ray {
  padding-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .section-how-executive-use-ray {
    padding-top: 2.5rem;
  }
}

/* CMS-managed customer logos — default sizing when width_rem/height_rem not set.
   Per-logo inline styles (from src/content/logos/*.md) override these. */
.logo-marquee .partner-logo {
  height: 3rem;
  width: auto;
  object-fit: contain;
  object-position: center;
}

/* Bootcamp tab cards: bump mobile card height so Week 1's image grid fits.
   Defaults are 40rem at ≤767 and 34.2rem at ≤479, both clip the 2x2 + "+more" tile. */
@media screen and (max-width: 767px) {
  .section-bootcamp .tab-content-card { height: 46rem; }
}
@media screen and (max-width: 479px) {
  .section-bootcamp .tab-content-card { height: 40rem; }
}