/* web-text.css — background panel + tighter spacing for #web .web-text
   and the gap from that box down to .web-banner.
   Does not change section padding, the "-- Web --" h1, tiles, captions, or grid gaps.
   Local only. Linked after style.min.css / hero-mock.css / menu-hint.css.
   Variant A (default): dark charcoal gradient, #ef5425 left border, soft orange glow.
   Variant B: add class "web-text--tint" on div.web-text for an orange-tinted panel.
*/

/* --- Spacing: text block and text → banner only --- */
#web .web-wrap {
  padding-bottom: 1rem; /* was 3vh (~27px desktop / ~25px phone) */
}

#web .web-text h2 {
  margin-top: 0;
  margin-bottom: 0.75rem; /* was 5vh (~45 / ~42) */
  color: #f9f9f9;
}

#web .web-text p {
  margin: 0;
  padding: 0; /* was 10px from the global p rule */
  color: #e8e8e8;
}

#web .web-banner.web-banner--full {
  margin-top: 1rem; /* was 2vh (~18 / ~17); with wrap pad 1rem, text→banner ~32px vs ~45px */
}

/* --- Panel: Variant A (active) --- */
#web .web-text {
  background: linear-gradient(165deg, #2c2c2c 0%, #1c1c1c 52%, #151515 100%);
  color: #f1f1f1;
  border-radius: 14px;
  border-left: 4px solid #ef5425;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(239, 84, 37, 0.16),
    0 10px 28px rgba(239, 84, 37, 0.14);
  padding: 1.25rem 1.15rem; /* phone was 0; room for the panel */
}

@media (min-width: 900px) {
  #web .web-text {
    padding: 1.5rem 1.85rem; /* was 20px all around */
  }
}

/* --- Panel: Variant B (opt-in class) --- */
#web .web-text.web-text--tint {
  background: linear-gradient(165deg, #3d2a22 0%, #2a1c18 55%, #1f1512 100%);
  border-left: none;
  border: 1px solid rgba(239, 84, 37, 0.48);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.22),
    0 0 26px rgba(239, 84, 37, 0.18),
    inset 0 1px 0 rgba(255, 186, 150, 0.1);
}