/*
 * Víkingur 26: the organisation chart (page-skipurit.php).
 *
 * Two pieces. The chart (.vik-org) is a tree drawn with 1px rails: above
 * 760px it branches, below that the rails run straight down the middle and
 * every node is full width, so the chart never needs zooming or a sideways
 * scroll. The divisions (.vik-skip-*) are the child welfare page's sticky
 * list of contents and sections (welfare.css), narrowed to this page; on a
 * phone the list becomes a scrolling tab strip above them.
 *
 * The slide this page replaces fills its boxes red with black text (about
 * 2.3:1). Here red stays the accent and the keylines carry the structure,
 * as everywhere else on the site.
 */

/* ══ The chart ══ */
.vik-org{--rail:1px solid var(--gray-400);display:grid;justify-items:center}
.vik-org ul{list-style:none;margin:0;padding:0}

.vik-node{display:grid;gap:4px;justify-items:center;text-align:center;min-width:220px;max-width:100%;padding:18px 26px;border:1px solid var(--border-keyline);border-radius:var(--radius-card);background:var(--white);color:inherit;text-decoration:none}
.vik-node--wide{width:100%}
.vik-node__name{font-family:var(--font-condensed);font-weight:700;font-size:22px;line-height:1.05;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.vik-node__role{font-size:14px;line-height:1.4;color:var(--text-secondary)}
/* The two posts the whole club reports through. */
.vik-node--lead{background:var(--ink);color:#fff;border-color:var(--ink)}
.vik-node--lead .vik-node__role{color:rgba(255,255,255,.72)}
/* Off the chain, so it is drawn off the chain. */
.vik-node--aside{min-width:0;padding:12px 18px;border-style:dashed;border-color:var(--border-strong)}
.vik-node--aside .vik-node__name{font-size:15px;letter-spacing:.06em}

.vik-org__drop{width:0;height:32px;border-left:var(--rail)}

/* Aðalstjórn stays on the spine; the auditors hang off it. */
.vik-org__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:1100px}
.vik-org__aside{display:grid;grid-template-columns:40px auto;align-items:center;justify-self:start}
.vik-org__aside::before{content:"";height:0;border-top:var(--rail)}

/* The branch row. Row gap stays 0 so each drop starts on the rail. */
.vik-org__branches{--gap:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap);width:100%;max-width:1100px}
.vik-org__branches::before{content:"";grid-column:1/-1;height:0;margin:0 calc((100% - var(--gap)) / 4);border-top:var(--rail)}
.vik-org__branch{position:relative;display:grid;justify-items:center;align-content:start;padding-top:40px}
.vik-org__branch::before{content:"";position:absolute;top:0;left:50%;width:0;height:40px;border-left:var(--rail)}

/* The divisions, as jumps into their sections further down. They hang off
   the Stoðsvið node rather than belonging to it, so they stand clear of it.
   Qualified with .vik-org: the list reset above is (0,1,1) and would
   otherwise win on specificity and zero the margin. */
.vik-org .vik-org__list{display:grid;gap:8px;width:100%;margin-top:24px}
.vik-org__list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--hit-min);padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--white);font-family:var(--font-condensed);font-weight:700;font-size:15px;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:border-color var(--dur-fast)}
.vik-org__list a:hover,.vik-org__list a:focus-visible{border-color:var(--ink)}
.vik-org__list svg{flex:none;color:var(--vik-astrida)}

/* The departments: the one part of the chart that leads out into the site. */
.vik-org__group{display:grid;gap:14px;justify-items:center;width:100%;padding:22px;border:1px solid var(--border-keyline);border-radius:var(--radius-card);background:var(--canvas);text-align:center}
.vik-org__group-name{font-family:var(--font-condensed);font-weight:700;font-size:22px;line-height:1.05;text-transform:uppercase}
.vik-org__group-sub{margin-top:-10px;font-size:14px;color:var(--text-secondary)}
.vik-org__depts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.vik-dept{display:flex;align-items:center;justify-content:center;height:100%;min-height:var(--hit-min);padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--white);font-family:var(--font-condensed);font-weight:700;font-size:15px;line-height:1.1;text-transform:uppercase;text-align:center;color:var(--ink);text-decoration:none;overflow-wrap:break-word;hyphens:auto;transition:border-color var(--dur-fast),color var(--dur-fast)}
a.vik-dept:hover,a.vik-dept:focus-visible{border-color:var(--vik-astrida);color:var(--vik-astrida)}

@media (max-width:1000px){
	.vik-org__branches{grid-template-columns:1fr;gap:0}
	.vik-org__branches::before{display:none}
	.vik-org__depts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
	/* Straight down the middle: full-width nodes, no sideways scroll. */
	.vik-org{justify-items:stretch}
	.vik-org__drop{justify-self:center}
	.vik-node{min-width:0;width:100%;padding:16px 18px}
	.vik-node__name{font-size:19px}
	.vik-org__top{grid-template-columns:1fr;gap:12px;max-width:none}
	.vik-org__spacer{display:none}
	.vik-org__aside{grid-template-columns:1fr;justify-self:stretch}
	.vik-org__aside::before{display:none}
	.vik-node--aside{width:100%}
	.vik-org__depts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ══ The divisions ══ */
.vik-skip-divisions{background:var(--canvas);border-top:1px solid var(--border-hairline)}
.vik-skip-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:80px;align-items:start}

.vik-skip-toc{position:sticky;top:108px;align-self:start;display:grid;border-left:1px solid var(--border-hairline)}
.vik-skip-toc__label{padding:0 0 12px 20px;font-family:var(--font-condensed);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.vik-skip-toc a{margin-left:-1px;padding:10px 0 10px 20px;border-left:2px solid transparent;font-size:15px;line-height:1.35;color:var(--text-secondary);text-decoration:none;transition:color var(--dur-fast),border-color var(--dur-fast)}
.vik-skip-toc a:hover{color:var(--ink)}
.vik-skip-toc a.is-active{border-left-color:var(--vik-astrida);color:var(--ink);font-weight:700}

.vik-skip-list{display:grid;gap:56px}
.vik-skip-sec{display:grid;gap:18px;scroll-margin-top:100px}
.vik-skip-sec__kicker{font-family:var(--font-condensed);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-brand)}
.vik-skip-sec__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(30px,3.2vw,46px);line-height:.92;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.vik-skip-sec__lede{margin:0;max-width:720px;font-size:18px;line-height:1.65}

.vik-skip-tasks{display:grid;margin-top:4px;border-top:1px solid var(--border-hairline)}
.vik-skip-tasks__label{padding:16px 0 10px;font-family:var(--font-condensed);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.vik-skip-tasks ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.vik-skip-tasks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--border-hairline);font-size:16px;line-height:1.5}
.vik-skip-tasks li svg{margin-top:4px;color:var(--vik-astrida)}

@media (max-width:1000px){
	.vik-skip-grid{grid-template-columns:1fr}
	/* No list of contents: there are four sections, they are in order, and
	   the chart above already links to each. A strip of tabs that has to
	   scroll sideways to show its last name is one thing too many here. */
	.vik-skip-toc{display:none}
	.vik-skip-tasks ul{grid-template-columns:1fr}
}
@media (max-width:640px){
	.vik-skip-list{gap:40px}
	.vik-skip-sec__lede{font-size:17px}
}

/* Both the chart's links and the list of contents jump down the page, which
   is a long way to be moved without warning. As on the child welfare page
   (welfare.css), and only for a visitor who has not asked for less motion. */
@media (prefers-reduced-motion:no-preference){html:has(.vik-skip-list){scroll-behavior:smooth}}

/* ══ The other club pages ══ */
.vik-skip-more{background:var(--black);color:#fff}
.vik-skip-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vik-skip-more__grid a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--hit-min);padding:22px 24px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-card);color:#fff;text-decoration:none;font-family:var(--font-condensed);font-weight:700;font-size:20px;line-height:1.1;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto;transition:background var(--dur-fast),border-color var(--dur-fast)}
.vik-skip-more__grid a:hover,.vik-skip-more__grid a:focus-visible{background:rgba(255,255,255,.08);border-color:#fff}
.vik-skip-more__grid svg{flex:none;color:var(--vik-astrida)}
@media (max-width:860px){.vik-skip-more__grid{grid-template-columns:1fr}}