/* Thushal Verghese Thalakot — Case Study Shared Styles
   Consolidates the head/body <style> blocks previously duplicated across
   amplifai.html, accenture.html, bcbstx.html, capitalfactory.html.
   Load AFTER assets/vendor/perryw-2023.webflow.*.css */

/* ---------- base ---------- */
.wf-force-outline-none[tabindex="-1"]:focus { outline: none; }

body::-webkit-scrollbar { display: none; }

/* Webflow initial-state opacity (pre-interaction) */
@media (min-width: 992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="5c1ba285-fdfd-f1cb-eb1d-b141548fe6b8"] { opacity: 0; }
}

/* ---------- fixed chrome pointer-events ---------- */
.section-nav { pointer-events: none; }
.nav-pill { pointer-events: auto; }
.chip-socials { pointer-events: auto; }
.section-back { pointer-events: none; }
.button-project-back { pointer-events: auto; }
.sidebar-structure { pointer-events: none; }
.sidebar-content { pointer-events: auto; }
.section-nav-desktop { pointer-events: none; }
.logo-block { pointer-events: auto; }
.chip-socials-wrapper { pointer-events: auto; }
.project-loading-overlay { pointer-events: none; }
.next-project-fade { pointer-events: none; }

/* ---------- nav pill (Work toggle removed) ---------- */
.nav-pill { width: auto !important; }
.nav-indicator-pill,
.nav-indicator-glow { display: none !important; }

/* ---------- sidebar chapters ---------- */
.chapter { opacity: 0.4; transition: opacity 0.3s ease; }
.chapter.w--current { opacity: 1; }

/* ---------- banner ---------- */
.image-project-banner,
.image-default.highlight-outline,
.image-default { height: auto !important; object-fit: contain !important; }

.project-banner-image-wrapper { text-align: center; }
.image-project-banner { margin: 0 auto; display: block; }

/* Neutral banner glow (replaces inherited BCBS blue; layout padding untouched) */
.section-banner.bcbs { background-image: radial-gradient(circle farthest-side at 50% 0px, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0)) !important; }

/* ---------- section overline ---------- */
@keyframes dot-pulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.1); }
  50% { opacity: 1; box-shadow: 0 0 20px 4px rgba(255, 255, 255, 0.6); }
}

.overline-wrapper .icon-section-dot { animation: dot-pulse 3s ease-in-out infinite; }

.overline-wrapper .text-projectpage-overline { color: rgba(242, 242, 242, 0.85) !important; }

/* ---------- retrospective ---------- */
#retrospective .double-column-block { grid-template-columns: 1fr !important; }
#retrospective .icon-points-wrapper { display: flex; flex-direction: column; gap: 16px; width: 100%; }
#retrospective .inline-card { text-align: left; }
#retrospective .inline-point-text { text-align: left; }

/* ---------- content images (framed beats + captions) ---------- */
.double-column-block:has(.email-inline) { align-items: start !important; }
.email-inline { display: flex; flex-direction: column; gap: 12px; }
.email-inline img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 10px !important; }
.email-beat { align-items: center; }
.email-beat .email-beat-head { grid-column: 1 / -1; margin-bottom: 18px; }
.email-inline + .caption-wrapper { margin-top: 8px; }

/* ---------- next-project cards (match homepage design system) ----------
   Design tokens (from style.css):
     --color-card-bg: rgb(20, 20, 24)  |  --color-text: #f2f2f2
     --color-text-muted: rgba(242, 242, 242, 0.5)
     --radius-xl: 20px  |  --radius-md: 12px */
.section-next-project .container-next-project {
    max-width: 1100px !important;
    width: 90% !important;
    margin: 0 auto !important;
}
.section-next-project .project-card-outline {
    position: relative !important;
    border-radius: 20px !important;
    padding: 1px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%) !important;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s cubic-bezier(0.16,1,0.3,1) !important;
    margin-bottom: 0 !important;
}
.section-next-project .project-card-outline:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}
.section-next-project .project-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: rgb(20, 20, 24) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 22px 24px !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    flex: 0 0 auto !important;
    text-decoration: none !important;
    color: inherit !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.section-next-project .projectcard-top {
    margin-bottom: 16px !important;
    position: relative !important;
    z-index: 2 !important;
}
.section-next-project .projectcard-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}
.section-next-project .text-projectcard-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #f2f2f2 !important;
    line-height: 1.3 !important;
}
.section-next-project .text-projectcard-description {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(242, 242, 242, 0.5) !important;
    line-height: 1.5 !important;
}
.section-next-project .text-projectcard-description-company {
    font-weight: 600 !important;
    color: #f2f2f2 !important;
}
/* Every tile is a fixed 16:9 box; the image absolutely fills it (object-fit:
   cover), so tiles stay identical regardless of each image's intrinsic size
   or the viewport width. */
.section-next-project .project-thumbnail-wrapper {
    position: relative !important;
    z-index: 1 !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px;
    overflow: hidden;
    margin-top: auto !important; /* pin image to card bottom */
}
.section-next-project .project-thumbnail {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    align-self: auto !important;
    border-radius: 12px !important;
    display: block !important;
    z-index: 1 !important;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.section-next-project .project-card:hover .project-thumbnail {
    transform: scale(1.02) !important;
}
.section-next-project .project-arrow-badge {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: rgba(200, 30, 40, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
.section-next-project .project-arrow-badge svg {
    width: 20px !important;
    height: 20px !important;
}
.section-next-project .project-card:hover .project-arrow-badge {
    background: rgba(200, 30, 40, 1) !important;
    transform: translateX(4px) !important;
}
.section-next-project .project-card-colour { display: none !important; }
.section-next-project .glare-item-top { display: none !important; }

/* next-project section layout */
.section-footer { padding-top: 52px !important; }
/* Symmetric breathing room: divider→heading gap equals grid→footer gap */
.section-next-project { display: block !important; min-height: 0 !important; height: auto !important; padding: 96px 0 !important; }
.next-project-fade { display: none !important; }
.section-next-project .container-next-project { display: block !important; min-height: 0 !important; height: auto !important; max-width: none !important; width: calc(100% - 96px) !important; margin: 0 auto !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 992px)  { .section-next-project .container-next-project { width: 882px !important; } }
@media (min-width: 1440px) { .section-next-project .container-next-project { width: 1044px !important; } }
@media (min-width: 1920px) { .section-next-project .container-next-project { width: 1440px !important; } }
@media (max-width: 991px)  { .section-next-project { padding: 72px 0 !important; } }
/* Equal-height tiles: every card stretches to the tallest card in the row,
   and the thumbnail pins to the card bottom so extra space is absorbed
   between text and image — if one grows, they all grow together. */
.section-next-project .project-card-outline { align-self: stretch !important; height: auto !important; flex: 0 0 auto !important; }
.other-projects-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; height: auto; max-width: none; width: auto; margin: 0; }
.section-next-project .text-projectpage-heading.next-project { max-width: none; margin: 0 0 22px !important; }
@media (max-width: 768px) {
    .section-next-project .project-card { padding: 24px 20px !important; }
    .section-next-project .text-projectcard-title { font-size: 22px !important; }
    .section-next-project .project-arrow-badge { width: 30px !important; height: 30px !important; min-width: 30px !important; }
    .section-next-project .project-arrow-badge svg { width: 14px !important; height: 14px !important; }
}
@media (max-width: 767px) {
    .section-next-project { padding: 48px 0 !important; }
    .section-next-project .container-next-project { width: auto !important; margin-left: 16px !important; margin-right: 16px !important; }
    .other-projects-grid { grid-template-columns: 1fr; }
}

/* ---------- print (A4) ---------- */
@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }

  /* Print the real (dark) theme instead of a blank white page */
  html, body, .body { background: #101010 !important; color: #f2f2f2 !important; }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Webflow scroll animations leave elements at opacity:0 / translated.
     Force every element to its final, visible state for print. */
  * { opacity: 1 !important; transform: none !important; filter: none !important;
      animation: none !important; transition: none !important; }

  /* Hide fixed chrome + decorative overlays that ruin a printout */
  .section-nav, .section-back, .sidebar-structure, .sidebar-content,
  .sidebar-chapters-wrapper, .sidebar-structure-sides, .nav-indicator-glow,
  .glare-item-top, .project-card-colour, .project-overview-noise,
  .project-fade, .next-project-fade { display: none !important; }

  /* Sidebar is gone -> let content use the full page width, never overflow */
  body, .body { display: block !important; padding: 0 !important; margin: 0 !important; }
  .section-overview, .section-highlights, .section-general, .section-divider,
  .section-next-project, .section-footer, .section-starting-block, .section-banner,
  [class*="container-"] {
    max-width: 100% !important; width: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }

  /* Images fit the page; banner capped to one screenful */
  img { max-width: 100% !important; height: auto !important; }
  .image-project-banner { max-height: 150mm !important; width: auto !important; margin: 0 auto !important; display: block !important; }

  /* Pagination: keep cohesive blocks intact, headings with their text */
  .project-card-outline, .project-card, figure, img, .moneyshots-content,
  .highlights-text-content, .associated-content-block, .content-leading,
  .content-trailing { break-inside: avoid !important; }
  h1, h2, h3, .text-projectpage-heading, .text-projectpage-overline,
  .text-hero { break-after: avoid !important; }

  /* Trim oversized section padding so pages aren't mostly whitespace */
  .section-general, .section-overview, .section-highlights,
  .section-next-project, .section-divider { padding-top: 8mm !important; padding-bottom: 8mm !important; }

  /* "Other projects" grid must fit the A4 printable width */
  .other-projects-grid { max-width: 100% !important; width: 100% !important;
    grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .section-next-project .text-projectpage-heading.next-project { max-width: 100% !important; }

  /* Compact footer so it fits on one page */
  .section-footer { padding-top: 22px !important; padding-bottom: 0 !important; break-inside: avoid !important; }
  .container-footer { grid-row-gap: 26px !important; row-gap: 26px !important; }
}

/* ---------- semantic headings (converted from divs) ----------
   Neutralize UA/webflow element defaults; the template text-* classes
   define family/size/weight/line-height, so rendering is unchanged. */
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- WCAG contrast lifts for low-alpha muted text ---------- */
.section-next-project .text-projectcard-description { color: rgba(242, 242, 242, 0.7) !important; }
.text-image-caption { color: rgba(242, 242, 242, 0.7) !important; }
.text-figure-caption { color: rgba(242, 242, 242, 0.6) !important; }
.text-medium-type { opacity: 0.7 !important; }
.text-projectpage-year { opacity: 0.65 !important; }

/* ---------- hover label on Other-projects tiles (mirrors homepage cards) ---------- */
.section-next-project .project-thumbnail-wrapper::after {
  content: attr(data-hover);
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 14, 0.55);
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 0.2px;
  border-radius: 12px;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.section-next-project .project-card:hover .project-thumbnail-wrapper::after { opacity: 1; }
@media (hover: none) { .section-next-project .project-thumbnail-wrapper::after { display: none; } }