/* architecture.css */

.skip-link{
    position:absolute; left:-999px; top:12px;
    padding:10px 14px; border-radius:999px;
    background:#fff; border:1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-subtle);
    color: var(--color-text-main); text-decoration:none;
    z-index:9999;
  }
  .skip-link:focus{ left:12px; }
  
  .nav-list a.is-current{ color: var(--color-text-main); }
  .nav-list a.is-current::after{ transform: scaleX(1); }
  
  /* HERO */
  .arch-hero{ padding-top: 50px; }
  .arch-hero-card{ padding: clamp(1.6rem, 3vw, 2.4rem); }
  
  .arch-hero__grid{
    display:grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(1rem, 2.4vw, 1.6rem);
    align-items:start;
  }
  
  .arch-hero__eyebrow{
    margin: 0.85rem 0 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  
  .arch-hero__title{
    margin: 0 0 0.6rem;
    font-size: clamp(2rem, 2.2rem + 0.5vw, 2.75rem);
    letter-spacing: -0.03em;
  }
  
  .arch-hero__lead{
    margin: 0 0 1rem;
    color: var(--color-text-soft);
    font-size: var(--text-lg);
    line-height: 1.75;
    max-width: 78ch;
  }
  
  .arch-hero__ctas{
    display:flex; flex-wrap:wrap;
    gap: .65rem;
    margin-top: .85rem;
  }
  
  .arch-hero__note{
    margin: 1rem 0 0;
    color: var(--color-text-muted);
    line-height: 1.75;
  }
  
  /* TOC */
  .arch-toc{
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-subtle);
    position: sticky;
    top: calc(var(--stack-top) - 10px);
    max-height: calc(100vh - var(--stack-top) - 28px);
    overflow: auto;
  }
  
  .arch-toc__title{ margin: 0 0 .6rem; font-size: var(--text-lg); }
  
  .arch-toc__nav{
    display:grid;
    gap: 8px;
    margin-top: .5rem;
  }
  
  .arch-toc__nav a{
    text-decoration:none;
    color: var(--color-text-soft);
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.65);
    box-shadow: var(--shadow-subtle);
    transition: transform .15s ease, border-color .15s ease, color .15s ease;
  }
  .arch-toc__nav a:hover{
    transform: translateY(-1px);
    color: var(--color-text-main);
    border-color: rgba(94,203,255,.35);
  }
  .arch-toc__nav a.is-active{
    color: var(--color-text-main);
    border-color: rgba(162,117,255,.30);
    background: linear-gradient(135deg, rgba(94,203,255,.16), rgba(162,117,255,.12));
  }
  
  .arch-toc__chips{
    margin-top: .9rem;
    display:flex; flex-wrap:wrap; gap: 8px;
  }
  
  /* Section heads */
  .arch-head{ margin-bottom: 1rem; }
  .arch-h2{
    margin: .55rem 0 .5rem;
    letter-spacing: -0.02em;
  }
  .arch-lead{
    margin: 0;
    max-width: 92ch;
    color: var(--color-text-soft);
    line-height: 1.75;
  }
  .arch-muted{
    color: var(--color-text-muted);
    line-height: 1.75;
    margin: 0;
  }
  .arch-h3{ margin: 0.75rem 0 0.35rem; }
  
  /* Ensure content covers band as you scroll */
  .section{ position: relative; z-index: 1; }
  
  /* Diagram */
  .arch-diagram{ padding: clamp(1.25rem, 2.4vw, 1.75rem); }
  .arch-diagram__grid{
    display:grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 14px;
    align-items: start;
  }
  .arch-diagram__svg{
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.75);
    padding: 14px;
    box-shadow: var(--shadow-subtle);
  }
  .arch-diagram__copy p{ margin: 0 0 0.85rem; line-height: 1.75; }
  
  /* AWS footprint (badge wall) */
  .arch-aws{ margin-top: 1.2rem; }
  
  .aws-footprint{
    margin-top: .85rem;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
  }
  
  .aws-group{
    grid-column: span 6;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-subtle);
    background: rgba(255,255,255,.75);
    box-shadow: var(--shadow-subtle);
    padding: 12px 12px;
  }
  .aws-group h4{
    margin: 0 0 .6rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  
  .aws-badges{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
  }
  
  .aws-badge{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fdfefe;
    box-shadow: var(--shadow-subtle);
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    line-height: 1;
  }
  
  .aws-badge img{
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: saturate(0) brightness(1.2);
    opacity: .95;
  }
  
  /* Cards / grids */
  .arch-grid{
    margin-top: 1.1rem;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  
  .arch-card{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    border-radius: var(--radius-lg);
    background: #fdfefe;
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-subtle);
    padding: 14px;
  }
  .arch-card h3{ margin: 0 0 .25rem 0; font-size: var(--text-base); }
  .arch-card p{ margin: 0; color: var(--color-text-soft); line-height: 1.75; font-size: var(--text-sm); }
  
  .arch-icon{
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display:grid;
    place-items:center;
    background: radial-gradient(circle at 30% 30%, rgba(94,203,255,.18), rgba(255,255,255,.10));
    border: 1px solid rgba(15,23,42,.10);
    flex: 0 0 auto;
    color: var(--color-text-main);
    font-weight: 800;
    font-size: 22px;
  }
  .arch-icon--lg{ width: 60px; height: 60px; font-size: 24px; }
  
  /* Baseline blocks */
  .baseline-grid{
    margin-top: 1.1rem;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .baseline-grid--two{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .baseline-card{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    border-radius: var(--radius-xl);
    background: #fdfefe;
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-subtle);
    padding: 14px;
  }
  
  .baseline-card h3{ margin: 0 0 .25rem 0; font-size: var(--text-base); }
  
  .arch-list{
    margin: .45rem 0 0;
    padding-left: 1.15rem;
    color: var(--color-text-soft);
    line-height: 1.75;
    font-size: var(--text-sm);
  }
  .arch-list li{ margin: .45rem 0; }
  
  /* Two-up panels */
  .arch-two{
    margin-top: 1.1rem;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .arch-two h3{ margin: 0 0 .35rem 0; }
  .arch-two p{ margin: 0; }
  
  /* =========================
   1) High-level flow: single line on desktop + label under icon
   Grey by default, full color on hover
   ========================= */

.arch-flow{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .arch-flow__node{
    /* stack icon + label */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  
    /* consistent spacing so it looks like a “rail” */
    min-width: 132px;
    text-align: center;
  
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.78);
    box-shadow: var(--shadow-subtle);
  }
  
  .arch-flow__node img{
    width: 34px;
    height: 34px;
    object-fit: contain;
  
    /* grey default */
    filter: grayscale(1) saturate(0) brightness(1.15);
    opacity: .95;
  
    transition: filter .15s ease, transform .15s ease, opacity .15s ease;
  }
  
  .arch-flow__node span{
    font-size: 12px;
    color: rgba(15,23,42,.72);
    line-height: 1.15;
  }
  
  /* Hover: icon becomes full color */
  .arch-flow__node:hover img{
    filter: none;
    opacity: 1;
    transform: scale(1.06);
  }
  
  /* Arrows stay subtle */
  .arch-flow__arrow{
    color: rgba(15,23,42,.28);
    font-weight: 700;
    padding: 0 2px;
    user-select: none;
  }
  
  
  /* =========================
     2) AWS footprint (section below): full color by default
     ========================= */
  
  .aws-badge img{
    width: 32px;
    height: 32px;
    object-fit: contain;
  
    /* FULL COLOR DEFAULT */
    filter: none;
    opacity: 1;
  
    transition: transform .15s ease;
  }
  
  .aws-badge:hover img{
    transform: scale(1.06);
  }

  /* Stack diagram + copy (copy under diagram) */
.arch-diagram__stack{
    display: grid;
    gap: 14px;
  }
  
  /* Make diagram area horizontally scrollable so JS can animate it */
.arch-diagram__svg{
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .arch-diagram__svg::-webkit-scrollbar{ display:none; }
  
  /* Keep flow in one line and let it be wider than the viewport */
  .arch-flow{
    flex-wrap: nowrap;
    width: max-content;
  }
  .arch-flow{ will-change: transform; }
  
  /* ===== Curtain-reveal band (image stays fixed; section reveals it) ===== */
.reveal-band{
  position: relative;
  height: clamp(260px, 44vw, 460px);
  margin-top: -24px;      /* tuck under hero */
  z-index: 0;
}

/* Fixed “poster” aligned to your container width */
.reveal-band__media{
  position: fixed;
  left: 50%;
  top: calc(var(--stack-top) + 12px);
  width: min(1120px, calc(100% - 2.75rem));
  height: clamp(260px, 44vw, 460px);

  transform: translateX(-50%) scale(0.985);
  border-radius: var(--radius-xl);
  /* border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-subtle); */
  border: none;
box-shadow: none;
  overflow: hidden;
  pointer-events: none;

  /* background:
    radial-gradient(circle at 15% 20%, rgba(94,203,255,.22), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(162,117,255,.18), transparent 48%),
    var(--band-image) center / cover no-repeat; */
    background-image: var(--band-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* ✅ fits entire image */
      

  opacity: 0;
  clip-path: inset(100% 0 0 0 round var(--radius-xl)); /* starts hidden */
  transition: opacity 200ms ease, transform 260ms ease;
}

/* show only while band is in play */
.reveal-band.is-active .reveal-band__media{
  opacity: 1;
}

  /* Desktop: keep it ONE LINE */
  @media (min-width: 961px){
    .arch-flow{
      flex-wrap: nowrap;
      overflow-x: auto;          /* if it doesn't fit, scroll horizontally */
      padding-bottom: 6px;
      -ms-overflow-style: none;  /* IE/Edge legacy */
      scrollbar-width: none;     /* Firefox */
    }
    .arch-flow::-webkit-scrollbar{ display:none; }
  }
  
  /* Mobile/tablet: allow wrapping (better readability) */
  @media (max-width: 960px){
    .arch-flow{ flex-wrap: wrap; }
  }
  /* Make the flow rail scroll horizontally (so JS can animate it) */
  @media (min-width: 961px){
    .arch-flow{
      scroll-behavior: smooth;
    }
  }
  
  /* Responsive */
  @media (max-width: 1100px){
    .arch-hero__grid{ grid-template-columns: 1fr; }
    .arch-toc{ position: relative; top: auto; max-height: none; }
    .arch-diagram__grid{ grid-template-columns: 1fr; }
    .arch-grid{ grid-template-columns: 1fr; }
    .baseline-grid{ grid-template-columns: 1fr; }
    .arch-two{ grid-template-columns: 1fr; }
    .aws-group{ grid-column: span 12; }
  }
  
  @media (max-width: 560px){
    .aws-badge{ width: 100%; justify-content: flex-start; }
  }