/* SCALE2GRID TRANSPORT & DEPOTLADNING
   PAGE-SPECIFIC / LOCKED
   Shared site.css must not be edited for Transport changes. */

.transport-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.transport-stats div{padding:26px 4%;border-right:1px solid var(--line)}
.transport-stats div:last-child{border-right:0}
.transport-stats strong{font-size:34px;color:var(--green);display:block}
.transport-stats span{font-weight:800}

.calc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:start}
.calcbox{background:#0e3329;color:#fff;border-radius:14px;padding:28px}
.calcbox label{display:block;font-weight:900;margin-bottom:24px}
.calcbox label b{float:right;color:var(--lime)}
.calcbox input{width:100%;display:block;margin-top:12px}
#calcResult{background:#123e32;border-left:5px solid var(--lime);padding:18px;line-height:1.55;border-radius:4px}
.amp-table{width:100%;border-collapse:collapse;background:#fff}
.amp-table th,.amp-table td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left}
.amp-table th{background:#edf4f0;color:var(--green)}

.energy-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px}
.energy-flow button{
  border:1px solid #315348;background:#103027;color:#fff;border-radius:12px;
  padding:22px 16px;min-height:140px;cursor:pointer;font:inherit
}
.energy-flow button:hover,.energy-flow button.active{border-color:var(--orange);transform:translateY(-3px)}
.energy-flow b{display:block;color:var(--lime);font-size:19px;margin:8px 0}
.energy-flow small{display:block;color:#d5e0db}
#flowText{margin-top:20px;padding:18px 20px;background:#12372d;border-left:5px solid var(--orange);font-size:18px;line-height:1.5}

.econ-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.econ-cards article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.econ-cards strong{font-size:28px;color:var(--green);display:block;margin-bottom:8px}

/* IMPORTANT: all 12 source images are 1535 x 1024 = approx. 3:2.
   Never crop them to 16:9. */
.transport-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.transport-gallery figure{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden
}
.transport-gallery .zoom-image{
  display:block;width:100%;padding:0;border:0;background:#0d201a;cursor:zoom-in
}
.transport-gallery img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:contain;
  display:block;
  background:#fff;
}
.transport-gallery figcaption{padding:15px 18px;font-weight:900;color:var(--green)}

/* The 10 process cards use the same exact 3:2 image presentation. */
.transport-process{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px
}
.transport-process article{
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0
}
.transport-process .process-zoom{
  display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in
}
.transport-process img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:contain;
  display:block;
  background:#fff;
}
.transport-process article>div{padding:16px}
.transport-process em{color:var(--orange);font-style:normal;font-weight:900;font-size:20px}
.transport-process h3{margin:7px 0 0;font-size:18px;color:var(--green)}

/* Standalone infographic images inside content:
   show the full image, never crop it. */
.transport-inline-image{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  cursor:zoom-in;
}
.transport-inline-image img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:contain;
  display:block;
  background:#fff;
}

/* Fullscreen viewer */
.zoom-image{cursor:zoom-in}
.image-modal{
  display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.96);
  align-items:center;justify-content:center;padding:30px 70px 55px
}
.image-modal.open{display:flex}
.image-modal>img{
  max-width:96vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain
}
#closeModal{
  position:absolute;right:24px;top:12px;border:0;background:transparent;color:#fff;
  font-size:54px;line-height:1;cursor:pointer;z-index:2
}
.modal-nav{
  position:absolute;top:45%;border:0;background:rgba(255,255,255,.12);color:#fff;
  font-size:58px;width:58px;height:80px;border-radius:8px;cursor:pointer
}
.modal-nav.prev{left:12px}.modal-nav.next{right:12px}
#modalCaption{
  position:absolute;bottom:16px;left:70px;right:70px;text-align:center;
  color:#fff;font-weight:900;font-size:17px
}

@media(max-width:1050px){
  .transport-stats{grid-template-columns:repeat(2,1fr)}
  .calc-grid{grid-template-columns:1fr}
  .energy-flow{grid-template-columns:1fr}
  .transport-process{grid-template-columns:repeat(2,1fr)}
  .transport-gallery{grid-template-columns:1fr}
  .econ-cards{grid-template-columns:1fr}
}
@media(max-width:650px){
  .transport-stats{grid-template-columns:1fr}
  .transport-process{grid-template-columns:1fr}
  .image-modal{padding:55px 8px}
  .modal-nav{width:44px;height:65px;font-size:42px}
  .modal-nav.prev{left:3px}.modal-nav.next{right:3px}
  #modalCaption{left:48px;right:48px}
}