/**
 * HireTheVeterans.com — Unique Hiring Paths hub
 * File: assets/css/hiring-paths-hub.css
 *
 * Loaded by page.php ONLY for the unique-hiring-paths hub
 * (content_type 'hiring-path' with published children). Inherits
 * variables, fonts, .container and .cms-body from style.css + cms.css —
 * do not redefine those here.
 *
 * USAJobs "Explore hiring paths" layout, in HTV's light theme:
 * white tiles, dark text, navy/red accents only (HTV contrast rule —
 * body/dark text on white, never the reverse). Two-column grid of
 * compact tiles (icon + name + one-line description), each a link to
 * that path's own /page/{slug}.
 */

/* ------------------------------------------------------------------
   Intro prose above the grid — constrained for readability, centred
------------------------------------------------------------------ */
.hp-hub-intro {
    max-width: 780px;
    margin: 0 auto 1.5rem;
    text-align: center;
}

/* ------------------------------------------------------------------
   Primer link — standalone "what are hiring paths?" overview, set
   apart above the grid with a navy left-edge accent. Same light
   theme: tinted white surface, dark text, navy title, red arrow on
   hover. Full border + left accent kept square-cornered on the
   accented side per the single-sided-border rule.
------------------------------------------------------------------ */
.hp-hub-primer {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: 780px;
    margin: 0 auto 2.5rem;
    padding: 0.9rem 1.15rem;
    background: var(--navy-pale, #eef2f7);
    border: 1px solid var(--border-light, #d7dee8);
    border-left: 4px solid var(--navy, #1B2A4A);
    border-radius: 0;
    text-decoration: none;
    transition: background var(--transition, 0.15s ease);
}

.hp-hub-primer:hover,
.hp-hub-primer:focus-visible {
    background: #e3eaf3;
}

.hp-hub-primer:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.hp-hub-primer-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--navy, #1B2A4A);     /* line icon inherits this → navy on tint */
}

.hp-hub-primer-icon svg {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    stroke: currentColor;
}

.hp-hub-primer-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.hp-hub-primer-eyebrow {
    font-family: 'Barlow', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #555;                      /* muted, but no lighter than #555 on tint */
}

.hp-hub-primer-title {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy, #1B2A4A);
}

.hp-hub-primer-arrow {
    margin-left: auto;
    font-size: 1.3rem;
    color: var(--navy, #1B2A4A);
    transition: color var(--transition, 0.15s ease), transform 0.12s ease;
}

.hp-hub-primer:hover .hp-hub-primer-arrow,
.hp-hub-primer:focus-visible .hp-hub-primer-arrow {
    color: var(--red, #C8102E);
    transform: translateX(3px);
}

/* ------------------------------------------------------------------
   Two-column tile grid (single column on narrower viewports)
------------------------------------------------------------------ */
.hp-hub-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.hp-hub-tile-item {
    margin: 0;
    display: flex;                    /* lets the tile stretch to row height */
}

/* Tile — white card, navy line icon + navy title + dark one-liner.
   The whole tile is the link. */
.hp-hub-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
    background: var(--white, #fff);
    border: 2px solid var(--navy, #1B2A4A);   /* matches the jobs-page band cards */
    border-radius: var(--radius-sm, 6px);
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    transition: border-color var(--transition, 0.15s ease),
                box-shadow var(--transition, 0.15s ease),
                transform 0.08s ease;
}

.hp-hub-tile:hover,
.hp-hub-tile:focus-visible {
    border-color: var(--red, #C8102E);
    box-shadow: 0 4px 12px rgba(27, 42, 74, 0.18);
    transform: translateY(-2px);
}

.hp-hub-tile:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.hp-hub-tile-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--navy, #1B2A4A);      /* dark line icon on white */
    padding-top: 0.1rem;
}

.hp-hub-tile-icon svg {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    stroke: currentColor;
}

.hp-hub-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;                     /* allow the one-liner to wrap, not overflow */
}

/* Path name — sentence/title case as stored (NOT uppercased: names like
   "Peace Corps & AmeriCorps VISTA" must keep their casing). */
.hp-hub-tile-title {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.2;
    color: var(--navy, #1B2A4A);
    margin-bottom: 0.25rem;
}

.hp-hub-tile-desc {
    font-family: 'Source Serif 4', serif;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #333;                      /* contrast rule: no lighter than #333 on white */
}

/* ------------------------------------------------------------------
   Responsive — collapse to a single column
------------------------------------------------------------------ */
@media (max-width: 860px) {
    .hp-hub-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hp-hub-primer {
        margin-bottom: 2rem;
    }
    .hp-hub-tile-title {
        font-size: 1.1rem;
    }
}