/*
 * Course Navigation Grid block - tabs (one per taxonomy term with matching
 * posts, see template.php) above a uniform post grid per tab. Desktop
 * column count (2-6) comes from the Columns field via
 * --prontoblocks-course-nav-grid-columns; tiles wrap to additional rows
 * once that's exceeded. Mobile/tablet stay at a fixed 1/3 columns
 * regardless of that setting, same responsive pattern as page-nav-grid/
 * icon-grid. Tab markup/behavior mirrors the tabs block exactly (see
 * blocks/tabs/style.css) - only the class prefix differs.
 */

/*
 * Colour Theme presets (Blue/Navy/Gold - see the Colour Theme field in
 * fields.php). Sets the same custom properties every other rule in this
 * file already reads via var(--prontoblocks-course-nav-grid-*, fallback) -
 * there's no per-instance color picker, so this modifier class is the only
 * source for them. Adjust the values below to match exact brand colors.
 */
.wp-block-prontoblocks-course-nav-grid--theme-blue {
  --prontoblocks-course-nav-grid-bg-color: #ffffff;
  --prontoblocks-course-nav-grid-text-color: #0a1f33;
  --prontoblocks-course-nav-grid-card-bg-color: #eaf4fc;
  --prontoblocks-course-nav-grid-title-color: #0072ce;
}

.wp-block-prontoblocks-course-nav-grid--theme-navy {
  --prontoblocks-course-nav-grid-bg-color: #0a1f44;
  --prontoblocks-course-nav-grid-text-color: #ffffff;
  --prontoblocks-course-nav-grid-card-bg-color: #14284f;
  --prontoblocks-course-nav-grid-title-color: #d4af6a;
}

.wp-block-prontoblocks-course-nav-grid--theme-gold {
  --prontoblocks-course-nav-grid-bg-color: #fdf8ee;
  --prontoblocks-course-nav-grid-text-color: #3b2f0e;
  --prontoblocks-course-nav-grid-card-bg-color: #f5e7c6;
  --prontoblocks-course-nav-grid-title-color: #a97917;
}

/*
 * Alternating theme: the block's own background/text stay neutral (same
 * values as the Blue theme's chrome) - only each tab and its panel's cards
 * get colored, via the --odd/--even parity classes template.php adds to
 * each __tab and __panel (PHP-computed rather than a CSS :nth-of-type
 * selector - see the comment above the tabs loop in template.php for why).
 * Blue/Gold hex values match the Blue/Gold themes above for consistency.
 */
.wp-block-prontoblocks-course-nav-grid--theme-alternating {
  --prontoblocks-course-nav-grid-bg-color: #ffffff;
  --prontoblocks-course-nav-grid-text-color: #0a1f33;
}

.wp-block-prontoblocks-course-nav-grid--theme-alternating .wp-block-prontoblocks-course-nav-grid__tab--odd {
  --prontoblocks-course-nav-grid-tab-accent-color: #0072ce;
  --prontoblocks-course-nav-grid-tab-accent-text-color: #ffffff;
}

.wp-block-prontoblocks-course-nav-grid--theme-alternating .wp-block-prontoblocks-course-nav-grid__tab--even {
  --prontoblocks-course-nav-grid-tab-accent-color: #a97917;
  --prontoblocks-course-nav-grid-tab-accent-text-color: #ffffff;
}

.wp-block-prontoblocks-course-nav-grid--theme-alternating .wp-block-prontoblocks-course-nav-grid__panel--odd {
  --prontoblocks-course-nav-grid-card-bg-color: #eaf4fc;
  --prontoblocks-course-nav-grid-title-color: #0072ce;
}

.wp-block-prontoblocks-course-nav-grid--theme-alternating .wp-block-prontoblocks-course-nav-grid__panel--even {
  --prontoblocks-course-nav-grid-card-bg-color: #f5e7c6;
  --prontoblocks-course-nav-grid-title-color: #a97917;
}

.wp-block-prontoblocks-course-nav-grid {
  background-color: var(--prontoblocks-course-nav-grid-bg-color, transparent);
  color: var(--prontoblocks-course-nav-grid-text-color, inherit);
}

.wp-block-prontoblocks-course-nav-grid__inner {
  position: relative;
  width: 100%;
}

.wp-block-prontoblocks-course-nav-grid--contain .wp-block-prontoblocks-course-nav-grid__inner {
  max-width: var(--wp--style--global--wide-size, 1432px);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--8, 24px);
}

.wp-block-prontoblocks-course-nav-grid__header {
  margin-bottom: 2rem;
}

.wp-block-prontoblocks-course-nav-grid__header--align-left {
  text-align: left;
}

.wp-block-prontoblocks-course-nav-grid__header--align-center {
  text-align: center;
}

.wp-block-prontoblocks-course-nav-grid__header--align-right {
  text-align: right;
}

.wp-block-prontoblocks-course-nav-grid__eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
}

.wp-block-prontoblocks-course-nav-grid__title {
  margin: 0 0 0.5rem;
}

.wp-block-prontoblocks-course-nav-grid__subtitle {
  margin: 0;
}

.wp-block-prontoblocks-course-nav-grid__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

/*
 * Tabs keep their natural width (never shrink or wrap their label) so that
 * "do they fit on one row?" has a single, stable answer - assets/js/blocks.js
 * measures their combined width against the strip's and flips the block into
 * `is-dropdown-mode` when they don't. Higher specificity than the theme's
 * own __tab rule.
 */
.wp-block-prontoblocks-course-nav-grid .wp-block-prontoblocks-course-nav-grid__tab {
  flex-shrink: 0;
  white-space: nowrap;
}

.wp-block-prontoblocks-course-nav-grid__tab {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--prontoblocks-course-nav-grid-tab-accent-color, currentColor);
  border-radius: 999px;
  background: transparent;
  color: var(--prontoblocks-course-nav-grid-tab-accent-color, inherit);
  font: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/*
 * The active tab fills with its accent color (Alternating theme, set per
 * tab's --odd/--even class above) or, when that's unset (Blue/Navy/Gold
 * themes), the block's text color - flipping its own label to the
 * contrasting color in each case. --tab-accent-color and --text-color are
 * referenced directly rather than `currentColor` - using `currentColor` for
 * background-color here would resolve against this same rule's own `color`
 * override (CSS doesn't "snapshot" the inherited color before a rule
 * overrides it), collapsing background and text to the same value instead
 * of contrasting them.
 */
.wp-block-prontoblocks-course-nav-grid__tab.is-active {
  background-color: var(--prontoblocks-course-nav-grid-tab-accent-color, var(--prontoblocks-course-nav-grid-text-color, currentColor));
  color: var(--prontoblocks-course-nav-grid-tab-accent-text-color, var(--prontoblocks-course-nav-grid-bg-color, #fff));
}

.wp-block-prontoblocks-course-nav-grid__panel[hidden] {
  display: none;
}

/*
 * Mobile/tablet dropdown equivalent of __tabs above (see the comment in
 * template.php). This block owns only the structural/functional pieces -
 * which control is shown at which width, the trigger/option's cursor/font
 * reset, and the trigger/chevron/panel's layout (flex arrangement, the
 * panel's absolute anchor to the trigger) - the same split __tab already
 * has with the theme: actual color/radius/shadow/spacing for
 * __dropdown-trigger/-panel/-option/-chevron live in the theme's
 * _mixins.scss (tab-dropdown mixin, used from _courseNavGrid.scss -
 * @include grid's span/offset placement has to be there regardless, since
 * that mixin isn't available to plain CSS), matching __tab's own look
 * rather than guessed values here that the theme would just override
 * anyway. Hidden by default (desktop); the max-width: 899px query below
 * swaps it in and hides __tabs instead, so nothing above that width
 * changes at all. The panel's own open/closed visibility is driven
 * entirely by the theme's .is-open transition (see the mixin) - this file
 * has no opinion on that. Unlike the old <select>, this CAN (and does)
 * show the Alternating theme's per-tab accent color - see the comment in
 * template.php.
 */
.wp-block-prontoblocks-course-nav-grid__dropdown {
  display: none;
  position: relative;
}

.wp-block-prontoblocks-course-nav-grid__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.wp-block-prontoblocks-course-nav-grid__dropdown-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.wp-block-prontoblocks-course-nav-grid__dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.wp-block-prontoblocks-course-nav-grid__dropdown-option {
  display: block;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/*
 * Dropdown mode: below 900px always, and above it whenever blocks.js adds
 * `is-dropdown-mode` because the tabs don't fit on one row. The tab strip is
 * hidden visually (not display:none) so it keeps its real laid-out width,
 * which is what blocks.js measures to decide when it can come back -
 * absolutely positioned, it still sits in the same grid area (the theme
 * places it with grid-column), so its width matches what it has when shown.
 */
.wp-block-prontoblocks-course-nav-grid.is-dropdown-mode .wp-block-prontoblocks-course-nav-grid__tabs {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  margin: 0;
  padding-block: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.wp-block-prontoblocks-course-nav-grid.is-dropdown-mode .wp-block-prontoblocks-course-nav-grid__dropdown {
  display: block;
}

@media (max-width: 899px) {
  .wp-block-prontoblocks-course-nav-grid .wp-block-prontoblocks-course-nav-grid__tabs {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    margin: 0;
    padding-block: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }

  .wp-block-prontoblocks-course-nav-grid__dropdown {
    display: block;
  }
}

.wp-block-prontoblocks-course-nav-grid__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--prontoblocks-course-nav-grid-gap, 1.5rem);
  row-gap: var(--prontoblocks-course-nav-grid-row-gap, var(--prontoblocks-course-nav-grid-gap, 1.5rem));
}

@media (width >= 600px) {
  .wp-block-prontoblocks-course-nav-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 1024px) {
  .wp-block-prontoblocks-course-nav-grid__list {
    grid-template-columns: repeat(var(--prontoblocks-course-nav-grid-columns, 4), minmax(0, 1fr));
  }
}

.wp-block-prontoblocks-course-nav-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--prontoblocks-course-nav-grid-card-bg-color, #f2f2f2);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

a.wp-block-prontoblocks-course-nav-grid__item:hover,
a.wp-block-prontoblocks-course-nav-grid__item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/*
 * The term info tile is a plain, non-interactive <div> (see template.php) -
 * distinguished with a border rather than the hover-lift treatment above,
 * which is reserved for the actual post links.
 */
.wp-block-prontoblocks-course-nav-grid__item--term-info {
  border: 1px solid currentColor;
}

/*
 * Show Featured Image on Hover overlay - covers the whole tile (its parent
 * has overflow:hidden and border-radius above, which clips this to match),
 * hidden until the tile is hovered/focused. :focus-within (rather than only
 * :hover/:focus-visible) is what makes this reachable by keyboard, since
 * the tile itself is the focusable element being targeted.
 */
.wp-block-prontoblocks-course-nav-grid__item-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

a.wp-block-prontoblocks-course-nav-grid__item:hover .wp-block-prontoblocks-course-nav-grid__item-hover,
a.wp-block-prontoblocks-course-nav-grid__item:focus-within .wp-block-prontoblocks-course-nav-grid__item-hover {
  opacity: 1;
}

.wp-block-prontoblocks-course-nav-grid__item-hover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Dark-to-transparent scrim so the code/title stay legible regardless of
 * the photo's own colors/brightness - same purpose as the gradient overlay
 * already used in the hero and media-text blocks.
 */
.wp-block-prontoblocks-course-nav-grid__item-hover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
}

.wp-block-prontoblocks-course-nav-grid__item-hover-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  color: #fff;
}

.wp-block-prontoblocks-course-nav-grid__item-hover-code {
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
  opacity: 0.9;
}

.wp-block-prontoblocks-course-nav-grid__item-hover-title {
  margin: 0;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  a.wp-block-prontoblocks-course-nav-grid__item,
  .wp-block-prontoblocks-course-nav-grid__tab,
  .wp-block-prontoblocks-course-nav-grid__item-hover {
    transition: none;
  }

  a.wp-block-prontoblocks-course-nav-grid__item:hover,
  a.wp-block-prontoblocks-course-nav-grid__item:focus-visible {
    transform: none;
  }
}

/*
 * Course Year / Department - only rendered for the "course" post type (see
 * template.php), topmost thing on that tile. Both <span>s always render
 * (even when a term is missing on one side) so justify-content: space-
 * between keeps Course Year on the left and Department on the right
 * consistently, rather than a single remaining item filling the row.
 */
.wp-block-prontoblocks-course-nav-grid__item-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  opacity: 0.8;
}

/*
 * Course Code - only rendered for the "course" post type (see
 * template.php), shown above the title on that tile only.
 */
.wp-block-prontoblocks-course-nav-grid__item-code {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
  opacity: 0.8;
}

.wp-block-prontoblocks-course-nav-grid__item-title {
  margin: 0;
  color: var(--prontoblocks-course-nav-grid-title-color, var(--prontoblocks-course-nav-grid-text-color, inherit));
}

.wp-block-prontoblocks-course-nav-grid__item-excerpt {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.8;
}

/*
 * The theme's base typography sets `color` directly on `p`/heading
 * elements, which wins over inheritance from an ancestor regardless of the
 * ancestor's own specificity (see the identical override in icon-grid and
 * page-nav-grid). :where() keeps this at a single class' specificity so it
 * still beats the bare element selector without outranking anything more
 * specific added later. h3 is deliberately excluded - it's only ever used
 * for __item-title, which has its own Tile Title Colour rule above.
 */
.wp-block-prontoblocks-course-nav-grid :where(p, h1, h2, h4, h5, h6, li, blockquote) {
  color: var(--prontoblocks-course-nav-grid-text-color, inherit);
}