/**
 * Programme panel styling.
 *
 * These rules used to live in the IKMa template, which meant the module
 * rendered as an unstyled list anywhere else. They ship with the module now, so
 * it is self-contained -- like mod_kaunter.
 *
 * WHY @layer: the template's own stylesheet is registered first (index.php),
 * so this file is emitted AFTER it. Without a layer, equal-specificity rules
 * here would beat the template's and a site override would silently stop
 * working. Unlayered CSS always wins over layered CSS regardless of specificity
 * or source order, so anything a template says about .cal__* still takes
 * precedence -- no !important, no specificity arms race.
 *
 * Colours are template custom properties with literal fallbacks, so the panel
 * looks deliberate on a site that has never heard of --navy-800.
 *
 * @copyright   Copyright (C) 2026 Institut Koperasi Malaysia. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

@layer ikma.module {

  .cal { margin:0; padding:0; list-style:none; }

  .cal__item {
    display:flex; gap:16px; padding:16px 0;
    border-bottom:1px solid var(--line, #DFE4EA);
  }
  .cal__item:last-child { border-bottom:0; }

  /* Date badge. 84px fits "01-03" -- a two-day programme -- without wrapping. */
  .cal__when {
    flex:0 0 84px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--navy-800, #0B4D8F); color:#fff;
    border-radius:var(--r-sm, 6px); padding:8px 4px;
  }
  .cal__d { font-weight:800; font-size:1rem; line-height:1.1; }
  .cal__m { font-size:.6875rem; opacity:.9; }

  .cal__body { min-width:0; }
  .cal__body p { margin:0; }

  .cal__title { margin:0 0 4px; font-size:1rem; font-weight:600; line-height:1.25; }
  .cal__title a { color:var(--ink-900, #12171F); text-decoration:none; }
  .cal__title a:hover { color:var(--navy-800, #0B4D8F); text-decoration:underline; }

  .cal__meta { font-size:.8125rem; color:var(--ink-600, #48525F); }

  /* 4.9:1 and 7.6:1 on white -- both clear WCAG AA for normal text. */
  .cal__slots { color:var(--teal-700, #0B7C70); font-weight:600; }
  .cal__slots.is-full { color:#9A2A00; }

}