/* Portfolio Buttons Block */

.portfolio-buttons-block {
  position: relative;

}



/* Button */
.portfolio-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
  position: relative;
}

.portfolio-button:hover {
  transform: translateY(-5px);
}

.portfolio-button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Icon Section */
.portfolio-button-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* SVG Icon */
.portfolio-button-icon {
  width: 100px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.portfolio-button:hover .portfolio-button-icon {
  transform: scale(1.1);
}

.portfolio-button-icon svg {
  width: 100%;
  height: auto;
}

/* Text */
.portfolio-button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--typography-family-secondary);
  font-weight: var(--typography-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.portfolio-button-text .letter {
  display: block;
  line-height: 1;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Color variants */
.portfolio-buttons-block.color-standard .portfolio-button-text {
  color: var(--color-heading);
}

.portfolio-buttons-block.color-white .portfolio-button-text {
  color: var(--color-white);
}

/* Corel class mapping to theme variables */
.portfolio-buttons-block.color-standard .fil0 { fill: transparent; }
.portfolio-buttons-block.color-standard .str0 { stroke: var(--color-white); stroke-width: 3px; }
.portfolio-buttons-block.color-standard .fil1 { fill: var(--color-science-blue); }
.portfolio-buttons-block.color-standard .fil2 { fill: var(--color-white); }
.portfolio-buttons-block.color-standard .str1 { stroke: var(--color-science-blue); stroke-width: 3px; fill: none; }

.portfolio-buttons-block.color-white .fil0 { fill: transparent; }
.portfolio-buttons-block.color-white .str0 { stroke: var(--color-white); stroke-width: 3px; }
.portfolio-buttons-block.color-white .fil1 { fill: var(--color-science-blue); }
.portfolio-buttons-block.color-white .fil2 { fill: var(--color-white); }
.portfolio-buttons-block.color-white .str1 { stroke: var(--color-science-blue); stroke-width: 3px; fill: none; }



/* Mobile */
@media (max-width: 768px) {
  .portfolio-button-icon {
    width: 80px;
    transform: rotate(90deg);
  }
  
  .portfolio-button-text {
    font-size: 0.9em;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .portfolio-button-icon {
    width: 60px;
    transform: rotate(90deg);
  }
  
  .portfolio-button-text {
    font-size: 0.8em;
  }
}

/* Extra small mobile */
@media (max-width: 360px) {
  .portfolio-button-icon {
    width: 50px;
    transform: rotate(90deg);
  }
  
  .portfolio-button-text {
    font-size: 0.7em;
  }
}