/* ============================================================
   SHIP PAGE
   ============================================================ */

.ship-hero{
  margin-block:3rem;
  padding-inline:0;
}
.ship-hero img{
  width:100%;height:clamp(280px,55vw,600px);
  object-fit:cover;
  filter:contrast(1.02) saturate(.9);
}
.ship-hero figcaption{
  margin-top:1rem;
  font-size:.9rem;color:var(--color-text-muted);
  font-style:italic;
}

/* Specs grid */
.specs-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--color-border);
  border-left:1px solid var(--color-border);
}
@media (max-width:900px){.specs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.specs-grid{grid-template-columns:1fr}}
.spec-card{
  padding:2rem 1.5rem;
  border-right:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--color-surface);
  transition:background var(--transition-interactive);
}
.spec-card:hover{background:var(--color-surface-2)}
.spec-label{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-text-muted);
  font-weight:500;
}
.spec-value{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.8vw,2.25rem);
  font-weight:400;line-height:1;
  color:var(--color-text);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.spec-sub{
  font-size:.85rem;color:var(--color-text-muted);
  font-style:italic;
}

/* Timeline */
.timeline{
  list-style:none;
  max-width:38rem;
  margin-inline:auto;
  position:relative;
}
.timeline::before{
  content:"";position:absolute;
  left:11px;top:12px;bottom:12px;
  width:1px;background:var(--color-border);
}
.tl-item{
  position:relative;
  padding-left:3rem;
  padding-block:1.5rem;
}
.tl-marker{
  position:absolute;left:0;top:1.75rem;
  width:24px;height:24px;
  border-radius:50%;
  border:1px solid var(--color-border);
  background:var(--color-bg);
  z-index:1;
}
.tl-item.complete .tl-marker{
  background:var(--color-accent);
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--color-accent) 25%,transparent);
}
.tl-item.complete .tl-marker::after{
  content:"";position:absolute;inset:6px;
  border-radius:50%;background:var(--color-primary);
}
.tl-item.in-progress .tl-marker{
  background:var(--color-surface);
  border-color:var(--color-accent);
}
.tl-item.in-progress .tl-marker::after{
  content:"";position:absolute;inset:4px;
  border-radius:50%;background:var(--color-accent);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.tl-item.upcoming .tl-marker{background:var(--color-bg)}
.tl-date{
  font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:.5rem;
  display:flex;align-items:center;gap:.5rem;
}
.tl-tag{
  display:inline-block;
  padding:.15rem .5rem;
  font-size:.65rem;
  background:var(--color-surface-offset);
  color:var(--color-text-muted);
  border-radius:var(--radius-full);
  letter-spacing:.14em;
  font-weight:500;
}
.tl-item h3{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:400;
  margin-bottom:.5rem;
  line-height:1.2;
}
.tl-item p{font-size:.95rem;line-height:1.6}

/* ————— Interactive Blueprint ————— */
.blueprint-section { background: linear-gradient(180deg, var(--color-bg) 0%, rgba(11,30,46,0.6) 100%); }
.section-header .section-sub {
  color: var(--color-text-muted);
  max-width: 40rem;
  margin: 1rem auto 0;
  line-height: 1.6;
}

.blueprint {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 1024px) {
  .blueprint { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; }
}

.blueprint-figure {
  position: relative;
  background: linear-gradient(180deg, rgba(212,169,74,0.03), rgba(11,30,46,0.5));
  border: 1px solid rgba(212,169,74,0.18);
  border-radius: 4px;
  padding: 1.25rem;
  overflow: hidden;
}
.blueprint-figure::before {
  content: 'DDG-139 · TELESFORO TRINIDAD · SIDE PROFILE';
  position: absolute;
  top: 0.75rem; left: 1rem;
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(212,169,74,0.55);
  z-index: 2;
}
.blueprint-figure::after {
  content: 'SCALE 1 : 800 · REVENUE MARINE PATTERN 2029';
  position: absolute;
  bottom: 0.5rem; right: 1rem;
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(212,169,74,0.32);
  background: linear-gradient(to right, transparent, rgba(11,30,46,0.9) 20%);
  padding: 4px 0 4px 24px;
}
.blueprint-svg {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 1.25rem;
}

/* Hotspot styling */
.bp-hotspot { cursor: pointer; }
.bp-hotspot circle:first-child {
  fill: rgba(212,169,74,0.10);
  stroke: rgba(212,169,74,0.55);
  stroke-width: 1;
  transition: fill 250ms ease, stroke 250ms ease, r 250ms ease;
}
.bp-hotspot .bp-dot {
  fill: #D4A94A;
  transition: fill 250ms ease, r 250ms ease;
}
.bp-hotspot text {
  fill: rgba(237,229,206,0.6);
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: fill 250ms ease;
  pointer-events: none;
}
.bp-hotspot line {
  stroke: rgba(212,169,74,0.4);
  stroke-width: 0.75;
  pointer-events: none;
}
.bp-hotspot:hover circle:first-child,
.bp-hotspot:focus circle:first-child,
.bp-hotspot.active circle:first-child {
  fill: rgba(212,169,74,0.25);
  stroke: #E8C878;
}
.bp-hotspot.active .bp-dot,
.bp-hotspot:hover .bp-dot {
  fill: #F5DA9A;
}
.bp-hotspot.active text,
.bp-hotspot:hover text {
  fill: #F5DA9A;
}
.bp-hotspot:focus { outline: none; }

/* Pulsing ring on active hotspot */
.bp-hotspot.active circle:first-child {
  animation: bpPulse 2s ease-in-out infinite;
}
@keyframes bpPulse {
  0%,100% { r: 12; stroke-opacity: 0.9; }
  50%     { r: 15; stroke-opacity: 0.4; }
}
.bp-hotspot[data-bp-hotspot="fireroom"].active circle:first-child {
  animation: bpPulse2 2s ease-in-out infinite;
}
@keyframes bpPulse2 {
  0%,100% { r: 14; stroke-opacity: 0.9; }
  50%     { r: 18; stroke-opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-hotspot.active circle:first-child,
  .bp-hotspot[data-bp-hotspot="fireroom"].active circle:first-child { animation: none; }
}

/* Cards */
.blueprint-cards {
  position: relative;
  min-height: 320px;
}
.bp-card {
  position: absolute;
  inset: 0;
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, rgba(212,169,74,0.06), rgba(11,30,46,0.35));
  border: 1px solid rgba(212,169,74,0.20);
  border-left: 3px solid #D4A94A;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
}
.bp-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bp-card-tag {
  display: inline-block;
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #E8C878;
  margin-bottom: 1rem;
}
.bp-card h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 1rem;
}
.bp-card p {
  color: var(--color-text);
  opacity: 0.85;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.bp-tie {
  padding-top: 1rem;
  border-top: 1px solid rgba(212,169,74,0.15);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.bp-tie span {
  display: block;
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D4A94A;
  margin-bottom: 0.35rem;
}

@media (max-width: 1023px) {
  .blueprint-cards { min-height: 360px; }
  .bp-card { position: absolute; }
}

/* ————— VIDEO SECTION ————— */
.video-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  margin-top:2.5rem;
}
@media (max-width:800px){.video-grid{grid-template-columns:1fr}}
.video-card{margin:0}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.video-frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
.video-card figcaption{
  margin-top:.75rem;
  font-size:.9rem;
  line-height:1.55;
  color:var(--color-text);
}
.video-card figcaption strong{display:block;font-weight:600}
.video-card figcaption span{color:var(--color-text-muted);font-size:.82rem}
.video-card figcaption a{color:var(--color-accent);text-decoration:underline}