/* ---------------------------------------------------------------------------
   Teaching modules listing — how the cards relate to EACH OTHER
   ---------------------------------------------------------------------------
   The card's own insides live in its component
   (components/node/teaching-module/card-teaching-module/). What is here is
   listing behaviour: the stack, the accent spine, and the rule above each term
   heading. Same split as person-grid-layout.css and tender-grid-layout.css.

   The view renders one `.views-row` per card, so adjacent cards are siblings
   and `:last-child` closes the stack.

   ⚠️ Every card on this site already carries `border: 1px solid #000` from
   `article.card` in global-sissa.css. Nothing below adds a box — it only
   recolours one edge and removes the edges that would double up.
   -------------------------------------------------------------------------- */

/* --- Mobile: separate cards, accent along the top ------------------------- */
/* Mirrors the event card, which is the pattern this follows. */
.view-teaching-modules-public-blocks-db article.card-teaching-module {
  border-top: 5px solid var(--accent);
  margin-bottom: 1rem;
}

/* --- From 992px: one attached stack, accent down the left ----------------- */
@media (min-width: 992px) {
  .view-teaching-modules-public-blocks-db article.card-teaching-module {
    margin-bottom: 0;
    border-top: 1px solid #000;
    border-left: 6px solid var(--accent);
    /* Dropped so the 1px of this card and the 1px of the next do not stack
       into a 2px line. The last card puts it back, below. */
    border-bottom: 0;
  }

  /* Closes the bottom of the stack. */
  .view-teaching-modules-public-blocks-db
    .views-row:last-child
    article.card-teaching-module {
    border-bottom: 1px solid #000;
  }
}

/* --- Rule above the term heading ------------------------------------------ */
/* Scoped with :has() to the paragraph that carries THIS view, so the treatment
   does not land on every `view_block` title on the site. `:has()` is already
   used in the theme (phd-student-project--page-header.css).

   `position: relative` is not decoration: without it both pseudo-elements
   would resolve `top: 0` against the page instead of the heading, and land
   somewhere else entirely. */
.paragraph-container:has(.view-teaching-modules-public-blocks-db)
  .title-style-1 {
  position: relative;
  padding-top: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.paragraph-container:has(.view-teaching-modules-public-blocks-db)
  .title-style-1:before,
.paragraph-container:has(.view-teaching-modules-public-blocks-db)
  .title-style-1:after {
  position: absolute;
  top: 0;
  left: 33.333%;
  transform: translateX(-50%);
  content: "";
  width: 100vw;
  height: 1px;
  background-color: #cacaca;
}

/* The accent length over the hairline: `transform-origin: left` with a
   NEGATIVE scaleX grows it leftwards from the 50% mark, so it covers the left
   half of the heading. It replaces the translateX above rather than adding to
   it — one `transform` per element. */
.paragraph-container:has(.view-teaching-modules-public-blocks-db)
  .title-style-1:after {
  background-color: #000;
  height: 3px;
  width: 100%;
  top: -1px;
  transform-origin: left;
  transform: scaleX(-0.3333);
}


.paragraph-container  {
  margin-bottom: 5rem;
}