/* ══════════════════════════════════════════════════════════════
   Breeze Product Features — page-specific styles
   Scoped to /resources/product-features/index.html only.
   Covers card layouts for:
     - "Industries We Serve" (.pf-ind-*)
     - "Trusted by Growing Businesses" (.pf-trust-*)
   These classes previously had zero matching CSS anywhere on the
   site, so both sections rendered as unstyled plain text/lists.
   ══════════════════════════════════════════════════════════════ */

/* ---------- Industries We Serve ---------- */
.pf-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:20px;
}
.pf-ind-card{
  position:relative;
  background:#fff;
  border:1.5px solid #E2E8F0;
  border-radius:18px;
  padding:26px 24px 24px;
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.pf-ind-card:hover{
  border-color:#93C5FD;
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(37,99,235,.10);
}
.pf-ind-icon{
  width:46px;height:46px;
  border-radius:12px;
  background:var(--blue-50,#EFF6FF);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  margin-bottom:14px;
}
.pf-ind-badge{
  display:inline-block;
  align-self:flex-start;
  font-family:Sora,sans-serif;
  font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-600,#2563EB);
  background:var(--blue-50,#EFF6FF);
  border:1px solid var(--blue-100,#DBEAFE);
  border-radius:100px;
  padding:3px 10px;
  margin-bottom:10px;
}
.pf-ind-card h3{
  font-family:Sora,sans-serif;
  font-size:16.5px;font-weight:800;
  color:var(--gray-900,#0F172A);
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.pf-ind-desc{
  font-size:13.5px;
  color:var(--gray-600,#475569);
  line-height:1.65;
  margin:0 0 14px;
}
.pf-ind-points{
  list-style:none;margin:0 0 16px;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.pf-ind-points li{
  font-size:12.5px;font-weight:600;
  color:var(--gray-700,#334155);
  padding-left:18px;
  position:relative;
}
.pf-ind-points li::before{
  content:'';position:absolute;left:0;top:7px;
  width:6px;height:6px;border-radius:50%;
  background:var(--blue-500,#3B82F6);
}
.pf-ind-rec{
  font-size:12px;line-height:1.5;
  color:var(--gray-600,#475569);
  background:#F8FAFC;
  border:1px solid #EEF2F7;
  border-radius:10px;
  padding:9px 12px;
  margin-bottom:14px;
}
.pf-ind-rec span{font-weight:800;color:var(--gray-800,#1E293B);}
.pf-ind-cta{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:5px;
  font-family:Sora,sans-serif;
  font-size:13px;font-weight:700;
  color:var(--blue-600,#2563EB);
  text-decoration:none;
  transition:gap .15s ease,color .15s ease;
}
.pf-ind-cta:hover{color:var(--blue-700,#1D4ED8);gap:8px;}

/* ---------- Trusted by Growing Businesses ---------- */
.pf-trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:18px;
}
.pf-trust-card{
  background:#fff;
  border:1.5px solid #EEF2F7;
  border-radius:16px;
  padding:22px 20px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.pf-trust-card:hover{
  border-color:#BFDBFE;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(16,42,97,.07);
}
.pf-trust-icon{font-size:26px;margin-bottom:10px;line-height:1;}
.pf-trust-card h3{
  font-family:Sora,sans-serif;
  font-size:15px;font-weight:800;
  color:var(--gray-900,#0F172A);
  margin:0 0 8px;
}
.pf-trust-card p{
  font-size:13px;line-height:1.6;
  color:var(--gray-600,#475569);
  margin:0 0 14px;
}
.pf-trust-badges{display:flex;flex-wrap:wrap;gap:6px;}
.pf-trust-badge{
  font-family:Sora,sans-serif;
  font-size:10.5px;font-weight:700;
  color:var(--gray-600,#475569);
  background:#F8FAFC;
  border:1px solid #EEF2F7;
  border-radius:100px;
  padding:4px 10px;
}

/* ---------- Mobile ---------- */
@media(max-width:480px){
  .pf-ind-card{padding:22px 20px 20px;}
  .pf-ind-card h3{font-size:15.5px;}
  .pf-trust-card{padding:18px 16px;}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES — Feature Explorer widget
   These override features.css (loaded before this file). Two
   issues reported on real mobile devices:

   1. Product tab sub-labels (e.g. "Retail Execution",
      "Distributor Mgmt") were getting clipped/invisible at narrow
      widths. Root cause: .tab-badge is a flex item inside a
      column-direction flex parent (.product-tab); flex items
      default to min-width:auto, which prevents them shrinking
      below their unwrapped text width — combined with
      .product-tab's fixed min-width and overflow:hidden, longer
      badge text was being cut off instead of wrapping. Fix: allow
      the badge to shrink/wrap, and let tabs flex to fit 2-per-row
      instead of relying on a hard min-width floor.

   2. The category "N features" count pill sat too close to the
      card edge on narrow screens when the category title wrapped
      to multiple lines, looking cramped/overlapping nearby fixed
      UI (WhatsApp/Book a Demo buttons). Fix: stack the count pill
      below the title on mobile instead of forcing it into the same
      row as a long, potentially 2-3 line title.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .product-tab{min-width:0;flex:1 1 calc(50% - 0.45rem);}
  .product-tab .tab-badge{
    min-width:0;max-width:100%;
    white-space:normal;text-align:center;line-height:1.3;
    overflow-wrap:break-word;word-break:break-word;
  }
}
@media(max-width:480px){
  .product-tab{padding:0.65rem 0.5rem 0.55rem;}
  .product-tab .tab-badge{font-size:0.56rem;padding:0.16rem 0.45rem;}
  .product-tab .tab-label{font-size:0.8rem;}

  .category-header{flex-wrap:wrap;row-gap:8px;}
  .category-header > div:not(.category-icon):not(.category-count){
    flex:1 1 calc(100% - 66px);min-width:0;
  }
  .category-count{margin-left:66px;}
}