/* Info block style 2 — "Who we are" (redesigned 29 Sep 2026, one photo). Loaded by
   front/global-sections/InfoBlock/style_2.blade.php. Plain file (no Vite build in this copy); theme tokens only.
   The photo zooms on hover; reduced motion respected. */

.ib2__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .ib2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ib2__grid > .ib2__media { order: -1; }              /* photo left, text right on desktop; text first on phones */
  .ib2__grid--text-only { grid-template-columns: minmax(0, 46rem); }
}

/* ---- Text ---------------------------------------------------------------- */
.ib2__title { font-size: var(--text-3xl); line-height: 1.15; }
.ib2__text p { color: var(--color-text); font-size: var(--text-md); line-height: 1.75; }
.ib2__text p:first-child { font-size: var(--text-lg); color: var(--navy-700); font-weight: var(--weight-medium, 500); }
.ib2__text p + p { margin-top: var(--space-4); }
.ib2__actions { padding-top: var(--space-2); }
.ib2__cta { gap: 0.55rem; }
.ib2__cta .icon { width: 1rem; height: 1rem; transition: transform var(--duration-base) var(--ease-out); }
.ib2__cta:hover .icon, .ib2__cta:focus-visible .icon { transform: translateX(4px); }

/* ---- Photo --------------------------------------------------------------- */
.ib2__media { position: relative; isolation: isolate; padding: 2.5rem 1.5rem 1.5rem; }

.ib2__dots {                                           /* dot pattern peeking out top-right */
  position: absolute; z-index: -1;
  right: 0; top: 0.5rem; width: 9rem; height: 7rem;
  background-image: radial-gradient(var(--navy-200) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.9;
}

.ib2__frame {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-xl);
  background: var(--n-100);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--duration-slow) var(--ease-out);
}
.ib2__frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}
@media (min-width: 900px) { .ib2__frame { aspect-ratio: 1 / 1; } }   /* taller beside the long text column */
.ib2__frame:hover { box-shadow: 0 24px 56px rgba(4, 31, 21, 0.24); }
.ib2__frame:hover img { transform: scale(1.09); filter: saturate(1.08); }

.ib2__caption {                                        /* caption on a navy gradient at the foot of the photo */
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4rem var(--space-6) var(--space-5);
  background: linear-gradient(to top, rgba(4, 31, 21, 0.9), rgba(4, 31, 21, 0.45) 55%, transparent);
  color: var(--n-0);
  font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.45;
  pointer-events: none;
}

/* ---- Experience card (overlaps the photo's top edge) ------------------- */
.ib2__exp {
  position: absolute; z-index: 3; top: 0; right: 0;
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 17rem;
  padding: var(--space-4) var(--space-5);
  background: var(--n-0);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
  animation: ib2-float 6s ease-in-out infinite;
}
.ib2__exp--inline { position: static; animation: none; max-width: none; margin-top: var(--space-6); box-shadow: var(--shadow-md); }
.ib2__exp-num {
  font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-black);
  line-height: 1; color: var(--color-primary);
}
.ib2__exp-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--navy-700); }
@keyframes ib2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 599px) {
  .ib2__media { padding: 2.25rem 0.75rem 0.75rem; }
  .ib2__exp { padding: var(--space-3) var(--space-4); max-width: 13.5rem; }
  .ib2__exp-num { font-size: var(--text-3xl); }
  .ib2__caption { padding: 3rem var(--space-4) var(--space-4); font-size: var(--text-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .ib2__frame, .ib2__frame img, .ib2__cta .icon { transition: none; }
  .ib2__frame:hover img { transform: none; filter: none; }
  .ib2__exp { animation: none; }
}