/* CoolMPAT public marketing pages - shared responsive rules.
   Page-specific styles remain in each page's own CSS file.
   Do not install this in the parent website root; put it inside /CoolMPAT/. */

.cmpat-home-icon { width: 36px; height: 36px; display: block; color: #0078D2; flex: none; }

@media (max-width: 900px) {
  /* Scale the very long logo before it can overflow a narrow tablet. */
  .cmpat-header-row > a:first-child { flex: 1 1 auto; min-width: 0; }
  .cmpat-logo { max-width: 100%; width: 100%; height: auto; max-height: 85px; object-fit: contain; object-position: left center; }
  .cmpat-header-row > a:last-child { flex: 0 0 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
  /* Let both columns use the full viewport, in a predictable order. */
  .cmpat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px;
  }
  .cmpat-grid > * { min-width: 0; }
}

@media (max-width: 600px) {
  html { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  body { margin: 0; min-width: 0; font-size: 16px; line-height: 1.35; }

  /* Existing 97% + 1% paddings are replaced by clear mobile gutters. */
  .cmpat-wrap {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 14px;
  }
  .cmpat-header-row { gap: 10px; min-width: 0; padding-block: 6px; }
  .cmpat-header-row > a:first-child { flex: 1 1 auto; min-width: 0; }
  .cmpat-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 68px;
    height: auto;
    object-fit: contain;
    object-position: left center;
  }
  .cmpat-header-row > a:last-child {
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .cmpat-home-icon { width: 30px; height: 30px; }

  /* Five sections become finger-friendly, two-column navigation. */
  .cmpat-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-bottom: 14px;
  }
  .cmpat-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 9px 7px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    font-size: clamp(0.76rem, 3.3vw, 0.98rem);
  }
  .cmpat-tabs > .cmpat-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .cmpat-title {
    font-size: clamp(1.42rem, 5.3vw, 1.85rem);
    line-height: 1.16;
    overflow-wrap: anywhere;
  }
  .cmpat-card { min-width: 0; padding: 12px; }
  .cmpat-grid > div { min-width: 0; }
  .cmpat-grid p { max-width: 100%; overflow-wrap: break-word; }
  .cmpat-grid p[style*="text-align:justify"] {
    text-align: left !important;
    text-justify: auto !important;
    line-height: 1.4 !important;
  }
  .cmpat-grid figure { max-width: 100%; min-width: 0; }
  .cmpat-grid figure img { max-width: 100%; height: auto; }
  .cmpat-grid figcaption { text-align: left !important; line-height: 1.35 !important; }
  .cmpat-quote { overflow-wrap: anywhere; }
  .cmpat-cta, .cmpat-courseCatBtn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .cmpat-foot { line-height: 1.4; }

  /* Overview's narrow movie still becomes readable on a phone. */
  .cmpat-door-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .cmpat-door-image { flex: none !important; max-width: 100% !important; width: 100% !important; }
  .cmpat-door-image img { width: min(60%, 220px) !important; height: auto !important; margin: 0 auto; }
  .cmpat-door-text { flex: none !important; width: 100%; }
  .cmpat-door-text p:first-child { margin-bottom: 12px !important; font-size: 0.93rem !important; }
  .cmpat-door-text .cmpat-cta { margin: 10px 0 0 0 !important; }

  /* eLearning's demo/catalogue links must fit, even with long labels. */
  .cmpat-learning-actions { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 9px !important; }
  .cmpat-learning-actions a {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    white-space: normal !important;
  }

  /* Demo form: prevent two/three fields from becoming unusably narrow. */
  form.cmpat-form { padding: 13px; max-width: 100%; min-width: 0; }
  form.cmpat-form .row { flex-direction: column; gap: 0; }
  form.cmpat-form .row > div { min-width: 0; width: 100%; }
  form.cmpat-form input, form.cmpat-form select, form.cmpat-form textarea {
    display: block;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }
  form.cmpat-form .btn {
    width: 100%;
    min-height: 48px;
    white-space: normal;
    line-height: 1.3;
  }
}