/* =========================
   STANDARD SPECIFICATIONS — responsive (same pattern as before)
   File: cruising_navigator/7_standard_specifications/standard_specifications.css
========================= */

.standard_specifications{
  --cs-ink:#0f2140;
  --cs-muted:#5f6b7a;

  --ss-line: rgba(15,33,64,.55);
  --ss-border: rgba(15,33,64,.12);
  --ss-shadow: 0 18px 45px rgba(15,33,64,.10);

  /* Pattern: fluid spacing + safe gutters */
  --ss-container: 72rem;               /* ~1152px */
  --ss-gutter: clamp(1rem, 4vw, 3rem);
  --ss-py: clamp(2.75rem, 6vw, 5rem);

  position: relative;
  padding-block: var(--ss-py);
  padding-inline: var(--ss-gutter);
  background: #fafafa;
}

.ss-wrap{
  width: min(100%, var(--ss-container));
  margin-inline: auto;
}

/* Header */
.ss-header{
  text-align: center;
  margin-bottom: clamp(1.8rem, 4.5vw, 4.4rem);
}

.ss-title{
  margin: 0;

  font-size: clamp(3rem, 4.5vw, 6rem);
  font-weight: 600;
  line-height: 1.12;

  color: var(--cs-ink);
  max-width: 26ch;
  padding-inline: clamp(0rem, 1.2vw, .5rem);

  margin-inline: auto;
}

.ss-subtitle{
  margin: clamp(.8rem, 2vw, 1rem) auto 0;
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  color: #0b0b0b;
  max-width: 78ch;
  padding-inline: clamp(0rem, 1.2vw, .5rem);
}

/* Main grid */
.ss-grid{
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: clamp(1.25rem, 4vw, 4.4rem);
  align-items: start;
}

/* Image */
.ss-figure{
  margin: 0;
}

.ss-image{
  width: 100%;

  /* Avoid fixed heights; keep consistent visual weight */
  aspect-ratio: 1 / 1;

  border: 1px solid var(--ss-border);
  border-radius: 18px;
  box-shadow: var(--ss-shadow);
  overflow: hidden;
}

.ss-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* List */
.ss-list{
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: clamp(.25rem, 1vw, .65rem);
}

.ss-row{
  display: grid;
  grid-template-columns: clamp(44px, 6vw, 56px) 1fr;
  gap: clamp(.8rem, 2.2vw, 22px);
  align-items: center;
  padding-block: clamp(.85rem, 1.8vw, 1.15rem);
}

.ss-num{
  font-size: clamp(1.8rem, 2vw, 1.25rem);
  font-weight: 700;
  color: #0b0b0b;
}

.ss-main{
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-start;
}

.ss-row-title{
  margin: 0;
  font-size: clamp(1.3rem, 1.6vw, 1.05rem);
  font-weight: 300;
  color: #0b0b0b;
  line-height: 1.15;
}

/* Optional pill (kept if you use it elsewhere) */
.ss-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-size: .85rem;
  font-weight: 700;
  color: #0b0b0b;
  background: #efefef;
  border: 1px solid rgba(0,0,0,.06);
}

/* =========================
   Responsive
========================= */

/* Small phones */
@media (max-width: 360px){
  .standard_specifications{
    padding-inline: 1rem;
  }
  .ss-title{
    max-width: 20ch;
  }
}

/* Stack to 1 column */
@media (max-width: 1100px){
  .ss-grid{
    grid-template-columns: 1fr;
  }

  .ss-figure{
    width: min(700px, 100%);
    margin-inline: auto;
  }

  .ss-image{
    aspect-ratio: 16 / 10;
  }

  .ss-list{
    width: min(760px, 100%);
    margin-inline: auto;
  }
}

@media (max-width: 560px){
  .ss-row{
    grid-template-columns: clamp(40px, 10vw, 46px) 1fr;
    gap: 14px;
  }

  .ss-main{
    flex-wrap: wrap;
    gap: 10px 14px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .standard_specifications *{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================
   Reveal only (IntersectionObserver + stagger)
   SOLO: data-sr-reveal, .sr-item, .is-revealed, delays
========================= */
.standard_specifications[data-sr-reveal] .sr-item{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms ease, transform 650ms ease;
  transition-delay: var(--sr-delay, 0ms);
  will-change: opacity, transform;
}

.standard_specifications.is-revealed .sr-item{
  opacity: 1;
  transform: none;
}