/* AccountHab — About Control public section styles.
   Deliberately a dedicated stylesheet (per the approved architecture:
   "Avoid modifying buyer.css just to style About") rather than growing
   buyer.css for a single page's section-type layouts. Reuses buyer.css's
   own design tokens (--blue-900/--blue-700/--blue-50/--border/--text-
   muted/--shadow-md/--page-bg, all defined on :root in buyer.css, which
   this page always loads first — see resources/views/public/about.blade.php's
   @section('styles')) rather than redefining a second color palette, and
   reuses its .panel/.section-title classes for the empty-state and the
   shared "card" look every section partial below builds on
   (.about-panel mirrors .panel exactly, under its own name so this
   stylesheet has no hidden dependency on buyer.css's class staying
   unchanged).

   Breakpoints match buyer.css's own convention (900px tablet, 600px
   mobile) rather than inventing new ones. */

.about-page{padding-top:8px}

.about-section{margin-bottom:22px}
.about-section:last-child{margin-bottom:0}

.about-panel{background:var(--white,#fff);border:1px solid var(--border,#e3e5e8);border-radius:10px;padding:28px;box-shadow:var(--shadow-md,0 4px 16px rgba(24,55,100,.08))}

.about-heading{font-size:20px;font-weight:700;margin:0 0 14px;color:var(--text,#202124)}
.about-heading--center{text-align:center}

.about-rich-text-body{font-size:15px;line-height:1.7;color:var(--text,#202124)}
.about-rich-text-body p{margin:0 0 14px}
.about-rich-text-body p:last-child{margin-bottom:0}
.about-rich-text-body h2{font-size:19px;margin:20px 0 10px}
.about-rich-text-body h3{font-size:16px;margin:16px 0 8px}
.about-rich-text-body ul,.about-rich-text-body ol{margin:0 0 14px;padding-left:22px}
.about-rich-text-body blockquote{margin:0 0 14px;padding:10px 16px;border-left:3px solid var(--blue-500,#3b82f6);background:var(--blue-50,#eef4ff);color:var(--text-muted,#777)}
.about-rich-text-body a{color:var(--blue-700,#1769e0);text-decoration:underline}

/* Hero */
.about-hero{border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--blue-900,#092e6b),var(--blue-700,#1769e0));background-size:cover;background-position:center}
.about-hero-inner{padding:64px 32px;text-align:center;color:#fff;max-width:720px;margin:0 auto}
.about-hero-title{font-size:32px;font-weight:800;margin:0 0 12px}
.about-hero-subtitle{font-size:17px;margin:0 0 10px;opacity:.92}
.about-hero-body{font-size:15px;margin:0 0 22px;opacity:.85}
.about-hero-btn{display:inline-block;background:#fff;color:var(--blue-800,#123f86);font-weight:700;padding:12px 26px;border-radius:8px;font-size:14px}
.about-hero-btn:hover{opacity:.92}

/* Image / Full-width Image */
.about-image-img{width:100%;border-radius:8px;display:block;margin-bottom:12px}
.about-image-caption{font-size:13px;color:var(--text-muted,#777);text-align:center;margin:0}
.about-full-width-image-img{width:100%;display:block;max-height:420px;object-fit:cover}
.about-full-width-image-caption-wrap{border-top-left-radius:0;border-top-right-radius:0;text-align:center}

/* Text + Image */
.about-text-image-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.about-text-image--image-right .about-text-image-media{order:2}
.about-text-image--image-right .about-text-image-text{order:1}
.about-text-image-media img{width:100%;border-radius:8px;display:block}

/* Feature Cards */
.about-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:6px}
.about-card{background:var(--page-bg,#eef4ff);border-radius:8px;padding:20px;text-align:center}
.about-card-icon{font-size:28px;margin-bottom:10px}
.about-card-heading{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--text,#202124)}
.about-card-body{font-size:13px;color:var(--text-muted,#777);margin:0;line-height:1.6}

/* Button / CTA */
.about-cta-panel{text-align:center}
.about-cta-body{font-size:15px;color:var(--text-muted,#777);margin:0 0 20px}
.about-cta-btn{display:inline-block;padding:12px 28px;border-radius:8px;font-weight:700;font-size:14px}
.about-cta-btn--primary{background:var(--blue-700,#1769e0);color:#fff}
.about-cta-btn--primary:hover{background:var(--blue-800,#123f86)}
.about-cta-btn--secondary{background:var(--blue-50,#eef4ff);color:var(--blue-800,#123f86);border:1px solid var(--border,#e3e5e8)}

/* Divider / Spacer */
.about-divider{width:100%}
.about-divider--sm{height:16px}
.about-divider--md{height:36px}
.about-divider--lg{height:64px}

@media (max-width:900px){
  .about-hero-inner{padding:48px 24px}
  .about-hero-title{font-size:26px}
  .about-text-image-grid{grid-template-columns:1fr;gap:20px}
  .about-text-image--image-right .about-text-image-media,
  .about-text-image--image-right .about-text-image-text{order:initial}
}

@media (max-width:600px){
  .about-panel{padding:20px}
  .about-hero-inner{padding:36px 18px}
  .about-hero-title{font-size:22px}
  .about-cards-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Built-in default About content (resources/views/public/about/default.blade.php)
   Everything below is scoped under .about-default (or uses an
   about-* class only that partial uses), so nothing here can affect other
   pages or the admin-managed section partials above. Uses a slightly
   darker muted text color than buyer.css's --text-muted (#777) so body
   copy on the light card backgrounds keeps AA contrast.
   ========================================================================== */
.about-default{--about-muted:#4b5563;--about-focus:#1769e0}
.about-default .about-lead{font-size:15px;line-height:1.7;color:var(--about-muted);text-align:center;max-width:720px;margin:0 auto 18px}
.about-default .about-subheading{font-size:17px;font-weight:700;margin:6px 0 12px;color:var(--blue-900,#092e6b)}

/* Hero additions */
.about-default-hero .about-hero-subtitle{opacity:1;line-height:1.6}
.about-hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.about-default-hero .about-hero-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;border:2px solid #fff}
.about-default-hero .about-hero-btn--ghost{background:transparent;color:#fff}
.about-default-hero .about-hero-btn--ghost:hover{background:rgba(255,255,255,.14);opacity:1}

/* Feature cards (left-aligned variant with SVG icon) */
.about-default .about-cards-grid--left{grid-template-columns:repeat(3,minmax(0,1fr))}
.about-default .about-card--left{text-align:left;background:var(--page-bg,#eef4ff);border:1px solid var(--border,#e3e5e8)}
.about-default .about-card-svg{width:28px;height:28px;fill:var(--blue-700,#1769e0);margin-bottom:10px;display:block}
.about-default .about-card-heading{font-size:16px;margin:0 0 6px}
.about-default .about-card-body{font-size:14px;color:var(--about-muted)}

/* Numbered steps */
.about-steps{list-style:none;counter-reset:about-step;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.about-step{counter-increment:about-step;position:relative;background:var(--page-bg,#eef4ff);border:1px solid var(--border,#e3e5e8);border-radius:8px;padding:56px 16px 16px}
.about-step::before{content:counter(about-step);position:absolute;top:14px;left:16px;width:30px;height:30px;border-radius:50%;background:var(--blue-700,#1769e0);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.about-step-title{font-size:15px;font-weight:700;margin:0 0 6px;color:var(--text,#202124)}
.about-step-body{font-size:14px;line-height:1.6;margin:0;color:var(--about-muted)}
.about-seller-box{margin-top:26px;padding-top:22px;border-top:1px solid var(--border,#e3e5e8)}
.about-seller-link{margin:14px 0 0}
.about-text-link{color:var(--blue-700,#1769e0);font-weight:700;text-decoration:underline}
.about-text-link:hover{color:var(--blue-800,#123f86)}

/* Trust list */
.about-check-list{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;gap:12px}
.about-check-list li{position:relative;padding-left:30px;font-size:15px;line-height:1.65;color:var(--text,#202124)}
.about-check-list li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--success,#16a34a)}
.about-check-list li::after{content:"";position:absolute;left:6px;top:9px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Help / CTA buttons */
.about-help-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0}
.about-default .about-cta-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* FAQ — native details/summary */
.about-faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.about-faq-item{border:1px solid var(--border,#e3e5e8);border-radius:8px;background:#fff}
.about-faq-item summary{cursor:pointer;padding:14px 44px 14px 16px;font-weight:700;font-size:15px;color:var(--text,#202124);list-style:none;position:relative;min-height:44px}
.about-faq-item summary::-webkit-details-marker{display:none}
.about-faq-item summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:700;color:var(--blue-700,#1769e0)}
.about-faq-item[open] summary::after{content:"\2212"}
.about-faq-item p{margin:0;padding:0 16px 16px;font-size:14px;line-height:1.65;color:var(--about-muted)}

/* Keyboard focus */
.about-default a:focus-visible,
.about-default summary:focus-visible{outline:3px solid var(--about-focus);outline-offset:2px;border-radius:6px}
.about-default-hero a:focus-visible{outline-color:#fff}

@media (max-width:900px){
  .about-default .about-cards-grid--left{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .about-default .about-cards-grid--left{grid-template-columns:1fr}
  .about-steps{grid-template-columns:1fr}
  .about-hero-actions,.about-help-actions{flex-direction:column;align-items:stretch}
  .about-default .about-heading{font-size:18px}
  .about-default-hero .about-hero-subtitle{font-size:15px}
}