/* ==========================================================================
   Nord Terminals Kotka Oy — Responsive Rules
   Breakpoints: 1180 / 900 / 640 / 400
   ========================================================================== */

/* ---------- large desktop tune-down ---------- */
@media (max-width:1180px){
  .footer__top{ grid-template-columns:1.3fr 1fr 1fr; row-gap:44px; }
  .footer__top .footer__col--newsletter{ grid-column:1 / -1; }
  .dash-grid{ grid-template-columns:repeat(2,1fr); }
  .tank-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- tablet ---------- */
@media (max-width:900px){
  :root{ --nav-h:72px; }

  .nav__links{ display:none; }
  .lang-select{ display:none; }
  .hamburger{ display:flex; }

  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split.reverse .split__media{ order:-1; }

  .hero__stats{ gap:0; }
  .hero__stat{ padding-right:24px; margin-right:24px; }

  .stats-strip .grid-4{ grid-template-columns:repeat(2,1fr); }
  .stat-block{ border-bottom:1px solid var(--line); }
  .stat-block:nth-child(2n){ border-right:0; }

  .footer__top{ grid-template-columns:1fr 1fr; }
  .dash-two{ grid-template-columns:1fr; }
  .tank-grid{ grid-template-columns:repeat(3,1fr); }
  .field-row{ grid-template-columns:1fr; }
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .section{ padding:72px 0; }
  .section--tight{ padding:52px 0; }

  h1{ font-size:clamp(34px,10vw,50px) !important; }
  .section-title{ font-size:clamp(26px,7vw,34px); }

  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }

  .hero{ min-height:100svh; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ justify-content:center; }
  .hero__stats{ flex-direction:column; gap:16px; }
  .hero__stat{ border-right:0; padding-right:0; margin-right:0; padding-bottom:16px; border-bottom:1px solid var(--line); }
  .hero__stat:last-child{ border-bottom:0; }

  .stats-strip .grid-4{ grid-template-columns:1fr; }
  .stat-block{ border-right:0 !important; }

  .footer__top{ grid-template-columns:1fr; gap:36px; padding-bottom:40px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:12px; }

  .dash-grid{ grid-template-columns:1fr; }
  .tank-grid{ grid-template-columns:repeat(2,1fr); }
  .weather-panel{ flex-direction:column; align-items:flex-start; gap:14px; }

  .data-table{ font-size:12.5px; }
  .data-table th,.data-table td{ padding:10px 8px; }

  .search-input-wrap input{ font-size:19px; }
  .cookie-banner{ left:14px; right:14px; bottom:14px; padding:18px; }

  .numbered-row{ flex-direction:column; gap:10px; }

  .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* ---------- small mobile ---------- */
@media (max-width:400px){
  .container{ padding-inline:16px; }
  .nav__inner{ padding-inline:16px; }
  .btn{ padding:13px 22px; font-size:13.5px; }
  .tank-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- RTL layout (Arabic) ---------- */
html[dir="rtl"] .eyebrow::before{ order:2; }
html[dir="rtl"] .btn-ghost::after{ content:'←'; }
html[dir="rtl"] .nav__links a::after{ left:auto; right:0; }
html[dir="rtl"] .breadcrumb span{ display:inline-block; transform:scaleX(-1); }
html[dir="rtl"] .card__link,html[dir="rtl"] .search-result__page{ direction:rtl; }
html[dir="rtl"] .hero__stat,html[dir="rtl"] .stat-block{ border-right:0; }
html[dir="rtl"] .hero__stat{ border-left:1px solid var(--line); padding-right:0; padding-left:40px; margin-right:0; margin-left:40px; }
html[dir="rtl"] .hero__stat:last-child{ border-left:0; }

/* ==========================================================================
   Dashboard responsiveness fix (terminal.html)
   Paste at the end of assets/css/responsive.css
   ========================================================================== */

/* Make table-bearing panels scroll horizontally instead of breaking layout */
.dash-panel--tall{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dash-panel--tall .data-table{ min-width:560px; }

/* Header row wraps cleanly instead of overlapping on narrow screens */
.dash-header{ row-gap:14px; }
.dash-header__meta{ row-gap:10px; }

@media (max-width:1180px){
  .dash-two{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .dash-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .tank-grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
  .dash-panel{ padding:20px; }
  .dash-panel--tall{ padding:22px; }
  .weather-panel{ flex-direction:row; flex-wrap:wrap; gap:20px; }
}

@media (max-width:640px){
  .dash-header{ flex-direction:column; align-items:flex-start; }
  .dash-header__meta{ width:100%; justify-content:space-between; }

  .dash-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .dash-panel__value{ font-size:26px; }

  .tank-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .tank-visual{ height:70px; width:28px; }

  .dash-panel--tall{ padding:18px; }
  .dash-panel--tall .data-table{ min-width:480px; font-size:12.5px; }

  .weather-panel{ flex-direction:column; align-items:flex-start; gap:12px; }
  .weather-panel__temp{ font-size:36px; }

  .live-refresh-note{ display:none; } /* declutter on small screens */
}

@media (max-width:420px){
  .dash-grid{ grid-template-columns:1fr; }
  .tank-grid{ grid-template-columns:repeat(2,1fr); }
}