/* Forest & Environment Department in the site design of Territorial Overview (css/designs/forest_reserved.css is loaded
   before this): the Administration Set-up as the reporting chain card beside About the Department, the Four Wings as
   open columns, the Organisations & Agencies as link cards. Here only what this page adds. */

/* the Four Wings: open columns between thin rules, no cards. A gold line grows along the top of the column under the
   mouse; the link's arrow nudges on. */
.fe-wing-cols { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(15, 28, 16, .14); }
.fe-wing { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 32px 8px; border-left: 1px solid rgba(15, 28, 16, .14); }
.fe-wing:first-child { padding-left: 0; border-left: 0; }
.fe-wing:last-child { padding-right: 0; }
.fe-wing::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: #f1c40f;
    transform: scaleX(0); transform-origin: left; transition: transform 400ms cubic-bezier(.16, 1, .3, 1); }
.fe-wing:hover::before, .fe-wing:focus-within::before { transform: scaleX(1); }
.fe-wing-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fe-wing-no { font: 600 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(15, 28, 16, .45); }
.fe-wing-icon { font-size: 20px; color: #2d6a4f; transition: color 150ms cubic-bezier(.4, 0, .2, 1); }
.fe-wing:hover .fe-wing-icon { color: #c9a227; }
.fe-wing-title { margin: 8px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: #0a2e1a; text-wrap: balance; }
.fe-wing-text { margin: 0; font-size: 15px; line-height: 1.65; color: #1f2a22; }
.fe-wing-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: #1a472a; text-decoration: none; }
.fe-wing-go:hover { color: #0a2e1a; text-decoration: underline; text-underline-offset: 4px; }
.fe-wing-go svg { flex: none; transition: transform 150ms cubic-bezier(.4, 0, .2, 1); }
.fe-wing:hover .fe-wing-go svg { transform: translateX(4px); }
.fe-wing-go:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; border-radius: 2px; }
.tx-admin + .fe-wings, .fe-wings + .fe-agencies { padding-top: 20px !important; }
@media (max-width: 1100px) {
    .fe-wing-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fe-wing:nth-child(odd) { padding-left: 0; border-left: 0; }
    .fe-wing:nth-child(n+3) { border-top: 1px solid rgba(15, 28, 16, .14); }
    .fe-wing:nth-child(2n) { padding-right: 0; }
    .fe-wing { padding-bottom: 32px; }
}
@media (max-width: 600px) {
    .fe-wing-cols { grid-template-columns: minmax(0, 1fr); }
    .fe-wing, .fe-wing:first-child { padding: 24px 0; border-left: 0; }
    .fe-wing + .fe-wing { border-top: 1px solid rgba(15, 28, 16, .14); }
}
@media (prefers-reduced-motion: reduce) { .fe-wing::before, .fe-wing-go svg { transition: none; } }

/* Organisations & Agencies: sand link cards, three to a row */
.fe-agency-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fe-agency { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 188px; padding: 24px; box-sizing: border-box; border-radius: 8px;
    background: #f2ede1; color: #0a2e1a; text-decoration: none;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms cubic-bezier(.16, 1, .3, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
a.fe-agency:hover { transform: translateY(-4px); background: #ece5d3; box-shadow: 0 20px 40px -24px rgba(10, 46, 26, .45); color: #0a2e1a; }
a.fe-agency:active { transform: translateY(-3px); }
a.fe-agency:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.fe-agency-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #1a472a; font-size: 17px;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1); }
a.fe-agency:hover .fe-agency-icon { background: #0a2e1a; color: #f1c40f; }
.fe-agency-name { font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.fe-agency-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 14px; font-weight: 600; color: #1a472a; }
.fe-agency-go svg { transition: transform 150ms cubic-bezier(.4, 0, .2, 1); }
a.fe-agency:hover .fe-agency-go svg { transform: translateX(4px); }
.fe-agency-text { margin-top: auto; font-size: 14px; color: #4b5563; }
@media (max-width: 1100px) { .fe-agency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fe-agency-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .fe-agency { min-height: 0; padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .fe-agency, .fe-agency-go svg { transition: none; } a.fe-agency:hover { transform: none; } }

/* desktop: the chain card runs the full height of the About text beside it, its levels spread down it from top to bottom */
@media (min-width: 901px) {
    .fe-page .tx-admin .tx-split { align-items: stretch; }
    .fe-page .tx-admin .tx-chain-list { justify-content: space-between; margin-top: 32px; }   /* first and last level at the ends of the rail */
}
.fe-page .tx-admin .tx-chain-list::before { bottom: var(--rail-end, 20px); }   /* the rail ends at the last level's dot (fe_department.js) */