/* =========================================================
   RESPONSIVE OVERRIDES  (append at the END of desktop.css)
   No HTML changes required.
========================================================= */

img { max-width: 100%; }
html, body { overflow-x: hidden; }

/* ---------------- Tablet & below (<= 1024px) ---------------- */
@media (max-width: 1024px) {
  .page-wrap {
    margin: 24px auto;
    padding: 0 16px;
  }

  .train-card { padding: 14px 18px; }
  .train-name { font-size: 17px; }
  .train-number { font-size: 15px; }
  .card-time-big { font-size: 18px; }

  .table-header { padding: 12px 14px; }
  .col { font-size: 11px; }

  .route-link { flex: 0 0 calc(33.333% - 11px); }

  .quicklinks-row { justify-content: center; column-gap: 12px; }
  .quicklink-item { width: 130px; }

  .wk-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wk-table-header,
  .wk-row { min-width: 860px; }
}

/* ---------------- Mobile (<= 768px) ---------------- */
@media (max-width: 768px) {
  .page-wrap {
    margin: 16px auto;
    gap: 18px;
    padding: 0 12px;
  }

  /* Breadcrumb */
  .breadcrumb { flex-wrap: wrap; font-size: 13px; row-gap: 2px; }

  /* Description */
  .desc-panel { padding: 16px; }
  .desc-text { font-size: 13.5px; line-height: 1.7; }

  /* Sort header row is meaningless when cards stack -> hide */
  .table-header { display: none; }

  /* Train cards -> grid layout (no HTML change: display:contents on wrappers) */
  .train-card {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 14px;
    align-items: center;
    padding: 16px;
  }
  .card-train,
  .card-avail { display: contents; }

  /* Row 1: name (left) + running days (right) */
  .train-name { grid-row: 1; grid-column: 1 / span 8; font-size: 17px; }
  .train-number {
    display: inline;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-left: 4px;
  }
  .card-runs-on-label { display: none; }
  .card-days-row {
    grid-row: 1;
    grid-column: 9 / span 4;
    justify-self: end;
    margin: 0;
    gap: 5px;
    font-size: 12px;
  }

  /* Row 2: departure | duration | arrival */
  .card-dep, .card-dur, .card-arr { grid-row: 2; min-width: 0; }
  .card-dep { grid-column: 1 / span 4; text-align: left; }
  .card-dur { grid-column: 5 / span 4; align-self: start; padding-top: 4px; text-align: center; }
  .card-arr { grid-column: 9 / span 4; text-align: right; }

  .card-time-big { font-size: 20px; font-weight: 700; line-height: 1.2; }
  .card-place-label { margin-top: 4px; font-size: 12px; }
  .stnme { font-size: 14px; font-weight: 400; }
  .strc  { font-size: 12px; margin-top: 2px; }

  .card-duration-time { font-size: 14px; font-weight: 400; }
  .card-duration-line { width: 100%; max-width: 100%; margin: 8px auto; }
  .card-stops-label { font-size: 13px; font-weight: 600; color: #1a2233; }

  /* Row 3: dashed divider */
  .train-card::before {
    content: "";
    grid-row: 3;
    grid-column: 1 / -1;
    border-top: 1px dashed #dfe5ec;
  }

  /* Row 4: running status (left) + Select Date (right) */
  .card-train > .flx {
    grid-row: 4;
    grid-column: 1 / span 7;
    margin-top: 0;
    align-items: center;
  }
  .running-status { font-size: 14px; }

    .btn {
        grid-row: 4;
        grid-column: 8 / span 5;
        justify-self: end;
        width: 69%;
        max-width: 134px;
        padding: 7px 5px;
        font-size: 13px;
        white-space: nowrap;
        background-color: #ef6614;
        color: #fff;
    }

  /* Trains from / passing through Pune */
  .tp-panel { padding: 14px 12px; }
  .tp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 12px 14px;
    align-items: start;
  }
  .tp-col-code { order: 1; }
  .tp-col-dist { order: 2; text-align: right; }
  .tp-col-name { order: 3; grid-column: 1 / -1; }
  .tp-col-from { order: 4; }
  .tp-col-to   { order: 5; text-align: right; }

  /* Weekly / daily timetables: horizontal scroll */
  .wk-heading { font-size: 18px; }
  .wk-description { font-size: 14px; margin-bottom: 16px; }
  .wk-table-header { padding: 12px 16px; font-size: 14px; }
  .wk-row { padding: 12px 16px; }

  /* Quick links */
  .quicklinks-subtitle { font-size: 14px; margin-bottom: 18px; }
  .quicklinks-row { justify-content: space-around; row-gap: 18px; column-gap: 0; }
  .quicklink-item { width: 25%; min-width: 80px; }
  .quicklink-label { font-size: 13px; }

  /* Info panel */
  .info-panel { padding: 18px 16px; gap: 18px; }
  .info-section-title { font-size: 15px; }
  .info-section-text { font-size: 14px; line-height: 1.7; }

  /* Route panels */
  .route-panel { padding: 14px 16px; }
  .route-panel-title { font-size: 16px; margin-bottom: 14px; }
  .route-link {
    flex: 0 0 calc(50% - 8px);
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  /* FAQ */
  .faq-panel { padding: 18px 16px; }
  .faq-panel-title { font-size: 18px; }
  .faq-item h4 { font-size: 14.5px; line-height: 1.5; padding-right: 26px; }
  .faq-item-body { font-size: 13.5px; line-height: 1.6; }
}

/* ---------------- Small phones (<= 480px) ---------------- */
@media (max-width: 480px) {
  .train-name { font-size: 16px; }
  .running-status { font-size: 13px; }

  .quicklink-item { width: 33.333%; }

  .route-link { flex: 0 0 100%; }

  .wk-table-header,
  .wk-row { min-width: 800px; }
}