/*
  LINK RESOURCE EXCHANGE
  Uses /lakenorman/styles.css as the design master.
  This file contains ONLY page-specific adjustments.
*/


/* ========================================================
   HERO
   Keep exact homepage geometry.
   ======================================================== */

.resource-page .resource-main-hero {
  height:420px;
}


/*
  IMPORTANT:
  Do NOT replace the homepage hero treatment.
  This intentionally inherits the same approved
  Lake Norman hero background from styles.css.
*/


/* Make longer ribbon words fit homepage ribbon */

.resource-page .impact strong {
  font-size:18px;
}

.resource-page .impact span {
  max-width:130px;
}


/* ========================================================
   SHARE CARDS
   Exact homepage engage-card structure.
   ======================================================== */

.resource-share-section {
  padding-top:20px;
}

.resource-share-section .engage-card {
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.resource-share-section .engage-card:hover {
  transform:translateY(-3px);

  box-shadow:
    0 10px 24px rgba(6,23,46,.1);
}


/* ========================================================
   LIVE RESOURCE AREA
   Based on homepage Real Needs structure.
   ======================================================== */

.resource-live-section {
  padding-top:22px;
  padding-bottom:20px;
}

.resource-live-section .needs-grid {
  grid-template-columns:
    190px minmax(0,1fr);
}

.resource-live-content {
  min-width:0;
}

.resource-secondary-button {
  width:100%;

  margin-top:7px;

  padding:9px 10px;

  border:1px solid var(--navy);
  border-radius:4px;

  background:#fff;

  color:var(--navy);

  font:
    900 7px/1.4
    Montserrat,sans-serif;
}


/* ========================================================
   LIVE RESOURCE CARDS
   Match homepage need-card scale and geometry.
   ======================================================== */

.resource-grid {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:15px;
}

.resource-card {
  position:relative;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:6px;

  background:#fff;

  box-shadow:
    0 4px 14px rgba(6,23,46,.05);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.resource-card:hover {
  transform:translateY(-3px);

  box-shadow:
    0 8px 20px rgba(6,23,46,.1);
}

.resource-image {
  display:block;

  width:100%;
  height:280px;

  object-fit:contain;
  object-position:center;

  background:#f4f6f8;
  padding:8px;
}

.resource-image-placeholder {
  width:100%;
  height:110px;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      145deg,
      #174f56,
      var(--teal)
    );
}

.resource-image-placeholder img {
  width:58px;
  height:58px;

  padding:3px;

  border-radius:50%;

  background:#fff;

  object-fit:contain;
}

.resource-body {
  padding:11px;
}

.business-name {
  margin-bottom:5px;

  color:var(--teal);

  font:
    900 6px
    Montserrat,sans-serif;

  letter-spacing:.06em;

  text-transform:uppercase;
}

.resource-body h2 {
  margin:0 0 5px;

  color:var(--navy);

  font:
    700 14px/1.1
    "Libre Baskerville",serif;
}

.resource-body p {
  margin:4px 0;

  color:#364252;

  font-size:8px;
  line-height:1.4;
}

.resource-body .resource-meta {
  margin-top:7px;

  padding-top:5px;

  border-top:
    1px solid rgba(11,35,68,.08);
}

.resource-body .primary {
  width:100%;

  margin-top:8px;

  padding:7px;

  border:1px solid var(--navy);
  border-radius:3px;

  background:#fff;

  color:var(--navy);

  font:
    900 7px
    Montserrat,sans-serif;

  cursor:pointer;
}

.resource-body .primary:hover {
  background:var(--navy);

  color:#fff;
}

.empty {
  grid-column:1/-1;

  padding:30px 20px;

  border:1px dashed var(--border);
  border-radius:7px;

  background:#fff;

  color:var(--muted);

  text-align:center;

  font-size:10px;
}


/* ========================================================
   LOCAL STATIC PREVIEW MESSAGE
   Never show raw JSON/parser error.
   ======================================================== */

.page-status {
  min-height:0;

  margin-bottom:8px;
}

.page-status.preview,
.page-status.error {
  padding:9px 11px;

  border-radius:5px;

  background:#fff;

  color:var(--muted);

  font-size:8px;
  line-height:1.45;
}

.page-status.preview {
  border-left:
    3px solid var(--teal);
}

.page-status.error {
  border-left:
    3px solid var(--red);
}


/* ========================================================
   POLICY
   Compact — same white-panel language as homepage.
   ======================================================== */

.resource-policy-wrap {
  padding:
    16px 30px 20px;

  background:#fbfaf7;
}

.resource-policy-panel {
  width:min(1420px,100%);

  margin:auto;

  padding:17px 19px;

  display:grid;

  grid-template-columns:
    115px 1fr 1fr;

  gap:24px;

  align-items:center;

  border:1px solid var(--border);
  border-radius:9px;

  background:#fff;

  box-shadow:
    0 5px 18px rgba(6,23,46,.05);
}

.resource-policy-number {
  width:94px;
  height:94px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--gold);

  color:var(--navy);
}

.resource-policy-number strong {
  font:
    700 43px/.8
    "Libre Baskerville",serif;
}

.resource-policy-number span {
  margin-top:8px;

  font:
    900 7px
    Montserrat,sans-serif;

  letter-spacing:.12em;
}

.resource-policy-kicker {
  color:var(--teal);

  font:
    900 7px
    Montserrat,sans-serif;

  letter-spacing:.1em;
}

.resource-policy-copy h2 {
  margin:5px 0 6px;

  color:var(--navy);

  font:
    700 20px/1.08
    "Libre Baskerville",serif;
}

.resource-policy-copy p,
.resource-policy-gate p {
  margin:0;

  color:var(--muted);

  font-size:8px;
  line-height:1.5;
}

.resource-policy-gate {
  padding-left:22px;

  border-left:
    1px solid var(--border);
}

.resource-policy-gate > strong {
  display:block;

  margin-bottom:6px;

  color:var(--navy);

  font:
    900 8px/1.4
    Montserrat,sans-serif;
}

.resource-policy-buttons {
  margin-top:9px;

  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.resource-policy-buttons a {
  padding:8px 10px;

  border-radius:4px;

  background:var(--teal);

  color:#fff;

  text-decoration:none;

  font:
    900 7px
    Montserrat,sans-serif;
}

.resource-policy-buttons a.outline {
  border:1px solid var(--navy);

  background:#fff;

  color:var(--navy);
}


/* ========================================================
   HOW IT WORKS
   Same navy ecosystem section language.
   ======================================================== */

.resource-ecosystem {
  padding-top:23px;
  padding-bottom:23px;
}

.resource-ecosystem
.ecosystem-shell {
  grid-template-columns:
    300px 1fr;
}

.resource-eco-button {
  display:inline-block;

  margin-top:8px;

  padding:8px 13px;

  border-radius:4px;

  background:var(--gold);

  color:#14233f;

  text-decoration:none;

  font:
    900 7px
    Montserrat,sans-serif;
}

.resource-process-flow {
  display:grid;

  grid-template-columns:
    1fr 35px 1fr 35px 1fr;

  gap:7px;

  align-items:center;
}

.resource-process-flow article {
  min-height:115px;

  padding:13px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  border:1px solid var(--gold);
  border-radius:7px;

  background:#102b50;

  text-align:center;
}

.resource-process-flow article b {
  width:31px;
  height:31px;

  margin-bottom:8px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:var(--gold);

  color:var(--navy);

  font-size:12px;
}

.resource-process-flow article strong {
  color:#fff;

  font:
    900 8px
    Montserrat,sans-serif;
}

.resource-process-flow article span {
  margin-top:5px;

  color:rgba(255,255,255,.74);

  font-size:7px;
}

.resource-process-arrow {
  color:var(--gold);

  text-align:center;

  font-size:21px;
}


/* ========================================================
   DISCLOSURE
   ======================================================== */

.resource-disclosure {
  max-width:850px;

  margin:18px auto 28px;

  padding:0 20px;

  color:var(--muted);

  text-align:center;

  font-size:7px;
  line-height:1.5;
}


/* ========================================================
   RESOURCE REQUEST MODAL
   Existing IDs + JS behavior preserved.
   ======================================================== */

.resource-modal {
  position:fixed;

  inset:0;

  z-index:100;

  display:none;
  place-items:center;

  padding:18px;

  background:
    rgba(4,14,30,.74);
}

.resource-modal.open {
  display:grid;
}

.resource-modal-card {
  width:min(620px,100%);

  max-height:
    calc(100vh - 36px);

  overflow:auto;

  padding:27px;

  border-radius:14px;

  background:#fff;
}

.resource-modal-head {
  margin-bottom:18px;

  display:flex;
  justify-content:space-between;
  gap:20px;
}

.resource-modal-head h2 {
  margin:7px 0 0;

  color:var(--navy);

  font:
    700 27px
    "Libre Baskerville",serif;
}

.close-button {
  width:38px;
  height:38px;

  border:
    1px solid var(--border);

  border-radius:50%;

  background:#fff;

  color:var(--navy);

  font-size:21px;

  cursor:pointer;
}

#requestForm {
  display:grid;

  gap:13px;
}

#requestForm label {
  display:block;

  color:var(--navy);

  font-size:10px;
  font-weight:800;
}

#requestForm input,
#requestForm select,
#requestForm textarea {
  width:100%;

  margin-top:6px;

  padding:11px;

  border:
    1px solid var(--border);

  border-radius:7px;

  background:#fff;

  color:var(--ink);

  font:inherit;
}

#requestForm textarea {
  min-height:100px;

  resize:vertical;
}

.check-row {
  display:flex !important;

  gap:9px;

  align-items:flex-start;

  font-weight:500 !important;

  line-height:1.45;
}

.check-row input {
  width:auto !important;

  margin-top:2px !important;
}

.resource-request-button {
  padding:11px 14px;

  border:0;

  border-radius:5px;

  background:var(--teal);

  color:#fff;

  font:
    900 8px
    Montserrat,sans-serif;

  cursor:pointer;
}

.status {
  min-height:18px;

  margin:0;

  color:var(--muted);

  font-size:9px;
}

.status.success {
  color:var(--green);
}

.status.error {
  color:var(--red);
}


/* ========================================================
   RESPONSIVE
   Follow homepage behavior.
   ======================================================== */

@media(max-width:1100px) {

  .resource-live-section
  .needs-grid {
    grid-template-columns:1fr;
  }

  .resource-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .resource-policy-panel {
    grid-template-columns:
      100px 1fr;
  }

  .resource-policy-gate {
    grid-column:1/-1;

    padding-left:0;
    padding-top:14px;

    border-left:0;
    border-top:
      1px solid var(--border);
  }

}

@media(max-width:800px) {

  .resource-process-flow {
    grid-template-columns:1fr;
  }

  .resource-process-arrow {
    transform:rotate(90deg);
  }

}

@media(max-width:650px) {

  .resource-page
  .resource-main-hero {
    height:520px;
  }

  .resource-page
  .impact strong {
    font-size:17px;
  }

  .resource-grid {
    grid-template-columns:1fr;
  }

  .resource-policy-panel {
    grid-template-columns:1fr;
  }

  .resource-policy-number {
    width:82px;
    height:82px;
  }

  .resource-ecosystem
  .ecosystem-shell {
    grid-template-columns:1fr;
  }

}


/* LINK PUBLIC RESOURCE DETAIL V1 */

.resource-public-image-button{
  appearance:none;
  width:100%;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.resource-public-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.resource-view-button{
  border:2px solid #0b3b60;
  background:#fff;
  color:#0b3b60;
  border-radius:9px;
  padding:11px 16px;
  font-weight:800;
  cursor:pointer;
}

.resource-approved-note{
  margin-top:16px;
  font-weight:700;
  color:#0b3b60;
}

.resource-public-detail-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(9,31,49,.78);
}

.resource-public-detail-modal.open{
  display:flex;
}

.resource-public-detail-dialog{
  position:relative;
  width:min(900px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.resource-public-detail-close{
  position:absolute;
  z-index:2;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#0b3b60;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.16);
}

.resource-public-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px;
}

.resource-public-gallery img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:12px;
}

.resource-public-gallery-main{
  grid-column:1/-1;
  height:420px !important;
}

.resource-public-detail-body{
  padding:28px;
}

.resource-approved-access{
  margin:22px 0;
  padding:18px;
  background:#eef6fb;
  border-left:5px solid #2e7bbe;
  border-radius:10px;
}

.resource-approved-access p{
  margin:6px 0 0;
}

.resource-public-detail-placeholder{
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef4f7;
}

.resource-public-detail-placeholder img{
  width:120px;
  height:120px;
  object-fit:contain;
}

@media(max-width:700px){

  .resource-public-gallery{
    grid-template-columns:1fr;
  }

  .resource-public-gallery-main{
    grid-column:auto;
    height:280px !important;
  }

  .resource-public-gallery img{
    height:220px;
  }

}

/* ==========================================================
   LINK RESOURCE EXCHANGE APPROVED VISUAL V1
   Additive visual layer only.
   Existing Resource Exchange logic remains unchanged.
   ========================================================== */

.resource-offer-section{
  padding:48px 24px 58px;
  background:
    linear-gradient(
      180deg,
      #f7f7f4 0%,
      #fbfbfa 100%
    );
}

.resource-offer-panel{
  width:min(1280px,100%);
  margin:0 auto;
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(420px,.95fr);
  align-items:stretch;
  background:#fff;
  border:1px solid #d9e0e7;
  border-radius:22px;
  box-shadow:
    0 18px 50px rgba(11,35,68,.07);
}

.resource-offer-copy{
  padding:
    clamp(44px,5vw,72px)
    clamp(38px,5vw,68px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:none;
}

.resource-offer-copy
.resource-policy-kicker{
  margin:0 0 14px;
  color:#147f7a;
  font-size:14px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
}

.resource-offer-copy h2{
  margin:0;
  max-width:700px;
  color:#09274d;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size:
    clamp(46px,5.3vw,78px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:700;
}

.resource-offer-copy > p{
  max-width:650px;
  margin:28px 0 0;
  color:#46566d;
  font-size:
    clamp(17px,1.45vw,21px);
  line-height:1.55;
}

.resource-offer-copy
.resource-offer-approval{
  margin-top:22px;
  color:#34465d;
}

.resource-offer-copy
.resource-policy-buttons{
  margin-top:30px;
}

.resource-offer-button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 27px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#1f837e !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.03em;
  box-shadow:none !important;
}

.resource-offer-button:hover{
  transform:translateY(-2px);
  background:#176f6a !important;
}

.resource-offer-visual{
  position:relative;
  min-height:520px;
  overflow:hidden;
  background:#e8efee;
}

.resource-offer-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}


/* ==========================================================
   AVAILABLE. USEFUL. LOCAL.
   ========================================================== */

#available-resources{
  padding:
    clamp(70px,8vw,118px)
    24px
    clamp(80px,9vw,130px);
  background:#fff;
}

#available-resources
.needs-grid{
  width:min(1280px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:
    minmax(300px,.7fr)
    minmax(0,1.55fr);
  gap:
    clamp(44px,6vw,82px);
  align-items:start;
}

#available-resources
.needs-intro{
  position:sticky;
  top:30px;
  max-width:430px;
}

#available-resources
.needs-intro::before{
  content:"RESOURCE EXCHANGE";
  display:block;
  width:max-content;
  margin:0 0 20px;
  padding-top:17px;
  border-top:3px solid #16837d;
  color:#16837d;
  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
}

#available-resources
.needs-intro h2{
  margin:0 0 30px;
  color:#09274d;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size:
    clamp(58px,6.5vw,96px);
  line-height:.88;
  letter-spacing:-.055em;
  font-weight:700;
}

#available-resources
.needs-intro p{
  max-width:390px;
  margin:0 0 24px;
  color:#31455f;
  font-size:
    clamp(17px,1.4vw,21px);
  line-height:1.55;
}

#available-resources
.needs-intro button{
  width:100%;
  max-width:330px;
  min-height:56px;
  margin:8px 0 4px;
  border-radius:10px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.025em;
}

#available-resources
.gold-btn{
  border:0;
  background:#16837d;
  color:#fff;
}

#available-resources
.gold-btn:hover{
  background:#116f6a;
}

#available-resources
.resource-secondary-button{
  border:2px solid #16837d;
  background:#fff;
  color:#13736e;
}


/* ==========================================================
   LIVE RESOURCE CARDS
   Public data fields remain controlled by resources.js/API.
   ========================================================== */

#available-resources
.resource-live-content{
  min-width:0;
}

#available-resources
.page-status{
  margin:0 0 18px;
  color:#52627a;
  font-weight:700;
}

#available-resources
.resource-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

#available-resources
.resource-card{
  position:relative;
  min-width:0;
  height:100%;
  padding:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid #dce3e9;
  border-radius:18px;
  box-shadow:
    0 15px 38px rgba(11,35,68,.08);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

#available-resources
.resource-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 22px 44px rgba(11,35,68,.11);
}

#available-resources
.resource-card img{
  width:100%;
  height:
    clamp(260px,28vw,360px);
  display:block;
  object-fit:cover;
  object-position:center;
  margin:0 0 18px;
  border-radius:13px;
  background:#eef2f3;
}

#available-resources
.resource-card h2,
#available-resources
.resource-card h3{
  margin:8px 0 10px;
  color:#09274d;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size:
    clamp(24px,2.2vw,33px);
  line-height:1.05;
}

#available-resources
.resource-card p{
  color:#46566d;
  font-size:16px;
  line-height:1.5;
}

#available-resources
.resource-card button,
#available-resources
.resource-card a{
  border-radius:9px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:980px){

  .resource-offer-panel{
    grid-template-columns:1fr;
  }

  .resource-offer-visual{
    min-height:420px;
  }

  #available-resources
  .needs-grid{
    grid-template-columns:1fr;
  }

  #available-resources
  .needs-intro{
    position:static;
    max-width:720px;
  }

  #available-resources
  .needs-intro h2{
    max-width:650px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

  .resource-offer-section{
    padding:26px 14px 36px;
  }

  .resource-offer-panel{
    border-radius:16px;
  }

  .resource-offer-copy{
    padding:36px 24px 40px;
  }

  .resource-offer-copy h2{
    font-size:
      clamp(43px,13vw,62px);
  }

  .resource-offer-visual{
    min-height:330px;
  }

  #available-resources{
    padding:
      64px
      18px
      78px;
  }

  #available-resources
  .needs-intro h2{
    font-size:
      clamp(58px,18vw,78px);
  }

  #available-resources
  .resource-grid{
    grid-template-columns:1fr;
  }

  #available-resources
  .resource-card img{
    height:300px;
  }

}



/* ==========================================================
   LINK RESOURCE EXCHANGE APPROVED DESIGN V2
   VISUAL ONLY — EXISTING FUNCTIONALITY PRESERVED
   ========================================================== */


/* ==========================================================
   COMMUNITY DONATIONS HERO
   ========================================================== */

.resource-offer-section{
  padding:32px 22px 58px !important;
  background:#f8f8f6 !important;
}

.resource-offer-panel{
  width:min(1180px,100%) !important;
  margin:0 auto !important;
  padding:0 !important;

  display:grid !important;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  overflow:hidden !important;

  background:#ffffff !important;
  border:1px solid #d9e0e7 !important;
  border-radius:18px !important;

  box-shadow:
    0 18px 48px rgba(8,35,69,.07) !important;
}

.resource-offer-copy{
  min-width:0 !important;

  padding:
    54px
    44px
    52px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.resource-offer-copy .resource-policy-kicker{
  margin:0 0 18px !important;

  color:#16837d !important;

  font-size:14px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.11em !important;
}

.resource-offer-copy h2{
  margin:0 !important;

  max-width:550px !important;

  color:#09274d !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(48px,4.5vw,70px) !important;

  line-height:.98 !important;
  letter-spacing:-.045em !important;
  font-weight:700 !important;
}

.resource-offer-copy > p{
  margin:26px 0 0 !important;

  max-width:520px !important;

  color:#46566d !important;

  font-size:18px !important;
  line-height:1.55 !important;
}

.resource-offer-copy .resource-offer-approval{
  margin-top:22px !important;
}

.resource-offer-copy .resource-policy-buttons{
  margin-top:30px !important;
}

.resource-offer-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:245px !important;
  min-height:58px !important;

  padding:0 28px !important;

  border:0 !important;
  border-radius:9px !important;

  background:#20857f !important;
  color:#fff !important;

  text-decoration:none !important;

  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
}

.resource-offer-visual{
  position:relative !important;

  width:100% !important;
  min-height:600px !important;

  overflow:hidden !important;

  background:#e9efee !important;
}

.resource-offer-visual img{
  position:absolute !important;
  inset:0 !important;

  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;
  object-position:center !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;
}


/* ==========================================================
   AVAILABLE. USEFUL. LOCAL.
   ========================================================== */

#available-resources{
  padding:
    78px
    24px
    110px !important;

  background:#fff !important;
}

#available-resources .needs-grid{
  width:min(1180px,100%) !important;
  margin:0 auto !important;

  display:grid !important;

  grid-template-columns:
    340px
    minmax(0,740px) !important;

  justify-content:center !important;
  align-items:start !important;

  gap:64px !important;
}

#available-resources .needs-intro{
  width:100% !important;
  max-width:340px !important;

  position:static !important;
}

#available-resources .needs-intro::before{
  content:"RESOURCE EXCHANGE" !important;

  display:block !important;

  width:max-content !important;

  margin:0 0 20px !important;
  padding-top:16px !important;

  border-top:3px solid #16837d !important;

  color:#16837d !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
}

#available-resources .needs-intro h2{
  margin:0 0 30px !important;

  color:#09274d !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(58px,5vw,76px) !important;

  line-height:.89 !important;
  letter-spacing:-.05em !important;
}

#available-resources .needs-intro p{
  max-width:340px !important;

  margin:0 0 24px !important;

  color:#31455f !important;

  font-size:17px !important;
  line-height:1.52 !important;
}

#available-resources .needs-intro button{
  width:100% !important;
  max-width:320px !important;

  min-height:56px !important;

  margin:8px 0 4px !important;

  border-radius:9px !important;
}


/* ==========================================================
   RESOURCE CARDS
   ========================================================== */

#available-resources .resource-live-content{
  width:100% !important;
  max-width:740px !important;
  min-width:0 !important;
}

#available-resources .resource-grid{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,340px)) !important;

  justify-content:start !important;
  align-items:start !important;

  gap:22px !important;
}

#available-resources .resource-card{
  width:100% !important;
  max-width:340px !important;

  min-width:0 !important;

  padding:12px !important;

  overflow:hidden !important;

  background:#fff !important;

  border:1px solid #dde4e9 !important;
  border-radius:16px !important;

  box-shadow:
    0 12px 30px rgba(8,35,69,.08) !important;
}

#available-resources .resource-card img{
  width:100% !important;
  height:300px !important;

  display:block !important;

  margin:0 0 16px !important;

  object-fit:cover !important;
  object-position:center !important;

  border-radius:11px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:980px){

  .resource-offer-panel{
    grid-template-columns:1fr !important;
  }

  .resource-offer-visual{
    min-height:480px !important;
  }

  #available-resources .needs-grid{
    grid-template-columns:1fr !important;
    gap:44px !important;
  }

  #available-resources .needs-intro{
    max-width:620px !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

  .resource-offer-section{
    padding:18px 12px 40px !important;
  }

  .resource-offer-copy{
    padding:36px 24px 40px !important;
  }

  .resource-offer-copy h2{
    font-size:
      clamp(43px,13vw,58px) !important;
  }

  .resource-offer-visual{
    min-height:380px !important;
  }

  #available-resources{
    padding:
      58px
      18px
      78px !important;
  }

  #available-resources .needs-intro h2{
    font-size:
      clamp(56px,18vw,72px) !important;
  }

  #available-resources .resource-grid{
    grid-template-columns:
      minmax(0,1fr) !important;
  }

  #available-resources .resource-card{
    max-width:100% !important;
  }

  #available-resources .resource-card img{
    height:310px !important;
  }

}

/* LINK RESOURCE EXCHANGE APPROVED DESIGN V2 */

/* LINK RESOURCE EXCHANGE BRANDED PANEL LOCAL SCALE START */

/*
  Scoped to Resource Exchange only.
  Does not alter shared branded panels on other LINK pages.
*/

#link-resource-branded-graphics{
  width:min(1280px,calc(100% - 56px));
  margin:72px auto 88px;
}

#link-resource-branded-graphics
.link-branded-section-heading{
  max-width:980px;
  margin:0 auto 38px;
}

#link-resource-branded-graphics
.link-branded-section-heading span{
  margin-bottom:12px;
  font-size:.9rem;
  letter-spacing:.14em;
}

#link-resource-branded-graphics
.link-branded-section-heading h2{
  max-width:1000px;
  margin:0 auto;
  font-size:clamp(38px,3.5vw,54px);
  line-height:1.08;
}

#link-resource-branded-graphics
.link-branded-section-heading p{
  max-width:900px;
  margin:18px auto 0;
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.55;
}

#link-resource-branded-graphics
.link-branded-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  align-items:stretch;
}

#link-resource-branded-graphics
.link-branded-card{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:20px;
}

#link-resource-branded-graphics
.link-branded-card > img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:contain;
  object-position:center;
  background:#fff;
}

#link-resource-branded-graphics
.link-branded-actions{
  margin-top:auto;
  gap:14px;
  padding:24px;
}

#link-resource-branded-graphics
.link-branded-actions a{
  min-height:56px;
  padding:0 24px;
  font-size:.82rem;
  line-height:1.2;
  border-radius:9px;
}

@media(max-width:780px){

  #link-resource-branded-graphics{
    width:calc(100% - 28px);
    margin:48px auto 64px;
  }

  #link-resource-branded-graphics
  .link-branded-section-heading h2{
    font-size:clamp(34px,9vw,46px);
  }

  #link-resource-branded-graphics
  .link-branded-section-heading p{
    font-size:18px;
  }

  #link-resource-branded-graphics
  .link-branded-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  #link-resource-branded-graphics
  .link-branded-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  #link-resource-branded-graphics
  .link-branded-actions a{
    width:100%;
    min-height:58px;
    font-size:.86rem;
  }
}

/* LINK RESOURCE EXCHANGE BRANDED PANEL LOCAL SCALE END */

/* LINK 30-DAY POLICY PANEL SCALE START */

/*
  Bottom compact Resource Exchange policy panel only.
  Excludes the Community Donations hero above it.
*/

section.resource-policy-wrap:not(.resource-offer-section){
  padding:28px 34px 38px;
  background:#fbfaf7;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-panel{
  width:min(1420px,100%);
  margin:auto;
  padding:28px 32px;
  display:grid;
  grid-template-columns:
    145px
    minmax(0,1.55fr)
    minmax(320px,.9fr);
  gap:34px;
  align-items:center;
  border-radius:16px;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-number{
  width:120px;
  height:120px;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-number strong{
  font-size:54px;
  line-height:.9;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-number span{
  margin-top:10px;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-kicker{
  margin-bottom:8px;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.11em;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-copy h2{
  margin:7px 0 10px;
  font-size:clamp(28px,2.3vw,38px);
  line-height:1.08;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-copy p{
  max-width:760px;
  font-size:14px;
  line-height:1.55;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-gate{
  padding-left:30px;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-gate > strong{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  line-height:1.35;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-gate p{
  font-size:13px;
  line-height:1.5;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-buttons a,
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-buttons button,
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-gate a,
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-gate button{
  min-height:48px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1.2;
  font-weight:900;
  border-radius:8px;
}

@media(max-width:1050px){

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-panel{
    grid-template-columns:120px 1fr;
    gap:26px;
  }

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-gate{
    grid-column:1/-1;
    padding-left:0;
    padding-top:22px;
    border-left:0;
    border-top:1px solid var(--border);
  }
}

@media(max-width:700px){

  section.resource-policy-wrap:not(.resource-offer-section){
    padding:22px 16px 30px;
  }

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-panel{
    padding:24px;
    grid-template-columns:1fr;
    gap:22px;
  }

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-number{
    width:105px;
    height:105px;
  }

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-copy h2{
    font-size:30px;
  }

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-copy p,
  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-gate p{
    font-size:14px;
  }

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-buttons{
    display:grid;
    grid-template-columns:1fr;
  }

  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-buttons a,
  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-buttons button,
  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-gate a,
  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-gate button{
    width:100%;
    min-height:52px;
  }
}

/* LINK 30-DAY POLICY PANEL SCALE END */

/* LINK LIVE RESOURCE VIEWPORT FIX START */

/*
  Keep Resource Exchange content inside the browser viewport.
  Does not alter database/API/resource publishing behavior.
*/

.resource-page{
  overflow-x:clip;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section),
.resource-page
section.resource-policy-wrap:not(.resource-offer-section) *,
.resource-page
.link-resource-connection-story,
.resource-page
.link-resource-connection-story *{
  box-sizing:border-box;
  min-width:0;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-panel{
  width:min(1320px,100%) !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.resource-page
.link-resource-connection-story{
  width:100% !important;
  max-width:100% !important;
  padding-left:max(28px,4vw) !important;
  padding-right:max(28px,4vw) !important;
  overflow:hidden;
}

.resource-page
.link-resource-connection-story > *{
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:700px){

  .resource-page
  .link-resource-connection-story{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .resource-page
  section.resource-policy-wrap:not(.resource-offer-section){
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* LINK LIVE RESOURCE VIEWPORT FIX END */

/* ==========================================================
   LINK RESOURCE PAGE — READABILITY SCALE FIX
   Scoped only to Resource Exchange lower sections.
   ========================================================== */

/* ---------- 30-DAY PANEL ---------- */

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-number{
  width:132px !important;
  height:132px !important;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-number strong{
  font-size:58px !important;
  line-height:.9 !important;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-number span{
  font-size:12px !important;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-kicker{
  font-size:14px !important;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-copy h2{
  font-size:clamp(32px,2.8vw,44px) !important;
  line-height:1.08 !important;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-copy p,
.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-gate p{
  font-size:16px !important;
  line-height:1.55 !important;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
.resource-policy-gate > strong{
  font-size:15px !important;
  line-height:1.35 !important;
}

.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
a,
.resource-page
section.resource-policy-wrap:not(.resource-offer-section)
button{
  min-height:52px !important;
  padding:0 20px !important;
  font-size:13px !important;
}


/* ---------- NAVY "LINK MAKES THE CONNECTION" SECTION ---------- */

.resource-page
.link-resource-connection-story{
  padding-top:72px !important;
  padding-bottom:72px !important;
}

.resource-page
.link-resource-connection-story h2{
  font-size:clamp(42px,4vw,62px) !important;
  line-height:1.02 !important;
}

.resource-page
.link-resource-connection-story h3{
  font-size:24px !important;
  line-height:1.15 !important;
}

.resource-page
.link-resource-connection-story p{
  font-size:16px !important;
  line-height:1.5 !important;
}

.resource-page
.link-resource-connection-story strong{
  font-size:16px !important;
}

.resource-page
.link-resource-connection-story span{
  font-size:14px !important;
}

.resource-page
.link-resource-connection-story a,
.resource-page
.link-resource-connection-story button{
  min-height:50px !important;
  padding:0 20px !important;
  font-size:13px !important;
}

.resource-page
.link-resource-connection-story article{
  min-height:230px !important;
  padding:30px !important;
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

  .resource-page
  section.resource-policy-wrap:not(.resource-offer-section)
  .resource-policy-copy h2{
    font-size:30px !important;
  }

  .resource-page
  .link-resource-connection-story h2{
    font-size:38px !important;
  }

  .resource-page
  .link-resource-connection-story p{
    font-size:16px !important;
  }
}

/* LINK RESOURCE STORY V1 START */

.resource-story-section{
  width:100%;
  padding:82px 40px 88px;
  overflow:hidden;
  background:#09294f;
}

.resource-story-shell{
  width:min(1320px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:
    minmax(280px,330px)
    minmax(0,1fr);
  gap:48px;
  align-items:center;
}

.resource-story-intro{
  min-width:0;
}

.resource-story-kicker{
  margin-bottom:14px;
  color:#efaa22;
  font-family:Montserrat,Arial,sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.1em;
}

.resource-story-intro h2{
  margin:0;
  max-width:330px;
  color:#fff;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size:clamp(46px,4.4vw,64px);
  line-height:.98;
  overflow-wrap:normal;
}

.resource-story-intro p{
  max-width:320px;
  margin:24px 0 0;
  color:#d9e3ee;
  font-size:17px;
  line-height:1.55;
}

.resource-story-cta{
  display:inline-flex;
  min-height:54px;
  margin-top:24px;
  padding:0 24px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#eba91f;
  color:#08284e;
  font-family:Montserrat,Arial,sans-serif;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.resource-story-steps{
  min-width:0;
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:22px;
}

.resource-story-card{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(235,169,31,.65);
  border-radius:18px;
  box-shadow:
    0 18px 38px rgba(0,0,0,.18);
}

.resource-story-card > img{
  display:block;
  width:100%;
  aspect-ratio:1.25 / 1;
  object-fit:cover;
  object-position:center;
  background:#fff;
}

.resource-story-card-body{
  padding:24px 22px 27px;
  text-align:center;
}

.resource-story-number{
  width:40px;
  height:40px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#eba91f;
  color:#08284e;
  font-family:Montserrat,Arial,sans-serif;
  font-size:16px;
  font-weight:900;
}

.resource-story-card h3{
  margin:0;
  color:#09294f;
  font-family:Montserrat,Arial,sans-serif;
  font-size:20px;
  line-height:1.15;
  font-weight:900;
  text-transform:uppercase;
}

.resource-story-card p{
  margin:11px auto 0;
  color:#536174;
  font-size:15px;
  line-height:1.5;
}

@media(max-width:1080px){

  .resource-story-shell{
    grid-template-columns:1fr;
  }

  .resource-story-intro{
    max-width:760px;
  }

  .resource-story-intro h2,
  .resource-story-intro p{
    max-width:760px;
  }
}

@media(max-width:800px){

  .resource-story-section{
    padding:58px 18px 64px;
  }

  .resource-story-steps{
    grid-template-columns:1fr;
  }

  .resource-story-card{
    width:min(520px,100%);
  }

  .resource-story-intro h2{
    font-size:clamp(42px,12vw,58px);
  }

  .resource-story-intro p{
    font-size:16px;
  }
}

/* LINK RESOURCE STORY V1 END */
