/* ===================================================================
   dept.css — shared styles for the Departments sections.

   Loaded after hub.css by Marketing.html, IT.html and every
   marketing-*.html / it-*.html sub-page. Every colour and face here
   resolves to a hub.css custom property; nothing new is invented.

   One stylesheet rather than one per department: Marketing and IT use an
   identical visual language, and a second copy would drift within a
   release. Was marketing.css until IT joined the section.
   =================================================================== */

/* ---------- section masthead ----------
   Sits directly under the nav on the landing page and reads as part of
   the chrome rather than as page content. */
.mk-head{padding:clamp(24px,3.4vw,36px) 0 0}
.mk-head h1{margin:0;font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.mk-head .lede{margin:12px 0 0;max-width:64ch;font-size:15.5px;color:var(--ink-2);line-height:1.55}

/* ---------- contact strip ----------
   Hours, phone and email for the department. Mono labels match the
   eyebrow treatment used on My Hub's fact panels. */
.mk-contact{display:flex;flex-wrap:wrap;gap:2px;margin-top:22px;
            background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.mk-contact div{flex:1 1 200px;background:var(--shell);padding:13px 18px}
.mk-contact .k{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
               text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.mk-contact .v{font-size:14.5px;font-weight:600;letter-spacing:-.01em}

/* ---------- filter ----------
   Eighteen tiles with the labels burned into images is unsearchable by
   definition. This searches tile names, descriptions AND the resources
   that live inside each tile, so "sign-in sheet" finds Open House
   Marketing even though those words are not on the tile. */
.mk-filter{position:relative;margin:26px 0 4px;max-width:440px}
.mk-filter input{width:100%;font-family:var(--font-body);font-size:15px;color:var(--ink);
                 background:var(--shell);border:1px solid var(--rule);border-radius:5px;
                 padding:12px 40px 12px 14px}
.mk-filter input::placeholder{color:var(--muted)}
.mk-filter input:focus{border-color:var(--tide)}
.mk-filter .clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
                  background:none;border:none;cursor:pointer;color:var(--muted);
                  font-size:20px;line-height:1;padding:6px 9px;border-radius:4px}
.mk-filter .clear:hover{color:var(--ink)}
.mk-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
          color:var(--muted);margin-top:9px;min-height:16px}

/* ---------- tile groups ---------- */
.mk-group{margin-top:clamp(24px,3vw,34px)}
.mk-group > h2{margin:0 0 3px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.mk-group > .sub{margin:0 0 14px;font-size:13.5px;color:var(--muted)}

.mk-tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* The tile itself. Text, not a baked-in graphic: it can be searched,
   read aloud, translated, and reflowed on a phone. The old image tiles
   could do none of those. */
.mk-tile{display:flex;flex-direction:column;background:var(--shell);border:1px solid var(--rule);
         border-radius:6px;padding:16px 18px 15px;
         border-left:3px solid var(--tide);
         transition:border-color .13s,box-shadow .13s,transform .13s}
.mk-tile:hover{border-color:var(--rule);border-left-color:var(--ink);
               box-shadow:0 4px 14px rgba(14,35,56,.09);transform:translateY(-1px)}
.mk-tile:focus-visible{transform:translateY(-1px)}
.mk-tile b{font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
           display:flex;align-items:center;gap:7px}
.mk-tile .desc{margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45}
.mk-tile .meta{margin-top:auto;padding-top:11px;font-family:var(--font-mono);font-size:10px;
               letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.mk-tile .ext{font-size:12px;color:var(--muted);font-weight:400}

/* Forms tile is the one that is a doorway rather than a topic. */
.mk-tile.is-forms{border-left-color:var(--grass)}
.mk-tile.is-external{border-left-color:var(--muted)}

/* ---------- sub-page ---------- */
.mk-back{display:inline-flex;align-items:center;gap:6px;margin-top:clamp(20px,2.6vw,28px);
         font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
         font-weight:600;color:var(--muted)}
.mk-back:hover{color:var(--tide)}

.mk-page{padding-bottom:10px}
.mk-page h1{margin:14px 0 0;font-size:clamp(24px,3.3vw,31px);font-weight:800;
            letter-spacing:-.035em;line-height:1.08}
.mk-page .lede{margin:12px 0 0;max-width:70ch;font-size:15.5px;color:var(--ink-2);line-height:1.6}

.mk-block{background:var(--shell);border:1px solid var(--rule);border-radius:6px;
          padding:20px 22px;margin-top:16px}
.mk-block h2{margin:0 0 10px;font-size:17.5px;font-weight:700;letter-spacing:-.022em}
.mk-block h3{margin:18px 0 7px;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.mk-block p{margin:0 0 11px;font-size:14.5px;line-height:1.6;max-width:74ch}
.mk-block p:last-child{margin-bottom:0}
.mk-block ul{margin:0 0 11px;padding-left:20px;font-size:14.5px;line-height:1.6;max-width:74ch}
.mk-block li{margin-bottom:5px}
.mk-block li:last-child{margin-bottom:0}

/* A priced option inside a programme — cost is the thing agents scan
   for, so it gets a mono treatment and its own line rather than being
   buried at the end of a paragraph. */
.mk-cost{display:inline-block;margin-top:2px;font-family:var(--font-mono);font-size:12px;
         font-weight:600;color:var(--marker-green);background:#E7F0EB;border:1px solid #C5DCCF;
         border-radius:100px;padding:4px 11px}
.mk-cost.is-free{color:var(--marker-green)}

/* Call-to-action link out to a form, PDF or external tool. */
.mk-do{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
       font-size:14.5px;font-weight:600;color:var(--tide)}
.mk-do:hover{text-decoration:underline;text-underline-offset:2px}
.mk-do .arw{font-family:var(--font-mono);font-size:12px}

/* A stack of downloads or links. */
.mk-links{list-style:none;margin:0;padding:0;display:grid;gap:1px;
          background:var(--rule);border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.mk-links li{background:var(--shell);margin:0}
.mk-links a{display:flex;align-items:center;gap:10px;padding:12px 15px;font-size:14.5px;font-weight:600;color:var(--tide)}
.mk-links a:hover{background:var(--paper)}
.mk-links .tag{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
               text-transform:uppercase;color:var(--muted);font-weight:600;flex-shrink:0}

/* ---------- print ---------- */
@media print{
  .mk-filter,.mk-back,.nav,.masthead,.foot,.imp{display:none !important}
  .mk-tile,.mk-block,.mk-links{break-inside:avoid;box-shadow:none}
  .mk-tiles{grid-template-columns:repeat(3,1fr)}
  body{background:#fff}
}

/* ---------- mobile ---------- */
@media(max-width:640px){
  .mk-tiles{grid-template-columns:1fr}
  .mk-contact div{flex-basis:100%}
  .mk-block{padding:17px 16px}
  .mk-links a{padding:14px 14px}
  .mk-links .tag{margin-left:0;flex-basis:100%}
  .mk-links a{flex-wrap:wrap;gap:4px 10px}
}