/* Featured Projects card styling - reuse Hub.css padding styles */

/* Match the exact structure from NewHub.cshtml: section#survey-tab-featured-projects */
#survey-tab-featured-projects .project.card,
.hub-content-tab-viewer #survey-tab-featured-projects .project.card,
.hub-content-tab-viewer .featured-projects-container .project.card {
  overflow: visible;
  border: 0;
  box-shadow: none;
  background: #f5f8fa;
}

/* Apply Hub.css padding to headerContent - matches #home .project.card .headerContent and #survey-tab-featured-projects .project.card .headerContent */
#survey-tab-featured-projects .project.card .headerContent.title-column,
.hub-content-tab-viewer
  #survey-tab-featured-projects
  .project.card
  .headerContent.title-column,
.hub-content-tab-viewer
  .featured-projects-container
  .project.card
  .headerContent.title-column {
  padding: 24px;
}

/* Apply Hub.css padding to action elements */
#survey-tab-featured-projects .project.card .action,
.hub-content-tab-viewer #survey-tab-featured-projects .project.card .action,
.hub-content-tab-viewer .featured-projects-container .project.card .action {
  padding: 8px 0 8px 14px;
}

/* Ensure featured projects container has no border */
#survey-tab-featured-projects,
.hub-content-tab-viewer .featured-projects-container {
  border: none !important;
}

/* Ensure images have no bottom border radius */
#survey-tab-featured-projects .featured-image,
#survey-tab-featured-projects .featured-image img,
.hub-content-tab-viewer .featured-projects-container .featured-image,
.hub-content-tab-viewer .featured-projects-container .featured-image img {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Ensure icon images have no bottom radius */
.hub-content-tab-viewer .featured-projects-container .icon-column img.thumb {
  border-radius: 0 !important;
}

/* Fix content clipping on cards without images */
.hub-content-tab-viewer
  .featured-projects-container
  .project.card:not(.has-featured-img) {
  overflow: visible;
}

.hub-content-tab-viewer
  .featured-projects-container
  .project.card:not(.has-featured-img)
  .headerContent {
  overflow: visible;
  padding-bottom: 24px;
}

.hub-content-tab-viewer
  .featured-projects-container
  .project.card:not(.has-featured-img)
  .row.no-gutter {
  overflow: visible;
  margin-bottom: 0;
  padding-bottom: 0;
}

.hub-content-tab-viewer
  .featured-projects-container
  .project.card:not(.has-featured-img)
  .action {
  overflow: visible;
}

/* Ensure cards with featured images don't clip content */
.hub-content-tab-viewer
  .featured-projects-container
  .project.card.has-featured-img
  .headerContent {
  overflow: visible;
  padding-bottom: 24px;
}

.hub-content-tab-viewer
  .featured-projects-container
  .project.card.has-featured-img
  .row.no-gutter {
  overflow: visible;
}

/* Hub Content Tab Viewer Styles - Scoped to .hub-content-tab-viewer */

/* Table in rendered content */
.hub-content-tab-viewer .text-block-content table,
.hub-content-tab-viewer .hero-subtitle table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.hub-content-tab-viewer .text-block-content table td,
.hub-content-tab-viewer .text-block-content table th,
.hub-content-tab-viewer .hero-subtitle table td,
.hub-content-tab-viewer .hero-subtitle table th {
  border: 1px solid #dee2e6;
  padding: 0.5rem;
}

.hub-content-tab-viewer .text-block-content table th,
.hub-content-tab-viewer .hero-subtitle table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

/* Styles for rendered content (non-editing) */
.hub-content-tab-viewer .text-block-content,
.hub-content-tab-viewer .hero-subtitle {
  line-height: 1.6;
}

.hub-content-tab-viewer .text-block-content p,
.hub-content-tab-viewer .hero-subtitle p {
  margin-bottom: 0.5rem;
}

.hub-content-tab-viewer .text-block-content p:last-child,
.hub-content-tab-viewer .hero-subtitle p:last-child {
  margin-bottom: 0;
}

.hub-content-tab-viewer .text-block-content a,
.hub-content-tab-viewer .hero-subtitle a {
  color: inherit;
  text-decoration: underline;
}

.hub-content-tab-viewer .text-block-content mark,
.hub-content-tab-viewer .hero-subtitle mark {
  background-color: #fef08a;
  padding: 0.1em 0.2em;
  border-radius: 2px;
}

.hub-content-tab-viewer .text-block-content ul,
.hub-content-tab-viewer .text-block-content ol,
.hub-content-tab-viewer .hero-subtitle ul,
.hub-content-tab-viewer .hero-subtitle ol {
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}

.hub-content-tab-viewer .text-block-content li,
.hub-content-tab-viewer .hero-subtitle li {
  margin-bottom: 0.25rem;
}

/* Content tab container on frontend */
.hub-content-tab-viewer .content-tab-container {
  padding: 1rem 0;
}

/* Unified Tabs Styles - uses Bootstrap card classes */
.hub-content-tab-viewer .unified-tab-content .tab-pane {
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Tab type badges */
.hub-content-tab-viewer .tab-type-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
}

.hub-content-tab-viewer .tab-type-badge.system {
  background-color: #e3f2fd;
  color: #1976d2;
}

.hub-content-tab-viewer .tab-type-badge.link {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.hub-content-tab-viewer .tab-type-badge.content {
  background-color: #e8f5e9;
  color: #388e3c;
}

/* Responsive tab scrolling */
@media (max-width: 992px) {
  .hub-content-tab-viewer .unified-nav-tabs {
    padding-right: 4rem;
  }

  .hub-content-tab-viewer .add-tab-btn {
    background-color: #fff;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
  }
}

/* Loading states */
.hub-content-tab-viewer .tab-loading {
  position: relative;
  min-height: 200px;
}

.hub-content-tab-viewer .tab-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-content-tab-viewer .tab-loading::before {
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* 
 * ProfileBlock styling - remove default border and padding for manual card placement.
 * !important is required because Hub.css #profileInfoBlock (line ~1968) defines
 * padding: 2.2em 30px and border: 2px #1e465f solid on an ID selector.
 * ID selectors have high specificity, and these styles need to be completely reset
 * when ProfileBlock is used inside Puck components.
 */
.hub-content-tab-viewer .content-tab-container #profileInfoBlock,
.content-tab-container #profileInfoBlock {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}