/*
 * Bridge Consulting — Component Styles
 * ======================================
 * Buttons, cards, section headers, badges,
 * and the bridge decorative system.
 * Loaded after base.css.
 */

/* =============================================
 * BUTTONS
 * ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-7);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-fast),
    box-shadow var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(1px);
}

/* Shimmer effect on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 500ms var(--ease-out);
}

.btn:hover::after {
  transform: translateX(100%);
}

/* --- Primary Button --- */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-subtle);
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* --- Secondary Button --- */
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* --- Secondary Ghost (white outline, for dark backgrounds) --- */
.btn-ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* --- CTA Button --- */
.btn-cta {
  background-color: var(--color-cta);
  color: var(--color-white);
  border-color: var(--color-cta);
  box-shadow: var(--shadow-subtle);
}

.btn-cta:hover {
  background-color: var(--color-cta-light);
  border-color: var(--color-cta-light);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(42, 127, 142, 0.32);
}

/* --- Gold Accent Button --- */
.btn-gold {
  background-color: var(--color-gold);
  color: var(--color-primary);
  border-color: var(--color-gold);
  font-weight: var(--weight-bold);
}

.btn-gold:hover {
  background-color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* --- Button Sizes --- */
.btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

/* Button with arrow icon */
.btn .btn-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* =============================================
 * CARDS — BASE
 * ============================================= */

.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* Subtle gold top line on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-gold-sheen);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.card:hover::before {
  opacity: 1;
}

/* =============================================
 * TEAM CARD
 * ============================================= */

.team-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border-light);
  text-align: center;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  position: relative;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}

.team-card__photo-wrap {
  display: inline-block;
  position: relative;
  margin-bottom: var(--space-5);
}

/* Circular photo with gold ring on hover */
.team-card__photo {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 3px solid var(--color-border);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.team-card:hover .team-card__photo {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 4px var(--color-gold-subtle), var(--shadow-gold);
}

/* Subtle photo overlay ring */
.team-card__photo-wrap::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gold-glow);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.team-card:hover .team-card__photo-wrap::after {
  opacity: 1;
}

.team-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark-text);
  margin-bottom: var(--space-1);
}

.team-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-gold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.team-card__region {
  font-size: var(--text-xs);
  color: var(--color-mid-gray);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-mid-gray);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
}

/* =============================================
 * SERVICE CARD
 * ============================================= */

.service-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: var(--color-gold);
}

.service-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gold-subtle);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-normal), transform var(--transition-normal);
  flex-shrink: 0;
}

.service-card:hover .service-card__icon {
  background-color: var(--color-gold-glow);
  transform: scale(1.08);
}

.service-card__icon img,
.service-card__icon svg {
  width: 28px;
  height: 28px;
}

.service-card__heading {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark-text);
  line-height: var(--leading-snug);
}

.service-card__description {
  font-size: var(--text-base);
  color: var(--color-mid-gray);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast), gap var(--transition-fast);
  margin-top: auto;
}

.service-card__link:hover {
  color: var(--color-gold);
  gap: var(--space-3);
}

/* =============================================
 * INDUSTRY CARD
 * ============================================= */

.industry-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  position: relative;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  cursor: default;
}

.industry-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

.industry-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.industry-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.industry-card:hover .industry-card__image {
  transform: scale(1.06);
}

/* Gradient overlay — navy to transparent */
.industry-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 42, 74, 0.90) 0%,
    rgba(27, 42, 74, 0.40) 50%,
    rgba(27, 42, 74, 0.10) 100%
  );
  transition: opacity var(--transition-normal);
}

.industry-card:hover .industry-card__overlay {
  opacity: 0.85;
}

.industry-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
}

.industry-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.industry-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-gold-light);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

/* =============================================
 * SECTION HEADER
 * ============================================= */

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-12);
}

.section-header__overline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.section-header__heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark-text);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-5);
}

/* Gold underline decoration */
.section-header__heading::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--gradient-gold-sheen);
  background-color: var(--color-gold);
  border-radius: var(--radius-full);
  margin: var(--space-5) auto 0;
}

/* Left-aligned variant */
.section-header--left {
  text-align: left;
  margin-left: 0;
}

.section-header--left .section-header__heading::after {
  margin-left: 0;
}

/* White heading variant (dark backgrounds) */
.section-header--light .section-header__heading {
  color: var(--color-white);
}

.section-header__subtitle {
  font-size: var(--text-lg);
  color: var(--color-mid-gray);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin: 0 auto;
}

.section-header--light .section-header__subtitle {
  color: rgba(255, 255, 255, 0.72);
}

/* =============================================
 * BADGE
 * ============================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  line-height: 1;
}

.badge-gold {
  background-color: var(--color-gold-subtle);
  color: var(--color-gold-dark);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.badge-navy {
  background-color: rgba(27, 42, 74, 0.08);
  color: var(--color-primary);
  border: 1px solid rgba(27, 42, 74, 0.12);
}

.badge-teal {
  background-color: rgba(42, 127, 142, 0.1);
  color: var(--color-cta-dark);
  border: 1px solid rgba(42, 127, 142, 0.2);
}

.badge-white {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* =============================================
 * STAT / METRIC BLOCK
 * ============================================= */

.stat-block {
  text-align: center;
  padding: var(--space-6);
}

.stat-block__number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-2);
}

.stat-block__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-mid-gray);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* =============================================
 * TESTIMONIAL CARD
 * ============================================= */

.testimonial-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  position: relative;
}

/* Decorative quote mark */
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-gold-subtle);
  pointer-events: none;
  user-select: none;
}

.testimonial-card__quote {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body-text);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-card__author-photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-gold-subtle);
  flex-shrink: 0;
}

.testimonial-card__author-name {
  font-weight: var(--weight-semibold);
  color: var(--color-dark-text);
  font-size: var(--text-sm);
  display: block;
}

.testimonial-card__author-title {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: var(--weight-medium);
}

/* =============================================
 * FEATURE ROW (icon + heading + text)
 * ============================================= */

.feature-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.feature-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--color-gold-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(201, 168, 76, 0.2);
}

.feature-item__heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-dark-text);
  margin-bottom: var(--space-2);
}

.feature-item__text {
  font-size: var(--text-sm);
  color: var(--color-mid-gray);
  line-height: var(--leading-relaxed);
}

/* =============================================
 * REGION CARD (US / Europe / India)
 * ============================================= */

.region-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border-light);
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.region-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* Accent diagonal strip at corner */
.region-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: var(--color-gold-subtle);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: opacity var(--transition-normal);
}

.region-card__flag {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-4);
  line-height: 1;
}

.region-card__country {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.region-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-dark-text);
  margin-bottom: var(--space-4);
}

.region-card__description {
  font-size: var(--text-sm);
  color: var(--color-mid-gray);
  line-height: var(--leading-relaxed);
}

/* =============================================
 * BRIDGE DECORATIVE ELEMENTS
 * ============================================= */

/*
 * .bridge-divider
 * A golden arc that curves gracefully between sections,
 * evoking the silhouette of a suspension bridge cable.
 * Implemented as a CSS-drawn arc using radial-gradient + clip-path.
 */
.bridge-divider {
  position: relative;
  height: 80px;
  overflow: visible;
  pointer-events: none;
  z-index: var(--z-raised);
  margin: calc(var(--space-8) * -1) 0;
}

.bridge-divider__arc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: 120px;
}

/* SVG arc drawn entirely in CSS via the background */
.bridge-divider__arc::before,
.bridge-divider__arc::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
}

/* Main cable arc — uses border-radius to simulate a curve */
.bridge-divider__arc::before {
  top: 0;
  height: 60px;
  border-bottom: 2px solid var(--color-gold);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  opacity: 0.55;
}

/* Shadow/depth layer */
.bridge-divider__arc::after {
  top: 3px;
  height: 60px;
  border-bottom: 1px solid var(--color-gold-dark);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  opacity: 0.20;
  filter: blur(2px);
}

/* Anchor towers on either end */
.bridge-divider__tower {
  position: absolute;
  top: calc(50% - 40px);
  width: 2px;
  height: 50px;
  background: linear-gradient(
    to bottom,
    var(--color-gold) 0%,
    transparent 100%
  );
  opacity: 0.6;
}

.bridge-divider__tower--left  { left: calc(50% - min(450px, 45vw)); }
.bridge-divider__tower--right { right: calc(50% - min(450px, 45vw)); }

/*
 * .bridge-cable
 * Subtle diagonal golden lines as decorative accents.
 * Use as a background pattern on section wrappers or cards.
 * Add the class to a ::before / ::after pseudo or a decorative div.
 */
.bridge-cable {
  position: relative;
}

.bridge-cable::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -52deg,
      transparent 0,
      transparent 40px,
      rgba(201, 168, 76, 0.05) 40px,
      rgba(201, 168, 76, 0.05) 41px
    );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* Stronger cable accent — single golden diagonal rule */
.bridge-accent-line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-gold-glow) 20%,
    var(--color-gold) 50%,
    var(--color-gold-glow) 80%,
    transparent 100%
  );
  margin: var(--space-8) 0;
  opacity: 0.6;
}

/* =============================================
 * CLIENT LOGO STRIP
 * ============================================= */

.client-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.55);
  transition: filter var(--transition-normal);
}

.client-logo:hover {
  filter: grayscale(0%) opacity(1);
}

/* =============================================
 * FORM COMPONENTS
 * ============================================= */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-dark-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-dark-text);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-subtle);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-mid-gray);
  opacity: 0.7;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* =============================================
 * LIGHTBOX TRIGGER
 * ============================================= */

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.gallery-item:hover .gallery-item__img {
  transform: scale(1.05);
}

.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 42, 74, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

.gallery-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(201, 168, 76, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transform: scale(0.85);
  transition: transform var(--transition-normal);
}

.gallery-item:hover .gallery-item__icon {
  transform: scale(1);
}

/* =============================================
 * MODAL / LIGHTBOX
 * ============================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 29, 51, 0.92);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-lifted);
}

.modal-overlay.is-open .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
  z-index: 1;
}

.modal-close:hover {
  background: rgba(201, 168, 76, 0.4);
}