/* ================================================================
   READYLAYER — resources.css
   Page-specific styles for /resources only.
   Load order: after main.css only (services.css not needed).
   All classes prefixed rsc- to avoid collision.

   Reused from main.css (no new CSS needed):
     rl-eyebrow, rl-btn-primary, rl-header / nav,
     rl-footer-*, reveal, all CSS variables

   This page does NOT use:
     svc-hero, svc-page-cta, services.css — the hero and CTA
     sections here are structurally distinct (hero has a 2-col
     grid rather than a single-col; CTA is warm bg not dark).

   New patterns unique to this page:
     rsc-hero (dark, 2-col: headline + count strip)
     rsc-featured (featured card: 5fr/4fr, dark visual + info)
     rsc-rc (resource card with colour band + type label + props)
     rsc-newsletter (dark bg — different from ins-newsletter warm)
     rsc-cta (warm bg) + rsc-btn-outline (light-bg bordered button)
     rsc-modal (notify modal — first modal in the project)

   Promotion candidate:
     rsc-btn-outline — light-bg bordered button, inverse of
     rl-btn-ghost. Promote to main.css if used on other pages.
   ================================================================ */


/* ----------------------------------------------------------------
   PAGE HERO  (dark, 2-col)
   ---------------------------------------------------------------- */
.rsc-hero {
  background: var(--rl-near-black);
  padding:    140px 0 80px;
  position:   relative;
  overflow:   hidden;
}
.rsc-hero::before {
  content:        '';
  position:       absolute;
  top:            0;
  right:          -200px;
  width:          700px;
  height:         700px;
  background:     radial-gradient(ellipse, rgba(200,80,42,.07) 0%, transparent 65%);
  pointer-events: none;
}

.rsc-hero-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
  position:              relative;
  z-index:               1;
}

.rsc-hero-left { animation: rl-fadeUp 0.8s ease forwards; }

.rsc-hero-h1 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(2.2rem, 4vw, 3.2rem);
  font-weight:    800;
  color:          var(--rl-off-white);
  line-height:    1.12;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
}
.rsc-hero-h1 em { font-style: italic; color: var(--rl-accent); }

.rsc-hero-sub {
  font-size:   1rem;
  color:       rgba(245,242,236,.55);
  line-height: 1.8;
  max-width:   480px;
  font-weight: 300;
}

/* Count strip */
.rsc-hero-counts {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  animation:             rl-fadeUp 0.8s 0.2s ease forwards;
}

.rsc-hc-item {
  background: rgba(255,255,255,.03);
  border:     1px solid rgba(255,255,255,.05);
  padding:    1.4rem 1.5rem;
}

.rsc-hc-num {
  font-family:   var(--rl-font-display);
  font-size:     2rem;
  font-weight:   800;
  color:         var(--rl-off-white);
  line-height:   1;
  margin-bottom: 0.3rem;
}
.rsc-hc-num span { color: var(--rl-accent); }

.rsc-hc-label {
  font-size:   0.78rem;
  color:       rgba(245,242,236,.35);
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .rsc-hero-grid   { grid-template-columns: 1fr; gap: 40px; }
}


/* ----------------------------------------------------------------
   FEATURED CARD  (Scorecard)
   ---------------------------------------------------------------- */
.rsc-featured {
  background: var(--rl-off-white);
  padding:    80px 0 0;
}

.rsc-featured-label {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
  margin-bottom:  2rem;
}
.rsc-featured-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--rl-border);
}

.rsc-featured-card {
  display:               grid;
  grid-template-columns: 5fr 4fr;
  border:                1px solid var(--rl-border);
  background:            var(--rl-warm);
  overflow:              hidden;
  text-decoration:       none;
  color:                 inherit;
  transition:            box-shadow 0.25s;
}
.rsc-featured-card:hover { box-shadow: 0 12px 48px rgba(0,0,0,.09); }

/* Dark visual panel */
.rsc-fc-visual {
  background:      var(--rl-near-black);
  min-height:      320px;
  position:        relative;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding:         2.5rem;
}
.rsc-fc-visual::before {
  content:        '';
  position:       absolute;
  bottom:         -80px;
  right:          -80px;
  width:          400px;
  height:         400px;
  background:     radial-gradient(ellipse, rgba(200,80,42,.14) 0%, transparent 65%);
  pointer-events: none;
}

/* Large watermark word */
.rsc-fc-word {
  font-family:    var(--rl-font-display);
  font-size:      5.5rem;
  font-weight:    900;
  color:          rgba(255,255,255,.04);
  line-height:    1;
  position:       absolute;
  bottom:         1.5rem;
  right:          1.5rem;
  pointer-events: none;
  user-select:    none;
}

/* Free badge */
.rsc-fc-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.35rem 0.9rem;
  background:     rgba(200,80,42,.15);
  border:         1px solid rgba(200,80,42,.3);
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #e8855c;
  position:       relative;
  z-index:        1;
  align-self:     flex-start;
}

/* Info panel */
.rsc-fc-info {
  padding:         2.5rem;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  gap:             1.5rem;
}

.rsc-fc-info h2 {
  font-size:     clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight:   800;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.rsc-fc-info p {
  font-size:   0.9rem;
  color:       var(--rl-mid);
  line-height: 1.75;
}

.rsc-fc-note {
  margin-top: 0.85rem;
  font-size:  0.85rem !important;
}

.rsc-fc-meta-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding-top:     1.5rem;
  border-top:      1px solid var(--rl-border);
  flex-wrap:       wrap;
}

.rsc-fc-tags {
  display:  flex;
  gap:      0.5rem;
  flex-wrap: wrap;
}

.rsc-fc-tag {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.2rem 0.55rem;
  border:         1px solid var(--rl-border);
  color:          var(--rl-mid);
}

.rsc-fc-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  background:      var(--rl-accent);
  color:           #fff;
  padding:         0.8rem 1.5rem;
  font-size:       0.88rem;
  font-weight:     600;
  white-space:     nowrap;
  text-decoration: none;
  transition:      background 0.2s;
}
.rsc-featured-card:hover .rsc-fc-cta { background: var(--rl-accent-d); }

@media (max-width: 767.98px) {
  .rsc-featured-card { grid-template-columns: 1fr; }
  .rsc-fc-visual { min-height: 180px; }
}


/* ----------------------------------------------------------------
   RESOURCE GRID
   ---------------------------------------------------------------- */
.rsc-grid-section {
  background: var(--rl-off-white);
  padding:    48px 0 100px;
}

.rsc-grid-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             1rem;
  margin-bottom:   2.5rem;
  flex-wrap:       wrap;
}

.rsc-grid-header h2 {
  font-family:  var(--rl-font-display);
  font-size:    1.25rem;
  font-weight:  700;
}

.rsc-grid-header p {
  font-size: 0.82rem;
  color:     var(--rl-mid);
}

/* Inline text button for the "get notified" link inside grid header */
.rsc-notify-text-btn {
  background:      none;
  border:          none;
  padding:         0;
  color:           var(--rl-accent);
  cursor:          pointer;
  font-family:     var(--rl-font-body);
  font-size:       0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rsc-notify-text-btn:hover { color: var(--rl-accent-d); }

.rsc-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
}

/* Base resource card */
.rsc-rc {
  background:      var(--rl-warm);
  border:          1px solid var(--rl-border);
  display:         flex;
  flex-direction:  column;
  position:        relative;
  transition:      all 0.25s;
  text-decoration: none;
  color:           inherit;
  overflow:        hidden;
}
a.rsc-rc:hover { box-shadow: 0 8px 32px rgba(0,0,0,.07); transform: translateY(-2px); }

/* Coming soon — muted */
.rsc-rc--coming {
  opacity: 0.72;
  cursor:  default;
}
.rsc-rc--coming h3 { color: var(--rl-mid); }

/* Colour band at top */
.rsc-rc-band {
  height: 4px;
  flex-shrink: 0;
}
.rsc-rc-band--report   { background: var(--rl-accent); }
.rsc-rc-band--tool     { background: var(--rl-l2); }
.rsc-rc-band--template { background: var(--rl-l3); }
.rsc-rc-band--workbook { background: var(--rl-l4); }
.rsc-rc-band--coming   { background: var(--rl-border); }

/* Card body */
.rsc-rc-body {
  padding:        1.75rem;
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            0.85rem;
}

/* Type label */
.rsc-rc-type {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display:        block;
}
.rsc-rc-type--report   { color: var(--rl-accent); }
.rsc-rc-type--tool     { color: var(--rl-l2); }
.rsc-rc-type--template { color: var(--rl-l3); }
.rsc-rc-type--workbook { color: var(--rl-l4); }
.rsc-rc-type--coming   { color: var(--rl-mid); }

.rsc-rc-body h3 {
  font-family:  var(--rl-font-display);
  font-size:    1.1rem;
  font-weight:  700;
  line-height:  1.25;
  color:        var(--rl-black);
}

.rsc-rc-body > p {
  font-size:   0.82rem;
  color:       var(--rl-mid);
  line-height: 1.65;
  flex:        1;
}

/* Value prop list */
.rsc-rc-props {
  list-style:     none;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
  margin-top:     0.25rem;
}

.rsc-rc-prop {
  display:     flex;
  align-items: flex-start;
  gap:         0.6rem;
  font-size:   0.78rem;
  color:       #444;
  line-height: 1.5;
}
.rsc-rc-prop::before {
  content:     '→';
  color:       var(--rl-accent);
  flex-shrink: 0;
  font-weight: 600;
  font-size:   0.72rem;
  margin-top:  1px;
}

/* Coming-soon pill */
.rsc-coming-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.25rem 0.65rem;
  background:     var(--rl-off-white);
  border:         1px solid var(--rl-border);
  color:          var(--rl-mid);
  margin-top:     auto;
  align-self:     flex-start;
}

/* Card footer */
.rsc-rc-footer {
  padding:         1.25rem 1.75rem;
  border-top:      1px solid var(--rl-border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
}

/* Gate indicator */
.rsc-rc-gate {
  display:        flex;
  align-items:    center;
  gap:            0.4rem;
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rsc-rc-gate--free  { color: var(--rl-l3); }
.rsc-rc-gate--gated { color: var(--rl-mid); }

.rsc-rc-gate-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}
.rsc-rc-gate-dot--free  { background: var(--rl-l3); }
.rsc-rc-gate-dot--gated { background: var(--rl-mid); }

/* Action link text (on anchor cards) */
.rsc-rc-action {
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--rl-accent);
  display:     flex;
  align-items: center;
  gap:         0.35rem;
  white-space: nowrap;
}
a.rsc-rc:hover .rsc-rc-action { text-decoration: underline; }

/* Availability text on coming soon cards */
.rsc-rc-avail {
  font-family:    var(--rl-font-mono);
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--rl-mid);
}

/* Notify button inside coming-soon card footer */
.rsc-notify-btn {
  display:     inline-flex;
  align-items: center;
  gap:         0.4rem;
  padding:     0.55rem 1rem;
  border:      1.5px solid var(--rl-border);
  background:  transparent;
  font-family: var(--rl-font-body);
  font-size:   0.78rem;
  color:       var(--rl-mid);
  cursor:      pointer;
  transition:  all 0.2s;
}
.rsc-notify-btn:hover { border-color: var(--rl-accent); color: var(--rl-accent); }

@media (max-width: 991.98px) {
  .rsc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .rsc-grid { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------
   NEWSLETTER  (dark background version)
   Different from ins-newsletter (warm bg) — inputs use
   semi-transparent dark styling.
   ---------------------------------------------------------------- */
.rsc-newsletter {
  background: var(--rl-near-black);
  padding:    80px 0;
}

.rsc-nl-inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           center;
}

.rsc-nl-left h2 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          var(--rl-off-white);
  margin-bottom:  0.75rem;
}
.rsc-nl-left h2 em { font-style: italic; color: var(--rl-accent); }

.rsc-nl-left p {
  font-size:   0.9rem;
  color:       rgba(245,242,236,.45);
  line-height: 1.75;
}

.rsc-nl-form {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.rsc-nl-row { display: flex; }

.rsc-nl-input {
  flex:        1;
  padding:     0.9rem 1.1rem;
  border:      1.5px solid rgba(255,255,255,.1);
  border-right: none;
  background:  rgba(255,255,255,.05);
  font-family: var(--rl-font-body);
  font-size:   0.9rem;
  color:       var(--rl-off-white);
  outline:     none;
  transition:  border-color 0.2s;
  -webkit-appearance: none;
}
.rsc-nl-input:focus { border-color: rgba(200,80,42,.6); }
.rsc-nl-input::placeholder { color: rgba(245,242,236,.25); }

.rsc-nl-btn {
  padding:     0.9rem 1.4rem;
  background:  var(--rl-accent);
  color:       #fff;
  border:      none;
  font-family: var(--rl-font-body);
  font-size:   0.88rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  background 0.2s;
  white-space: nowrap;
}
.rsc-nl-btn:hover { background: var(--rl-accent-d); }

.rsc-nl-note {
  font-size:   0.75rem;
  color:       rgba(245,242,236,.25);
  line-height: 1.5;
}

.rsc-nl-confirm {
  padding:    1rem 1.25rem;
  background: rgba(42,107,74,.1);
  border:     1px solid rgba(42,107,74,.2);
  font-size:  0.85rem;
  color:      #5aae80;
  margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
  .rsc-nl-inner { grid-template-columns: 1fr; gap: 2rem; }
  .rsc-nl-row   { flex-direction: column; }
  .rsc-nl-input { border-right: 1.5px solid rgba(255,255,255,.1); }
}


/* ----------------------------------------------------------------
   BOTTOM CTA  (warm background)
   Promotion candidate: rsc-btn-outline (light-bg bordered button).
   If used on other pages, move to main.css.
   ---------------------------------------------------------------- */
.rsc-cta {
  background: var(--rl-warm);
  padding:    80px 0;
  border-top: 1px solid var(--rl-border);
}

.rsc-cta-inner {
  max-width: 580px;
  margin:    0 auto;
}

.rsc-cta-inner h2 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(1.8rem, 3vw, 2.5rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  margin-bottom:  1rem;
  line-height:    1.15;
}
.rsc-cta-inner h2 em { font-style: italic; color: var(--rl-accent); }

.rsc-cta-inner p {
  font-size:     0.97rem;
  color:         var(--rl-mid);
  line-height:   1.7;
  margin-bottom: 2rem;
}

.rsc-cta-row {
  display:         flex;
  justify-content: center;
  gap:             1rem;
  flex-wrap:       wrap;
}

/* Light-bg bordered button — inverse of rl-btn-ghost (which is for dark bg).
   Promotion candidate → main.css as rl-btn-outline if used elsewhere. */
.rsc-btn-outline {
  display:         inline-flex;
  align-items:     center;
  background:      transparent;
  border:          1.5px solid var(--rl-border);
  color:           var(--rl-black);
  padding:         1rem 2rem;
  border-radius:   2px;
  font-size:       0.95rem;
  text-decoration: none;
  transition:      border-color 0.2s, color 0.2s;
}
.rsc-btn-outline:hover { border-color: var(--rl-accent); color: var(--rl-accent); }


/* ----------------------------------------------------------------
   NOTIFY MODAL
   First modal in the project. rsc-modal prefix.
   ---------------------------------------------------------------- */
.rsc-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(10,10,10,.6);
  z-index:         300;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
  backdrop-filter: blur(3px);
}

/* hidden attribute on the overlay — JS toggles it */
.rsc-modal-overlay[hidden] { display: none; }

.rsc-modal-box {
  background: var(--rl-off-white);
  max-width:  440px;
  width:      100%;
  padding:    2.5rem;
  position:   relative;
  animation:  rl-fadeUp 0.3s ease forwards;
}

.rsc-modal-close {
  position:   absolute;
  top:        1rem;
  right:      1rem;
  background: none;
  border:     none;
  font-size:  1.1rem;
  color:      var(--rl-mid);
  cursor:     pointer;
  line-height: 1;
  padding:    0.25rem;
  transition: color 0.2s;
}
.rsc-modal-close:hover { color: var(--rl-black); }

.rsc-modal-box h3 {
  font-family:   var(--rl-font-display);
  font-size:     1.35rem;
  font-weight:   700;
  margin-bottom: 0.5rem;
}

.rsc-modal-desc {
  font-size:     0.85rem;
  color:         var(--rl-mid);
  line-height:   1.7;
  margin-bottom: 1.5rem;
}

.rsc-modal-form {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.rsc-modal-input {
  padding:     0.85rem 1rem;
  border:      1.5px solid var(--rl-border);
  background:  var(--rl-warm);
  font-family: var(--rl-font-body);
  font-size:   0.9rem;
  color:       var(--rl-black);
  outline:     none;
  transition:  border-color 0.2s;
  -webkit-appearance: none;
  width:       100%;
}
.rsc-modal-input:focus { border-color: var(--rl-accent); }
.rsc-modal-input::placeholder { color: #bbb; }

.rsc-modal-submit {
  padding:     0.9rem;
  background:  var(--rl-accent);
  color:       #fff;
  border:      none;
  font-family: var(--rl-font-body);
  font-size:   0.9rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  background 0.2s;
}
.rsc-modal-submit:hover { background: var(--rl-accent-d); }

.rsc-modal-confirm {
  text-align: center;
  padding:    1rem 0;
  font-size:  0.9rem;
  color:      var(--rl-l3);
  line-height: 1.7;
}
.rsc-modal-confirm[hidden] { display: none; }