/**
 * Three Column Feature Widget Styles
 * Implements "Clean Column" aesthetic (No Card).
 */

/* Container & Grid */
.tcf-widget {
  background-color: transparent;
  padding: 0;
}

.tcf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .tcf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tcf-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Column Container (Formerly Card) */
.tcf-card {
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Hover Effect - Removed per request */
.tcf-card:hover {
  transform: none;
  box-shadow: none;
}

/* Image Wrapper */
.tcf-image-wrapper {
  position: relative;
  width: 100%;
  /* Aspect Ratio Enforcement */
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--iabt-radius-card, 18px); /* Radius now on image only */
}

.tcf-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}


/* Content Area */
.tcf-content {
  padding: 24px 0 0 0; /* Top padding only to separate from image */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.tcf-title {
  font-family: var(--iabt-font-family, sans-serif);
  font-size: var(--iabt-h4, 1.25rem);
  font-weight: var(--iabt-font-bold, 700);
  color: var(--iabt-text-heading, #111827);
  line-height: var(--iabt-line-height-heading, 1.2);
  margin: 0 0 12px 0;
}

.tcf-description {
  font-family: var(--iabt-font-family, sans-serif);
  font-size: var(--iabt-text-base, 1rem);
  line-height: var(--iabt-line-height-body, 1.6);
  color: var(--iabt-text-body, #4b5563);
  margin: 0;
}

.tcf-description p:last-child {
  margin-bottom: 0;
}

/* Alignment Modifiers */
.tcf-align-center .tcf-content {
  text-align: center;
  align-items: center;
}

.tcf-align-right .tcf-content {
  text-align: right;
  align-items: flex-end;
}

/* Section Header */
.tcf-section-header {
  margin-bottom: 40px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.tcf-section-title {
  font-family: var(--iabt-font-family, sans-serif);
  font-weight: var(--iabt-font-bold, 700);
  color: var(--iabt-text-heading, #111827);
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.tcf-section-subtitle {
  font-family: var(--iabt-font-family, sans-serif);
  font-size: var(--iabt-text-lg, 1.125rem);
  line-height: 1.6;
  color: var(--iabt-text-body, #4b5563);
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  h1.tcf-section-title { font-size: var(--iabt-h2); }
  h2.tcf-section-title { font-size: var(--iabt-h3); }
  h3.tcf-section-title { font-size: var(--iabt-h4); }
  h4.tcf-section-title { font-size: var(--iabt-h5); }
  h5.tcf-section-title { font-size: var(--iabt-h6); }
  h6.tcf-section-title { font-size: var(--iabt-h6); }
}

/* Highlight Base */
.tcf-highlight {
  /* Default Gradient (Overridable) */
  background: linear-gradient(120deg, var(--iabt-primary, #0044cc) 0%, var(--iabt-secondary, #00c6ff) 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  display: inline-block;
}

/* Animations (Triggered by JS .is-in-view) */

/* 1. Shimmer */
[data-animation="shimmer"].is-in-view {
  animation: tcfShimmer 3s linear 1 forwards;
}
[data-animation="shimmer"][data-loop="true"].is-in-view {
  animation-iteration-count: infinite;
}

@keyframes tcfShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* 2. Typing Effect */
[data-animation="typing"] {
  display: inline-block;
  vertical-align: bottom;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  white-space: nowrap; /* Prevent wrapping during animation */
}
[data-animation="typing"].is-in-view {
  animation: tcfTyping 1.5s steps(30, end) forwards;
}
[data-animation="typing"][data-loop="true"].is-in-view {
  animation: tcfTypingLoop 2.2s steps(30, end) infinite alternate;
}

@keyframes tcfTyping {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes tcfTypingLoop {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* 3. Slide Up */
[data-animation="slide-up"] {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
[data-animation="slide-up"].is-in-view {
  opacity: 1;
  transform: translateY(0);
}
[data-animation="slide-up"][data-loop="true"].is-in-view {
  transition: none;
  animation: tcfSlideUpLoop 1.8s ease-in-out infinite;
}

@keyframes tcfSlideUpLoop {
  0%,
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. Fade In */
[data-animation="fade-in"] {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
[data-animation="fade-in"].is-in-view {
  opacity: 1;
}
[data-animation="fade-in"][data-loop="true"].is-in-view {
  transition: none;
  animation: tcfFadeInLoop 1.8s ease-in-out infinite;
}

@keyframes tcfFadeInLoop {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* 5. Scale Up */
[data-animation="scale-up"] {
  display: inline-block;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-animation="scale-up"].is-in-view {
  opacity: 1;
  transform: scale(1);
}
[data-animation="scale-up"][data-loop="true"].is-in-view {
  transition: none;
  animation: tcfScaleUpLoop 1.8s ease-in-out infinite;
}

@keyframes tcfScaleUpLoop {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}