/* ========================================================================
   resources.css — shared shell for the Career Resources destination pages
   (resume-builder, career-advice, salary-guide, interview-prep).

   Load order on each page:
     tokens.css → style.css (global header/brand/back-btn) → footer.css
     → resources.css → <page>.css (page-specific, wins last)

   Owns the cross-page chrome: page background, hero, breadcrumb, shared
   buttons, section headers, note/callout, and the "More resources" strip.

   Form/tool styling lives in each PAGE css, scoped to a page wrapper, so it
   beats the footer.css `.form-group { display:flex }` global leak by both
   specificity and load order. Do NOT redefine :root tokens here.
   ======================================================================== */

.resource-page {
    background: var(--gray-50);
    color: var(--gray-900);
    font-family: var(--font-primary);
}

/* The global .container is 1500px; resource reading content sits narrower. */
.resource-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.resource-shell--narrow { max-width: 820px; }
.resource-shell--wide { max-width: 1280px; }

/* ---------- Breadcrumb (sits under the header) ---------- */
.resource-breadcrumb {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.8125rem;
}

.resource-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--gray-500);
}

.resource-breadcrumb a {
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
}

.resource-breadcrumb a:hover { color: var(--primary-color); }

.resource-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.4rem;
    color: var(--gray-300);
}

.resource-breadcrumb li[aria-current="page"] { color: var(--gray-800); font-weight: 600; }

/* ---------- Hero (generalised from post-job.css) ---------- */
.resource-hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 55%, var(--primary-light) 100%);
    padding: 3.25rem 0 4.75rem;
    text-align: center;
}

.resource-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 80% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.resource-hero > .resource-shell { position: relative; z-index: 1; }

.resource-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

.resource-hero-title {
    font-family: var(--font-secondary);
    font-size: clamp(1.875rem, 4.2vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.625rem;
    color: var(--white);
}

.resource-hero-sub {
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 38rem;
    color: rgba(255, 255, 255, 0.92);
}

.resource-hero-trust {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.625rem;
}

.resource-hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.resource-hero-trust i { font-size: 0.8rem; opacity: 0.95; }

/* ---------- Shared buttons (no dependency on become-a-pro.css) ---------- */
.r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.r-btn-primary { background: var(--primary-color); color: var(--white); }
.r-btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26, 137, 23, 0.28);
}

.r-btn-ghost {
    background: var(--white);
    color: var(--gray-700);
    border-color: var(--gray-200);
}
.r-btn-ghost:hover { border-color: var(--gray-300); background: var(--gray-50); }

.r-btn-light {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.r-btn-light:hover { background: rgba(255, 255, 255, 0.26); }

.r-btn-sm { padding: 0.45rem 0.85rem; font-size: 0.8125rem; }
.r-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Section header ---------- */
.r-section-head { text-align: center; max-width: 42rem; margin: 0 auto 2rem; }
.r-section-head.is-left { text-align: left; margin-left: 0; }

.r-section-title {
    font-family: var(--font-secondary);
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.r-section-sub { color: var(--gray-500); font-size: 1rem; line-height: 1.55; margin: 0; }

/* ---------- Note / callout (disclaimers, tips) ---------- */
.r-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--primary-tint);
    border: 1px solid rgba(26, 137, 23, 0.22);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    color: var(--gray-700);
    font-size: 0.875rem;
    line-height: 1.55;
}

.r-note i { color: var(--primary-color); margin-top: 0.15rem; flex: 0 0 auto; }
.r-note.is-warning { background: #fffbeb; border-color: #fde68a; }
.r-note.is-warning i { color: var(--warning-orange); }

/* ---------- "More resources" cross-link strip ---------- */
.more-resources { padding: 3.5rem 0 4rem; background: var(--white); border-top: 1px solid var(--gray-200); }

.more-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.more-resource-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.more-resource-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.more-resource-card:hover { border-color: var(--primary-color); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.more-resource-card:hover::before { transform: scaleX(1); }

.more-resource-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: var(--transition);
}

.more-resource-card:hover .more-resource-icon { background: var(--primary-color); color: var(--white); }
.more-resource-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--gray-900); margin: 0; }
.more-resource-card p { font-size: 0.875rem; color: var(--gray-600); line-height: 1.5; margin: 0; }

.more-resource-link {
    margin-top: auto;
    padding-top: 0.4rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.more-resource-card:hover .more-resource-link { gap: 0.65rem; }

/* ---------- Footer minor tweak (modern-footer is the shared minimal footer) ---------- */
.modern-footer { background: var(--gray-900); color: var(--gray-300); }

/* ---------- Mobile header fix (scoped to resource pages) ----------
   The global style.css header uses `grid-template-columns: 280px 1fr auto`
   on `.top-nav-wrapper`. The fixed 280px column + a brand column that can't
   shrink below its content overflow narrow screens (~312px of horizontal
   scroll). We let the brand column shrink (minmax(0,1fr) + min-width:0) and
   scale the brand down. Scoped to `.resource-page` → no blast radius to the
   root site or other page families. */
@media (max-width: 768px) {
    .resource-page .top-nav-wrapper { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; }
    .resource-page .logo-container,
    .resource-page .brand,
    .resource-page .brand-text { min-width: 0; }
    .resource-page .brand-text h1 { font-size: 1.15rem; }
    .resource-page .logo { width: 36px; height: 36px; }
}

@media (max-width: 420px) {
    .resource-page .brand-text h1 { font-size: 1.05rem; }
    .resource-page .logo { width: 32px; height: 32px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .resource-hero { padding: 2.5rem 0 3.5rem; }
    .resource-shell { padding: 0 1rem; }
    .more-resources { padding: 2.5rem 0 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .more-resource-card,
    .r-btn { transition: none; }
    .more-resource-card:hover { transform: none; }
}