/* ==========================================================
   VersaForge -Inner Pages (Impact + Growth)
   ----------------------------------------------------------
   WHY THIS FILE EXISTS
   Same reason as ranking-service.css: the shared style.css is a
   *static, pre-compiled* Tailwind build, so any utility class not
   already in that build does nothing at runtime.

   These two pages load, in order:
     tokens.css            -> design tokens
     style.css             -> shared site build + components
     ranking-service.css   -> REUSED: scroll-reveal, accordion,
                              button shine, counters, form-error and
                              the Tailwind utilities the new design
                              system needs. Nothing is duplicated here.
     inner-pages.css       -> ONLY the components the Impact/Growth
                              layouts need that the Ranking Service
                              page never used (image clusters,
                              collages, points grids, strategy cards,
                              highlight badge, hero composition).

   Every value below is taken from the existing design system
   (royal purple #6A58E4, blue #4A86F5, border #E6ECF5, ink #111827,
   muted #5B6475). No new design language is introduced.
   ========================================================== */


/* ==========================================================
   0. MISSING GRID UTILITY
   growth.php / impact.php use lg:grid-cols-[1.1fr_0.9fr] on
   several split-row sections, but only the reversed ratios
   (0.9fr_1.1fr, 1fr_0.9fr, 0.85fr_1.15fr) were ever defined in
   ranking-service.css. Without this rule the browser ignores
   the class entirely and those rows stay stuck in grid-cols-1
   (single column) at every screen width, so the split layout
   never appears on desktop.
   ========================================================== */
@media (min-width: 1024px) {
  .lg\:grid-cols-\[1\.1fr_0\.9fr\] { grid-template-columns: 1.1fr 0.9fr; }
}


/* ==========================================================
   1. HERO -layered two-image composition
   Mirrors the Ranking Service hero frame proportions exactly,
   but composed from each page's OWN concept images.
   ========================================================== */
.vf-hero-visual {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: 480px;
}
@media (min-width: 640px) { .vf-hero-visual { height: 540px; } }
@media (min-width: 768px) { .vf-hero-visual { height: 600px; } }

.vf-hero-visual .vf-hero-base {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  overflow: hidden;
 /* border: 1px solid var(--vf-border);
  box-shadow: 0 25px 60px -15px rgba(106, 88, 228, .18);*/
}
.vf-hero-visual .vf-hero-base img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Offset accent image -hidden on the smallest screens so it can
   never crowd or overflow the frame at 320-430px. */
.vf-hero-visual .vf-hero-accent {
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  width: 44%;
  max-width: 220px;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 4px solid #FFFFFF;
  box-shadow: 0 25px 60px -12px rgba(106, 88, 228, .28);
  background: #FFFFFF;
}
.vf-hero-visual .vf-hero-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 479px) {
  .vf-hero-visual { height: 380px; }
  .vf-hero-visual .vf-hero-accent { display: none; }
}


/* ==========================================================
   2. IMAGE CLUSTER -two overlapping images
   ========================================================== */
.vf-cluster {
  position: relative;
  width: 100%;
  /*padding-bottom: 3rem;
  padding-right: 3rem;*/
}
.vf-cluster .vf-cluster-a,
.vf-cluster .vf-cluster-b {
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--vf-border);
  background: #FFFFFF;
}
.vf-cluster .vf-cluster-a {
  width: 100%;
  box-shadow: 0 25px 60px -15px rgba(106, 88, 228, .15);
}
.vf-cluster .vf-cluster-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  border: 4px solid #FFFFFF;
  box-shadow: 0 25px 60px -12px rgba(106, 88, 228, .25);
}
.vf-cluster img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .7s ease;
}
.vf-cluster:hover img { transform: scale(1.04); }

@media (max-width: 479px) {
  .vf-cluster { padding-bottom: 2rem; padding-right: 2rem; }
  .vf-cluster .vf-cluster-b { width: 56%; }
}


/* ==========================================================
   3. COLLAGE -3-image grid (Case Studies)
   ========================================================== */
.vf-collage3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.vf-collage3 .vf-collage-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.vf-collage3 figure {
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--vf-border);
  box-shadow: 0 20px 50px -15px rgba(106, 88, 228, .15);
  flex: 1 1 auto;
}
.vf-collage3 img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}
.vf-collage3 figure:hover img { transform: scale(1.05); }


/* ==========================================================
   4. COLLAGE -1 wide + 2 below (Public Relations)
   ========================================================== */
.vf-collage-stack { display: flex; flex-direction: column; gap: 1rem; }
.vf-collage-stack .vf-collage-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vf-collage-stack figure {
  margin: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--vf-border);
  box-shadow: 0 20px 50px -15px rgba(106, 88, 228, .15);
}
.vf-collage-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}
.vf-collage-stack figure:hover img { transform: scale(1.05); }


/* ==========================================================
   5. ROTATED IMAGE + accent shape
   ========================================================== */
.vf-rotated { position: relative; display: block; padding: 1rem; }
.vf-rotated img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.5rem;
  border: 1px solid var(--vf-border);
  box-shadow: 0 25px 60px -15px rgba(106, 88, 228, .18);
  transform: rotate(-2deg);
  transition: transform .7s ease;
}
.vf-rotated:hover img { transform: rotate(0deg) scale(1.02); }
.vf-rotated .vf-shape {
  position: absolute;
  inset: 1.75rem 0 0 1.75rem;
  z-index: 0;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(106, 88, 228, .12), rgba(74, 134, 245, .08));
  transform: rotate(3deg);
}


/* ==========================================================
   6. POINTS GRID -2-column check list
   ========================================================== */
.vf-points-grid,
.vf-feat-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .vf-points-grid,
  .vf-feat-2col { grid-template-columns: 1fr 1fr; }
}
.vf-points-grid li,
.vf-feat-2col li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
}
.vf-points-grid .ck,
.vf-feat-2col .ck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .1rem;
  border-radius: .5rem;
  background: rgba(16, 185, 129, .1);
  color: #059669;
  font-size: .8rem;
  transition: background .3s ease, color .3s ease;
}
.vf-points-grid li:hover .ck,
.vf-feat-2col li:hover .ck { background: #10B981; color: #FFFFFF; }
.vf-points-grid .tx,
.vf-feat-2col .tx {
  font-size: 1rem;
  line-height: 1.6;
  color: #5B6475;
  min-width: 0;
}


/* ==========================================================
   7. CHECKLIST -single column, bold lead-in
   (Influencer strategies + PPC list)
   ========================================================== */
.vf-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.vf-checklist li { display: flex; align-items: flex-start; gap: .875rem; min-width: 0; }
.vf-checklist .ck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  margin-top: .1rem;
  border-radius: .625rem;
  background: rgba(106, 88, 228, .1);
  color: #6A58E4;
  font-size: .85rem;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.vf-checklist li:hover .ck { background: #6A58E4; color: #FFFFFF; transform: scale(1.06); }
.vf-checklist .tx { font-size: 1rem; line-height: 1.65; color: #5B6475; min-width: 0; }
.vf-checklist .tx b { color: #111827; font-weight: 700; }
.vf-checklist p { margin: 0; font-size: .875rem; line-height: 1.65; color: #5B6475; min-width: 0; }

/* Dark-band variant (Growth > Affiliate & Influencer Strategies) */
.vf-checklist--dark .ck { background: rgba(192, 132, 252, .12); color: #C084FC; }
.vf-checklist--dark li:hover .ck { background: #C084FC; color: #0B0F19; }
.vf-checklist--dark .tx,
.vf-checklist--dark p { color: #94A3B8; }
.vf-checklist--dark .tx b { color: #FFFFFF; }


/* ==========================================================
   8. HIGHLIGHT -badge over image (PPC)
   ========================================================== */
.vf-highlight { position: relative; padding-top: 2rem; }
.vf-highlight .vf-highlight-pic {
  border-radius: 1.5rem;
  overflow: hidden;
 
}
.vf-highlight .vf-highlight-pic img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .7s ease;
}
.vf-highlight:hover .vf-highlight-pic img { transform: scale(1.04); }
.vf-highlight .vf-highlight-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: max-content;
  max-width: 90%;
  padding: .75rem 1.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #6A58E4, #4A86F5);
  color: #FFFFFF;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 15px 35px -10px rgba(106, 88, 228, .5);
}
@media (max-width: 479px) {
  .vf-highlight .vf-highlight-badge {
    font-size: .75rem;
    padding: .625rem 1rem;
    max-width: 96%;
  }
}


/* ==========================================================
   9. STRATEGY CARDS -icon + heading + list + proposal link
   ========================================================== */
.vf-strategy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .vf-strategy-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .vf-strategy-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.75rem; } }

.vf-strategy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: #FFFFFF;
  border: 1px solid var(--vf-border);
  box-shadow: 0 20px 50px -12px rgba(106, 88, 228, .05);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.vf-strategy-card:hover {
  transform: translateY(-.25rem);
  border-color: rgba(106, 88, 228, .3);
  box-shadow: 0 25px 60px -10px rgba(106, 88, 228, .16);
}
.vf-strategy-card .vf-strategy-head {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.25rem;
}
.vf-strategy-card .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: rgba(106, 88, 228, .1);
  color: #6A58E4;
  font-size: 1.25rem;
  box-shadow: var(--vf-shadow-sm);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.vf-strategy-card:hover .ic { background: #6A58E4; color: #FFFFFF; transform: scale(1.05); }
.vf-strategy-card h5 {
  margin: 0;
  font-family: var(--vf-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #111827;
  min-width: 0;
}
.vf-strategy-card ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .625rem;
  flex: 1 1 auto;
}
.vf-strategy-card ul li { display: flex; align-items: flex-start; gap: .625rem; min-width: 0; }
.vf-strategy-card ul .ck { color: #6A58E4; font-size: .9rem; flex-shrink: 0; margin-top: .12rem; }
.vf-strategy-card ul .tx { font-size: .8125rem; line-height: 1.55; color: #5B6475; min-width: 0; }

.vf-strategy-card .proposal {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #F1F5F9;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6A58E4;
  text-decoration: none;
  transition: color .3s ease;
}
.vf-strategy-card .proposal .pl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(106, 88, 228, .1);
  color: #6A58E4;
  font-size: .7rem;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.vf-strategy-card .proposal:hover { color: #4A86F5; }
.vf-strategy-card .proposal:hover .pl {
  background: #6A58E4;
  color: #FFFFFF;
  transform: rotate(90deg);
}


/* ==========================================================
   10. SAFETY -no horizontal overflow at any width
   ========================================================== */
.vf-cluster img,
.vf-collage3 img,
.vf-collage-stack img,
.vf-rotated img,
.vf-highlight img,
.vf-hero-visual img { max-width: 100%; }


/* ==========================================================
   11. REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .vf-cluster img,
  .vf-collage3 img,
  .vf-collage-stack img,
  .vf-rotated img,
  .vf-highlight img,
  .vf-strategy-card,
  .vf-strategy-card .ic,
  .vf-strategy-card .proposal .pl { transition: none; }
  .vf-cluster:hover img,
  .vf-collage3 figure:hover img,
  .vf-collage-stack figure:hover img,
  .vf-highlight:hover .vf-highlight-pic img { transform: none; }
  .vf-rotated img { transform: rotate(-2deg); }
  .vf-rotated:hover img { transform: rotate(-2deg); }
  .vf-strategy-card:hover { transform: none; }
}