/*
* Hub-and-Spoke Interactive Component Styles
* EverFast Fiber Networks - Managed Services Page
* Felix, Director of Web Design
*/

/* ============================================
  CSS Custom Properties (Component-Specific)
  ============================================ */
:root {
  /* Hub & Spoke Dimensions */
  --hub-size: clamp(220px, 28vw, 320px);
  --spoke-size: clamp(80px, 10vw, 110px);
  --orbit-radius: clamp(180px, 22vw, 280px);

  /* Component Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* Component Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.2);

  /* Component Colors (using site tokens) */
  --color-primary-blue: #00529b;
  --color-primary-blue-dark: #003d75;
  --color-gold-accent: #efb13a;
  --color-white: #ffffff;
}

/* Utility Classes */
.text-gold {
  color: var(--color-gold-accent) !important;
}

/* ============================================
  Hub-and-Spoke Wrapper
  ============================================ */
.hub-spoke-wrapper {
  position: relative;
  width: 100%;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.25rem, 2vw, 1rem);
}

.hub-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1;
  margin: 0 auto;
}

/* ============================================
  Hub Card (Central Element)
  ============================================ */
.hub-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--hub-size);
  height: var(--hub-size);
  perspective: 1000px;
  z-index: 10;
}

.hub-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-slow);
  transform-style: preserve-3d;
}

/* Flip animation for radial variation */
[data-variation="radial"] .hub-card.flipped .hub-inner {
  transform: rotateY(180deg);
}

.hub-face,
.hub-content {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-primary-blue-dark) 100%);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-white);
}

.hub-front {
  background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-primary-blue-dark) 100%);
}

.hub-back,
.hub-content.hub-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--color-primary-blue-dark) 0%, var(--color-primary-blue) 100%);
}

.hub-logo {
  width: clamp(60px, 7vw, 90px);
  height: clamp(60px, 7vw, 90px);
  /* margin-bottom: use Bootstrap mb-3 */
}

.logo-icon {
  width: 100%;
  height: 100%;
  color: var(--color-gold-accent);
}

.hub-title {
  font-family: 'Newsreader', serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 600;
  /* margin-bottom: use Bootstrap mb-2 */
  color: var(--color-white);
}

.hub-tagline {
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  opacity: 0.9;
  /* margin: use Bootstrap m-0 */
}

/* Service Content (Back Face) */
.service-name {
  font-family: 'Newsreader', serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--color-gold-accent);
  margin-bottom: 0.75rem;
}

.service-description {
  font-size: clamp(0.7rem, 1.3vw, 0.9rem);
  line-height: 1.5;
  /* margin-bottom: use Bootstrap mb-3 */
  padding: clamp(0, 0.5vw, 0.5rem);
}

.service-cta {
  background: linear-gradient(135deg, var(--color-gold-accent) 0%, #d49a2a 100%);
  color: #000;
  border: none;
  padding: clamp(0.4rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem);
  border-radius: 50px;
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-cta:hover,
.service-cta:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(239, 177, 58, 0.4);
}

.service-cta:focus {
  outline: 3px solid var(--color-gold-accent);
  outline-offset: 3px;
}

/* ============================================
  Spokes Container (Service Bubbles)
  ============================================ */
.spokes-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-radius) * 2 + var(--spoke-size));
  height: calc(var(--orbit-radius) * 2 + var(--spoke-size));
  transform: translate(-50%, -50%);
}

/* ============================================
  Individual Spoke (Service Button)
  ============================================ */
.spoke {
  position: absolute;
  width: var(--spoke-size);
  height: var(--spoke-size);
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-primary-blue);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  cursor: pointer;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base);
  color: var(--color-primary-blue);
}

/* Position spokes in a circle */
.spoke[data-angle="0"] {
  top: 50%;
  left: calc(50% + var(--orbit-radius));
  transform: translate(-50%, -50%);
}

.spoke[data-angle="45"] {
  top: calc(50% - var(--orbit-radius) * 0.707);
  left: calc(50% + var(--orbit-radius) * 0.707);
  transform: translate(-50%, -50%);
}

.spoke[data-angle="90"] {
  top: calc(50% - var(--orbit-radius));
  left: 50%;
  transform: translate(-50%, -50%);
}

.spoke[data-angle="135"] {
  top: calc(50% - var(--orbit-radius) * 0.707);
  left: calc(50% - var(--orbit-radius) * 0.707);
  transform: translate(-50%, -50%);
}

.spoke[data-angle="180"] {
  top: 50%;
  left: calc(50% - var(--orbit-radius));
  transform: translate(-50%, -50%);
}

.spoke[data-angle="225"] {
  top: calc(50% + var(--orbit-radius) * 0.707);
  left: calc(50% - var(--orbit-radius) * 0.707);
  transform: translate(-50%, -50%);
}

.spoke[data-angle="270"] {
  top: calc(50% + var(--orbit-radius));
  left: 50%;
  transform: translate(-50%, -50%);
}

.spoke[data-angle="315"] {
  top: calc(50% + var(--orbit-radius) * 0.707);
  left: calc(50% + var(--orbit-radius) * 0.707);
  transform: translate(-50%, -50%);
}

/* Spoke Hover & Active States */
.spoke:hover,
.spoke:focus {
  transform: translate(-50%, -50%) scale(1.1);
  border-color: var(--color-gold-accent);
  box-shadow: 0 0 25px rgba(239, 177, 58, 0.4);
  z-index: 5;
}

.spoke:focus {
  outline: none;
}

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

.spoke.active {
  background: linear-gradient(135deg, var(--color-gold-accent) 0%, #d49a2a 100%);
  border-color: var(--color-primary-blue);
  color: var(--color-primary-blue);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 25px rgba(239, 177, 58, 0.5);
}

/* Spoke Icon */
.spoke-icon {
  width: clamp(24px, 5vw, 36px);
  height: clamp(24px, 5vw, 36px);
  margin-bottom: clamp(0.15rem, 0.5vw, 0.25rem);
}

.spoke-icon svg {
  width: 100%;
  height: 100%;
}

/* Spoke Label */
.spoke-label {
  font-size: clamp(0.55rem, 1vw, 0.75rem);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* ============================================
  Beam Canvas (Radial Variation)
  ============================================ */
.beam-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ============================================
  Value Proposition Image
  ============================================ */
.value-prop-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 280px;
  /* margin: use Bootstrap mx-auto */
}

.value-prop-image {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid var(--color-primary-blue);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
}

.value-prop-image-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  max-width: 280px;
  max-height: 280px;
  border-radius: 50%;
  border: 3px dashed var(--color-gold-accent);
  opacity: 0.6;
  z-index: 1;
}

/* ============================================
  Stat Blocks (Value Proposition Section)
  ============================================ */
.stat-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-block__number {
  font-family: 'Newsreader', serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
}

.stat-block__label {
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
  Differentiator Cards (Value Proposition)
  ============================================ */
.differentiator-card {
  border: none;
  border-radius: 15px;
  background: var(--color-white);
  border-left: 4px solid var(--color-gold-accent);
}

.differentiator-card__icon-row {
  display: flex;
  align-items: center;
}

.differentiator-card__bad {
  color: #6c757d;
  font-style: italic;
  /* padding-left: use Bootstrap ps-4 */
  border-left: 2px solid #dee2e6;
}

.differentiator-card__good {
  /* padding-left: use Bootstrap ps-4 */
  border-left: 2px solid var(--color-gold-accent);
}

/* ============================================
  Team Section (Meet Our Team)
  ============================================ */
.team-section {
  /* padding: use Bootstrap py-4 */
}

.team-section__intro {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem !important;
}

.team-member {
  min-width: 100px;
  max-width: 120px;
}

.team-member__avatar-wrapper {
  position: relative;
  width: 70px;
  height: 70px;
  /* margin: use Bootstrap mx-auto */
}

.team-member__avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary-blue);
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.team-member__avatar-fallback {
  display: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  border: 3px solid var(--color-primary-blue);
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
  font-size: 1.75rem;
}

.team-member:hover .team-member__avatar,
.team-member:hover .team-member__avatar-fallback {
  transform: scale(1.1);
  border-color: var(--color-gold-accent);
}

.team-member__name {
  font-family: 'Newsreader', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary-blue);
}

.team-member__role {
  font-size: 0.7rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
  Service Detail Cards (for grid section)
  ============================================ */
.service-detail-card {
  border: none;
  border-radius: 15px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-detail-card__icon {
  font-size: 2.5rem;
}

.service-detail-card__title {
  font-family: 'Newsreader', serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.service-detail-card__text {
  /* margin-bottom: use Bootstrap mb-3 */
}

.service-detail-card__features li {
  /* margin-bottom: use Bootstrap mb-2 */
}

/* ============================================
  Responsive Styles
  ============================================ */

/* Tablet */
@media (max-width: 991px) {
  :root {
    --hub-size: clamp(180px, 35vw, 260px);
    --spoke-size: clamp(70px, 12vw, 95px);
    --orbit-radius: clamp(150px, 28vw, 220px);
  }

  .hub-spoke-wrapper {
    min-height: 550px;
    /* padding now handled by clamp() in base styles */
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --hub-size: 140px;
    --spoke-size: 70px;
    --orbit-radius: 0;
  }

  .hub-spoke-wrapper {
    min-height: auto;
    /* padding handled by clamp() in base styles */
    overflow: visible;
  }

  .hub-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
    gap: 1.5rem;
    max-width: 100%;
    overflow: visible;
  }

  .hub-card {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-shrink: 0;
  }

  .spokes-container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }

  .spoke {
    position: relative;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    min-width: 0;
    max-width: 100%;
  }

  .spoke:hover,
  .spoke:focus,
  .spoke.active {
    transform: scale(1.02) !important;
  }

  .spoke-label {
    font-size: 0.6rem;
    word-break: break-word;
    hyphens: auto;
  }

  .beam-canvas {
    display: none;
  }
}

/* Larger Mobile (landscape / phablets) */
@media (min-width: 481px) and (max-width: 767px) {
  .spokes-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0 0.25rem;
  }

  .spoke {
    padding: 0.4rem;
  }

  /* spoke-icon size now handled by clamp() in base styles */

  .spoke-label {
    font-size: 0.55rem;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  :root {
    --hub-size: 225px;
    --spoke-size: 125px;
  }

  /* padding handled by clamp() in base styles */

  .spokes-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    padding: 0 0.25rem;
    justify-items: center;
    justify-content: center;
  }

  .spoke {
    padding: 0.5rem 0.25rem;
    width: var(--spoke-size);
    height: var(--spoke-size);
  }

  /* spoke-icon size handled by clamp() in base styles */

  .spoke-label {
    font-size: 0.6rem;
    line-height: 1.1;
  }

  /* Font sizes now handled by clamp() in base styles:
     .hub-title, .hub-tagline, .service-name,
     .service-description, .service-cta */
}

/* ============================================
  Reduced Motion
  ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hub-inner {
    transition: none;
  }

  .spoke {
    transition: none;
  }
}

/* ============================================
  Print Styles
  ============================================ */
@media print {
  .hub-spoke-wrapper {
    display: none;
  }
}