/* CoursesForFlightOperationsOfficers.html — independent desktop and responsive rules. */
:root{
      --cmpat-blue:#0078D2;
      --cmpat-blue-dark:#0078D2;
      --cmpat-border:#0078D2;
      --cmpat-muted:#6b7280;
      --cmpat-bg:#ffffff;
      --cmpat-soft:#f6f7f9;
    }

    body{
      background:var(--cmpat-bg) !important;
      color:#111827 !important;
    }

    a{ color:var(--cmpat-blue); }
    a:hover{ color:var(--cmpat-blue-dark); }

    .cmpat-wrap{
      width:97%;
      padding-left:1%;
      padding-right:1%;
    }

    .material-symbols-outlined{
      font-size:36px;
      font-weight:normal;
      color:#0078D2;
      vertical-align:middle;
    }

    .cmpat-header{
      background:#ffffff;
      border-bottom-color:#0078D2;
      border-bottom-width:5px;
      border-bottom-style:solid;
    }

    .cmpat-header-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:5px;
      padding:0px 0;
    }

    .cmpat-logo{
      height:85px;
      width:auto;
      display:block;
    }

    .cmpat-title{
      margin:5px 0 8px 0;
      font-size:2rem;
      letter-spacing:0.2px;
    }

    .cmpat-tabs{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:0 0 16px 0;
    }

    .cmpat-tab{
      text-decoration:none;
      padding:8px 12px;
      border:1px solid var(--cmpat-blue);
      border-radius:10px;
      background:var(--cmpat-soft);
      color:var(--cmpat-blue);
      font-weight:bold;
    }

    .cmpat-tab:hover{
      font-weight:bold;
    }

    .cmpat-tab.active{
      background:var(--cmpat-blue);
      border-color:var(--cmpat-blue);
      color:#ffffff;
      font-weight:bold;
    }

    .cmpat-card{
      border:1px solid var(--cmpat-border);
      border-radius:10px;
      padding:10px 10px;
      background:#ffffff;
      box-shadow:0 1px 0 rgba(17,24,39,0.02);
    }

    .cmpat-hero-figure{
      margin:0;
    }

    .cmpat-hero-figure img{
      width:100%;
      height:auto;
      display:block;
      border:1px solid var(--cmpat-border);
      border-radius:10px;
    }

    .cmpat-hero-figure figcaption{
      font-size:small;
      opacity:0.85;
      margin-top:0.5em;
      line-height:1.1;
      text-align:justify;
      text-justify:inter-word;
    }

    .cmpat-course-card{
      border:1px solid var(--cmpat-border);
      border-radius:10px;
      padding:10px 10px;
      background:#ffffff;
      box-shadow:0 1px 0 rgba(17,24,39,0.02);
    }

    .cmpat-course-number{
      display:inline-block;
      min-width:34px;
      padding:4px 8px;
      margin-bottom:6px;
      border-radius:8px;
      background:var(--cmpat-soft);
      color:var(--cmpat-blue);
      font-weight:bold;
      font-size:0.9em;
      text-align:center;
    }

    .cmpat-cta{
      display:inline-block;
      margin-top:12px;
      padding:10px 14px;
      border-radius:12px;
      background:var(--cmpat-blue);
      color:#ffffff;
      text-decoration:none;
      font-weight:700;
    }

    .cmpat-cta:hover{
      background:var(--cmpat-blue-dark);
      color:#ffffff;
    }

    .cmpat-cta-secondary{
      display:inline-block;
      margin-top:12px;
      margin-left:8px;
      padding:10px 14px;
      border-radius:12px;
      border:1px solid var(--cmpat-blue);
      background:var(--cmpat-soft);
      color:var(--cmpat-blue);
      text-decoration:none;
      font-weight:700;
    }

    @media (max-width: 1000px){
      .cmpat-course-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px){
      .cmpat-course-grid{
        grid-template-columns:1fr;
      }
    }

  @media (max-width: 900px){
    .cmpat-intro-split{
      grid-template-columns:1fr !important;
    }
  }
  
  .cmpat-course-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

.cmpat-course-card{
  border:1px solid var(--cmpat-border);
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 1px 0 rgba(17,24,39,0.02);
  overflow:hidden;
  padding:12px;
}

.cmpat-course-inner{
  display:flex;
  flex-direction:column;
  height:100%;
}

.cmpat-course-content{
  display:flex;
  flex-direction:column;
}

.cmpat-course-title{
  font-weight:700;
  color:#0078D2;
  line-height:1.15;
}

.cmpat-course-text{
  font-size:0.92em;
  margin-top:6px;
  line-height:1.25;
}

.cmpat-course-image-wrap{
  width:100%;
  aspect-ratio:16 / 9;
  margin-top:10px;
  overflow:hidden;
}

.cmpat-course-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Intro heading/image split: desktop 4:1, mobile single column. */
.cmpat-intro-split {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}


/* Responsive safeguards, kept inside the catalogue pages (not ../style.css). */
.cmpat-header *, .cmpat-wrap, .cmpat-wrap * { box-sizing: border-box; }
.cmpat-wrap { max-width: 100%; }
.cmpat-header-row > a:first-child { min-width: 0; }
.cmpat-home-icon { display: block; width: 36px; height: 36px; color: #0078D2; flex: none; }
.cmpat-logo { max-width: 100%; object-fit: contain; }
.cmpat-course-card, .cmpat-card { min-width: 0; }
.cmpat-course-title, .cmpat-title { overflow-wrap: break-word; }
.cmpat-course-image, .cmpat-hero-figure img, .cmpat-section-figure img { max-width: 100%; }

/* Compact and tablet screens. Desktop remains three columns. */
@media (max-width: 1000px) {
  .cmpat-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cmpat-header-row { padding: 8px 0; }
  .cmpat-header-row > a:first-child { flex: 1 1 auto; }
  .cmpat-header-row > a:last-child {
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cmpat-logo { height: auto; max-height: 64px; width: auto; }
  .cmpat-wrap { width: 100%; padding-left: 14px; padding-right: 14px; }
  .cmpat-title { font-size: clamp(1.4rem, 5.5vw, 1.8rem); line-height: 1.2; }
  .cmpat-intro-split { grid-template-columns: 1fr; gap: 14px; }
  .cmpat-intro-split p { text-align: left !important; line-height: 1.45 !important; }
  .cmpat-hero-figure img { margin: 0 auto !important; max-width: 220px !important; }
  .cmpat-course-grid { grid-template-columns: 1fr; gap: 12px; }
  .cmpat-course-card { padding: 12px; }
  .cmpat-course-text { line-height: 1.45; }
}
@media (max-width: 600px) {
  .cmpat-cta, .cmpat-cta-secondary {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    text-align: center;
    box-sizing: border-box;
    white-space: normal;
  }
  .cmpat-hero-figure figcaption, .cmpat-section-figure figcaption {
    text-align: left;
    line-height: 1.35;
  }
}
@media (max-width: 360px) {
  .cmpat-wrap { padding-left: 10px; padding-right: 10px; }
  .cmpat-title { font-size: 1.35rem; }
}