/* ========================================
   HERO BLOCK
   Full background image with model included
   Based on TSM Figma Design
   ======================================== */
.hero-bg-wrapper {
/*     background: linear-gradient(180deg, var(--gray-400) 0%, var(--surface-base) 100%); */
/*     padding-top: var(--space-96); */
    margin: 0;
    width: 100%;
	@media (max-width: 767px) {
/*   padding-top: var(--space-64); */
}
}

.hero-block {
	position: relative;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    padding: 0;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    min-height: 520px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
@media (min-width: 768px) {
  /* Your tablet-specific styles here */
  .hero-block {
    background-position: center;
  }
}
/* Background overlay for better text readability */
/* .hero-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
} */

.hero-block .container {
  margin: 0 var(--space-24);
  position: relative;
  z-index: 2;
  margin:0px !important;
}

/* Container */
.hero-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ----------------------------------------
   Hero Content (Left Side)
   ---------------------------------------- */
.hero-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
/*   padding: var(--space-77) 0; */
}

/* Hero Title */
.hero-title {
  font-family: var(--font-headings);
  font-size: var(--fs-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  color: var(--text-inverse);
  margin: 0 0 var(--space-16) 0;
  max-width: 721px;
  letter-spacing: -0.02em;
  text-shadow: var(--shadow-lg);
}

/* Hero Subtext */
.hero-subtext {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-normal);
  line-height: var(--lh-normal);
  color: var(--text-inverse);
  max-width: 570px;
  opacity: 0.98;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------
   Bottom Row: Badge + CTA Form
   ---------------------------------------- */
.hero-bottom-row {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

/* 20 Years Badge */
.hero-badge {
  flex-shrink: 0;
}

.hero-badge img {
  width: 130px;
  height: auto;
  max-height: 123px;
  display: block;
  filter: drop-shadow(var(--shadow-md));
}

/* ----------------------------------------
   CTA Form
   ---------------------------------------- */
.hero-cta-form {
  flex: 1;
}

.hero-form {
  display: inline-flex;
  background-color: var(--surface-base);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-full);
	@media (max-width: 767px) {
  display:block;
  background-color: unset;
}
}

.hero-input {
  padding: 0 0 0 var(--space-8);
  width: 100%;
  border: none;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-normal);
  background: var(--surface-base);
  color: var(--text-primary);
/*   transition: all var(--duration-fast) var(--ease-out); */
	outline:unset !important;
}

.hero-input::placeholder {
  color: var(--text-muted);
}

/* CTA Button */
.btn-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: var(--text-inverse);
  font-family: var(--font-headings);
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  padding: var(--space-8) var(--space-16);
  border-radius: 40px;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.btn-hero-cta:hover {
/*   background: var(--color-cyan-hover); */
  box-shadow: var(--shadow-md)
}

.btn-hero-cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-hero-cta:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: var(--space-4);
}

/* ----------------------------------------
   Animations
   ---------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Apply animations */
.hero-title {
  animation: fadeInUp 0.6s ease 0.1s both;
}

.hero-subtext {
  animation: fadeInUp 0.6s ease 0.3s both;
}

.hero-badge {
  animation: fadeInLeft 0.6s ease 0.5s both;
}

.hero-cta-form {
  animation: fadeInUp 0.6s ease 0.5s both;
}
.hero-cta-subtext{
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-normal);
    color: var(--text-inverse);
    margin: var(--space-8) 0 0 var(--space-8);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* ----------------------------------------
   Responsive Breakpoints
   ---------------------------------------- */

/* Large Desktop (≥1440px) */
@media (min-width: 1440px) {
  .hero-block {
    background-position: center left;
  }
  
/*   .hero-content {
    max-width: 500px;
  } */
}

/* Large Tablet (≤1240px) */
@media (max-width: 1240px) {
  .hero-block {
    width: calc(100% - 40px);
    margin: 50px 20px 0;
	background-position: center left;
  }
}

/* Desktop (1200px - 1439px) */
@media (max-width: 1440px) {
  .hero-title {
    font-size: 44px;
    max-width: 500px;
  }
  
  .hero-content {
    max-width: 500px;
  }

}

/* Tablet Large (1024px - 1199px) */
@media (max-width: 1199px) {
  .hero-block {
    width: calc(100% - 32px);
    margin: 40px 16px 0;
	background-position: center;
  }
  
  .hero-title {
    font-size: 40px;
    max-width: 600px;
  }
  
  .hero-subtext {
    font-size: 17px;
    max-width: 520px;
  }
  
  .hero-content {
    max-width: 500px;
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .hero-block {
    width: calc(100% - 24px);
    margin: 0px 12px 0;
    padding: 50px 0 60px;
  
  }
  
  .hero-title {
    font-size: 36px;
    max-width: 500px;
  }
  
  .hero-subtext {
    font-size: 16px;
    max-width: 450px;
  }
  
  .hero-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  
  .hero-cta-form {
    max-width: 100%;
  }
}

/* Mobile Large (481px - 767px) */
@media (max-width: 767px) {
  .hero-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
    pointer-events: none;
  }
  
  .hero-block {
    width: calc(100% - 16px);
    margin: 20px 8px 0;
    padding: 40px 20px 50px;
    border-radius: 20px;
    background-position: top right;
    min-height: 480px;
	margin: 16px 16px 0 16px !important;
  }
  section.hero-block .container{
    max-width: 100%;
    margin: 0 !important;
	padding:0 !important;
  }
  .hero-title {
    font-size: 32px;
    line-height: 1.15;
    max-width: 100%;
  }
  
  .hero-subtext {
    font-size: 15px;
    max-width: 100%;
  }
  
  .hero-form {
    flex-direction: row;
    gap: 12px;
    width: 100%;
    padding: 5px;
  }
  
  .hero-input,
  .btn-hero-cta {
    width: 100%;
    height: 52px;
	border-radius:50px;
	margin-top:var(--space-12);
	padding-left:var(--space-12) !important;
	
  }
  
  .hero-badge img {
    width: 120px;
    height: auto;
  }
}

/* Mobile Small (≤480px) */
@media (max-width: 480px) {
  .hero-block::before {
    background: rgba(0, 0, 0, 0.25);
  }
  
  .hero-block {
    width: 90%;
    margin: 16px auto;
    padding: 32px 16px 40px;
    border-radius: 20px;
    min-height: 420px;
    background-position: center;
  }
  
  .hero-title {
    font-size: 28px;
    line-height: 1.15;
  }
  
  .hero-subtext {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .hero-badge img {
    width: 100px;
  }
  
  .hero-input {
    font-size: 15px;
    height: 50px;
    padding: 0px;
	
  }
  
  .btn-hero-cta {
    font-size: 14px;
    height: 50px;
    padding: 0px;
    
  }
}

/* ----------------------------------------
   Print Styles
   ---------------------------------------- */
@media print {
  .hero-block {
    background: none !important;
    border-radius: 0;
  }
  
  .hero-cta-form {
    display: none;
  }
}

/* ----------------------------------------
   Accessibility
   ---------------------------------------- */
.hero-input:focus,
.btn-hero-cta:focus {
  outline: 3px solid rgba(255, 255, 255, 0.6);
/*   outline-offset: 2px; */
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .hero-title,
  .hero-subtext {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  
  .hero-input {
    border: 2px solid #333;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-subtext,
  .hero-badge,
  .hero-cta-form {
    animation: none;
  }
  
  .btn-hero-cta,
  .hero-input {
    transition: none;
  }
  
  .btn-hero-cta:hover,
  .hero-input:focus {
    transform: none;
  }
}

/* ----------------------------------------
   Dark Mode Support (Optional)
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
  .hero-input {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* ----------------------------------------
   Gutenberg Editor Styles
   ---------------------------------------- */
.block-editor-block-list__block[data-type="acf/hero"] {
  margin-bottom: 0;
}


.block-editor-block-list__block[data-type="acf/hero"] .hero-block {
  min-height: 400px;
}