/**
 * All Programs listing (programs/all → programs:page_7) — card redesign.
 *
 * Hand-maintained (NOT generated from pcss). Loaded via the bgccyh2022/views-programs
 * library, which the theme attaches on the `programs` view (see
 * bgccyh2022_views_pre_render()). All rules are scoped to the page_7 display only,
 * so the other programs displays (page_2 My Active, page_3 Completed, blocks) are
 * untouched. Overrides the compiled program-card CSS (css/components/nodes/program.css)
 * by specificity. Tune columns / clamp lines / image ratio / blue shade freely.
 */

.view-id-programs.view-display-id-page_7 .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 1024px) {
  .view-id-programs.view-display-id-page_7 .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .view-id-programs.view-display-id-page_7 .view-content {
    grid-template-columns: 1fr;
  }
}

/* Grid cells/cards fill their row so every card is the same height.
   min-width:0 keeps each card to its 1fr track so content (or the lack of an
   image/teaser/title) can never widen it past its column. */
.view-id-programs.view-display-id-page_7 .view-content > .views-row {
  display: flex;
  margin-bottom: 0;
  min-width: 0;
}

/* Force the Views field wrappers to fill the track, so the card width never
   depends on whether the program has an image / teaser / title. */
.view-id-programs.view-display-id-page_7 .views-row > *,
.view-id-programs.view-display-id-page_7 .views-row .field-content {
  width: 100%;
  min-width: 0;
}

.view-id-programs.view-display-id-page_7 .views-row article {
  display: flex;
  flex-direction: column;        /* (1) image ABOVE content (was image-left grid) */
  width: 100%;
  height: 100%;
  border-radius: 12px;           /* round all corners — group-left is empty (square top) when no image */
  overflow: hidden;              /* clip the white content to the rounded card */
  grid-template-columns: none;   /* cancel the inherited 2-col card/teaser grid */
}

/* Image sits on top, uniform size, square top corners. */
.view-id-programs.view-display-id-page_7 .views-row article .group-left {
  border-radius: 12px 12px 0 0;
}

.view-id-programs.view-display-id-page_7 .views-row article .group-left img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

/* Content fills the rest so cards bottom-align consistently. */
.view-id-programs.view-display-id-page_7 .views-row article .group-right {
  border-radius: 0 0 12px 12px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 20px 30px;          /* drop the 90px bottom reserved for the absolute footer */
}

/* Let the content column fill the card so the CTA can sit at the bottom. */
.view-id-programs.view-display-id-page_7 .views-row article .node__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Fix field overlap: the original wide-card layout absolutely-positions the
   footer fields (sponsor, details link, certificate, status, and the LMS
   "Let's go" button) into the card's bottom corners. In the narrow 3-column
   card those corners collide, so return every one of them to normal flow and
   let the flex column stack them. */
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-sponsor,
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-details-link,
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-certificate,
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-status,
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-lms-url {
  position: static;
  float: none;
  bottom: auto;
  left: auto;
  right: auto;
  margin-left: 0;
  margin-top: 0.75rem;
  text-align: left;
}

/* Bottom-align the primary CTA ("Let's go" on active cards, "Program details"
   on catalog cards) so every card's link sits on the same baseline. */
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-lms-url,
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-details-link {
  margin-top: auto;
}

/* (3) Remove the dotted divider lines: the teaser's ::after dividers AND the
   card_horizontal <hr> (dotted-divider--navy.svg, from program.pcss). */
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-teaser::after,
.view-id-programs.view-display-id-page_7 .views-row article .group-right::after,
.view-id-programs.view-display-id-page_7 .views-row article hr {
  display: none;
}

/* (4) Consistent, scannable copy — clamp the teaser text to 3 lines. */
.view-id-programs.view-display-id-page_7 .views-row article .field--name-field-program-teaser {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Program title sizing. */
.view-id-programs.view-display-id-page_7 .views-row article .node__title {
  font-size: 1.125rem;
}

/* Section headings (Resume / Discover / Finished) — Views grouping renders an
   <h3> before each state's cards; span it across the whole grid row. */
.view-id-programs.view-display-id-page_7 .view-content > h3 {
  grid-column: 1 / -1;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #003b4a;
}

.view-id-programs.view-display-id-page_7 .view-content > h3:first-child {
  margin-top: 0;
}

/* Activity cards (bgcc_activities render in the teaser view mode with the same
   group-left/group-right structure as programs). program.css only sets the
   white card background on program bundles, so add it for activities. */
.view-id-programs.view-display-id-page_7 .views-row article.node--type-bgcc-activities .group-left,
.view-id-programs.view-display-id-page_7 .views-row article.node--type-bgcc-activities .group-right {
  background: #ffffff;
}