/* =========================================================
   Global Frontend UI System (Bootstrap 5 base)
   Canonical design source: resources/views/frontend/index.blade.php

   Notes:
   - This file is the single global stylesheet entrypoint.
   - It currently layers on top of existing theme styles.
   - Keep styles reusable, minimal, and component-oriented.
   ========================================================= */

/* Temporary compatibility bridge:
   The project previously used /frontend/css/custom.css for most components.
   Import it here so we keep visuals stable while standardizing markup.
   When refactor is complete, we can migrate remaining rules into this file
   and remove the import. */
@import url("/frontend/css/custom.css");

/* -------------------------
   Tokens / base typography
-------------------------- */
:root{
  --ui-bg: #ffffff;
  --ui-bg-soft: #f8fafc;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-border: rgba(15, 23, 42, 0.10);
  --ui-shadow-sm: 0 6px 22px rgba(15, 23, 42, 0.06);
  --ui-shadow-md: 0 14px 40px rgba(15, 23, 42, 0.10);
  --ui-radius: 18px;

  /* Reuse existing project primary variables if present */
  --ui-primary: var(--saas-primary, var(--hp-primary, #135568));
  --ui-primary-700: var(--saas-primary-700, var(--hp-primary-700, #0f3f4c));
}

body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ui-text);
}

/* -------------------------
   Global subtle animations
-------------------------- */
@keyframes uiFadeUp{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Fade-in page body (subtle) */
body{
  animation: uiFadeUp .35s ease-out both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* -------------------------
   Reusable sections/cards
-------------------------- */
.ui-section{
  padding: 56px 0;
  background: var(--ui-bg);
}
.ui-section--soft{
  background: var(--ui-bg-soft);
}

.ui-card{
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ui-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-md);
  border-color: rgba(19, 85, 104, 0.25);
}

.ui-card__header{
  padding: 22px 22px 0;
}
.ui-card__body{
  padding: 22px;
}

/* -------------------------
   Buttons/links (consistent)
-------------------------- */
.btn-saas-primary,
.btn-saas-outline{
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-saas-primary:hover,
.btn-saas-outline:hover{
  transform: translateY(-2px);
}

/* Normalize any anchor buttons on cards */
.ui-card a{
  text-decoration: none;
}

/* -------------------------
   Alerts
-------------------------- */
.ui-alert{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--ui-shadow-sm);
}

/* -------------------------
   Readable long-form content
-------------------------- */
.ui-prose{
  line-height: 1.75;
}
.ui-prose--lg{
  font-size: 1.05rem;
}
.ui-prose a{ text-decoration: underline; }
.ui-prose p:last-child{ margin-bottom: 0; }

/* -------------------------
   News showcase carousel (index)
-------------------------- */
.news-showcase{
  padding: 64px 0;
  background: transparent;
}
.news-showcase-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}
.news-showcase-kicker{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--ui-muted);
}
.news-showcase-title{
  margin: 6px 0 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}

.news-carousel{
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 12px;
  align-items: center;
  background: transparent;
}
.news-carousel-track{
  display: grid;
  grid-auto-flow: column;
  /* 4 cards visible on desktop */
  grid-auto-columns: calc((100% - (16px * 3)) / 4);
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}
/* Hide scrollbar (keep scroll functionality) */
.news-carousel-track{ scrollbar-width: none; }
.news-carousel-track::-webkit-scrollbar{ display: none; }

.news-carousel-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  color: rgba(15,23,42,0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.news-carousel-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15,23,42,0.14);
  color: rgba(15,23,42,0.92);
}

.news-carousel-card{
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  box-shadow: none;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  min-height: 360px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.news-carousel-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  border-color: rgba(19,85,104,0.25);
}
.news-carousel-media{
  height: 170px;
  background: transparent;
}
.news-carousel-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.news-carousel-body{
  padding: 16px 16px 0;
}
.news-carousel-card-title{
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.news-carousel-card-text{
  font-size: .92rem;
  color: var(--ui-muted);
  line-height: 1.6;
  margin: 0;
}
.news-carousel-footer{
  margin-top: auto;
  padding: 14px 16px 16px;
}
.news-carousel-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(15,23,42,0.82);
  font-weight: 800;
  text-decoration: none;
}
.news-carousel-link:hover{ text-decoration: underline; }
.news-carousel-link-icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 767.98px){
  .news-carousel{ grid-template-columns: 1fr; }
  .news-carousel-btn{ display:none; }
  .news-carousel-track{ grid-auto-columns: minmax(260px, 82vw); }
}

@media (max-width: 1199.98px) and (min-width: 768px){
  /* 2 cards visible on tablets */
  .news-carousel-track{
    grid-auto-columns: calc((100% - 16px) / 2);
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px){
  /* 3 cards visible on smaller desktops */
  .news-carousel-track{
    grid-auto-columns: calc((100% - (16px * 2)) / 3);
  }
}

/* -------------------------
   Scroll-in animations (reusable)
-------------------------- */
.ui-animate{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.ui-animate.ui-animate--scale{
  transform: translateY(14px) scale(.98);
}
.ui-animate.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.ui-animate.ui-animate--scale.is-visible{
  transform: translateY(0) scale(1);
}

/* -------------------------
   Quote / CTA (index) — modern + consistent
-------------------------- */
.quote-pro{
  padding: 72px 0;
  background: var(--ui-bg-soft);
}
.quote-pro-wrap{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,0.08);
  background: radial-gradient(1200px 600px at 10% 20%, rgba(19,85,104,0.10), transparent 55%),
              radial-gradient(900px 520px at 90% 10%, rgba(99,102,241,0.10), transparent 55%),
              #ffffff;
  box-shadow: 0 18px 60px rgba(15,23,42,0.10);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.quote-pro-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,0.08) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: .18;
  pointer-events:none;
}
.quote-pro-wrap::after{
  content:"";
  position:absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: -220px;
  background: radial-gradient(circle at 30% 30%, rgba(19,85,104,0.30), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(99,102,241,0.22), transparent 65%);
  filter: blur(8px);
  opacity: .75;
  transform: translateZ(0);
  animation: quoteGlow 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes quoteGlow{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-14px,-12px,0) scale(1.03); }
}
.quote-pro-left{
  padding: 10px 8px;
  position: relative;
  z-index: 1;
}
.quote-pro-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.quote-pro-subtitle{
  color: var(--ui-muted);
  margin: 0 0 18px;
  line-height: 1.7;
  font-size: 1.02rem;
}
.quote-pro-meta{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.quote-pro-meta-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(248,250,252,0.8);
}
.quote-pro-meta-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(19,85,104,0.10);
  color: var(--ui-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.quote-pro-meta-label{
  font-size: .85rem;
  color: rgba(15,23,42,0.60);
  font-weight: 800;
  margin-bottom: 2px;
}
.quote-pro-meta-value{
  font-weight: 900;
  color: rgba(15,23,42,0.88);
  text-decoration: none;
}
.quote-pro-bullets{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  margin-top: 16px;
}
.quote-pro-bullet{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  color: rgba(15,23,42,0.78);
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .92rem;
}
.quote-pro-bullet i{ color: #10b981; }

.quote-pro-card{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.10);
  background: #ffffff;
  box-shadow: 0 14px 44px rgba(15,23,42,0.10);
  padding: 20px;
  height: 100%;
  position: relative;
  z-index: 1;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.quote-pro-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(15,23,42,0.14);
  border-color: rgba(19,85,104,0.22);
}
.quote-pro-card-head{
  margin-bottom: 14px;
}
.quote-pro-card-title{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.quote-pro-card-subtitle{
  margin: 0;
  color: var(--ui-muted);
  line-height: 1.6;
}

@media (max-width: 575.98px){
  .quote-pro{ padding: 54px 0; }
  .quote-pro-wrap{ padding: 18px; }
}