/**
 * Hero Actions Component Styles - Complete Updated Version
 * Includes 1024px breakpoint fixes and signup form single-row layout
 * FIXED: Maintains cutout effect at all screen sizes including mobile
 */

 @import url('../../assets/css/main-variables.css');

 /* ================================
    BASE STYLES FOR ALL HERO ACTIONS
    ================================ */
 .hero-actions-block {
   padding: var(--spacing-8);
   border-radius: var(--radius-md);
   z-index: 10;
   position: relative;
   width: 100%;
   transition: transform 0.3s ease;
   /* Default background - will be transparent in cutout mode */
   background: var(--primary-900);
 }
 
 /* ================================
    POSITIONING FIXES
    ================================ */
 
 /* Hero actions that appear AFTER footer-style1 */
 .footer-style1 + .hero-actions-block {
   z-index: 10;
   margin-bottom: 0;
   margin-left: auto;
   margin-right: var(--spacing-8);
   width: calc(50% - var(--spacing-8));
   max-width: 600px;
 }
 
 /* Hero actions that appear AFTER hero-style1 */
 .hero-style1 + .hero-actions-block,
 .hero-section-wrapper + .hero-actions-block,
 header .hero-actions-block {
   position: relative;
   z-index: 10;
   margin-bottom: 0;
   margin-left: auto;
   margin-right: var(--spacing-8);
   width: calc(50% - var(--spacing-8));
   max-width: 600px;
 }
 
 /* Class added to containers that have hero actions overlap */
 .has-hero-actions-overlap {
   position: relative;
   overflow: visible;
 }
 
 /* Triangle pseudo-element */
 .hero-actions-block::before {
   content: '' !important;
   position: absolute !important;
   top: 50% !important;
   left: -30px !important;
   width: 0 !important;
   height: 0 !important;
   border-top: 90px solid rgba(0, 0, 0, 0.3) !important;
   border-left: 30px solid transparent !important;
   z-index: -1 !important;
   display: block !important;
   visibility: visible !important;
   opacity: 1 !important;
 }
 
 .hero-actions-buttons::before {
   display: none !important;
 }
 
 .hero-actions-title {
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-bold);
   margin-top: 0;
   margin-bottom: var(--spacing-4);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wide);
 }
 
 .hero-actions-image {
   margin-bottom: var(--spacing-4);
   border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
 .hero-actions-image img {
   display: block;
   width: 100%;
   height: auto;
 }
 
 .hero-actions-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-medium);
   transition: all 0.2s ease;
 }
 
 .actions-arrow {
   font-size: 1.5em;
   line-height: 1;
   margin-left: var(--spacing-2);
 }
 
 /* Styles for the section below that gets extra padding */
 .has-hero-actions-above,
 .has-footer-actions-above,
 .has-header-actions-above {
   position: relative;
 }
 
 /* ================================
    NEWS COMPONENT STYLES
    ================================ */
 
 /* Default news component background */
 .hero-actions-news {
   background: var(--primary-900);
 }
 
 /* When image exists, create side-by-side layout */
 .hero-actions-news.has-image {
   display: flex;
   gap: var(--spacing-5);
   align-items: stretch;
   cursor: pointer;
 }
 
 /* Image takes 35% width */
 .hero-actions-news.has-image .hero-actions-image {
   flex: 0 0 35%;
   margin-bottom: 0;
   align-self: stretch;
 }
 
 .hero-actions-image-link {
   display: block;
   height: 100%;
   text-decoration: none;
 }
 
 .hero-actions-news.has-image .hero-actions-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.15s ease;
 }
 
 .hero-actions-image-link:hover img,
 .hero-actions-block:hover .hero-actions-image img {
   transform: scale(1.15);
 }
 
 .hero-actions-title-link {
   text-decoration: none;
   color: inherit;
   transition: all 0.15s ease;
 }
 
 .hero-actions-title-link:hover {
   opacity: 0.8;
 }
 
 /* Content area takes remaining width */
 .hero-actions-news.has-image .hero-actions-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   position: relative;
   justify-content: space-between;
 }
 
 /* When no image, content spans full width */
 .hero-actions-news:not(.has-image) .hero-actions-content {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 200px;
 }
 
 /* Center container for label and title */
 .hero-actions-center {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
   align-items: flex-start;
 }
 
 .hero-actions-meta {
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   margin-bottom: 0;
   font-size: var(--font-size-small);
   flex-shrink: 0;
 }
 
 .hero-actions-label {
   font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wide);
   margin-bottom: var(--spacing-3);
   transition: all 0.15s ease;
 }
 
 .hero-actions-date {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   font-weight: var(--font-weight-bold);
   color: var(--primary-500);
   line-height: 1;
   min-width: 40px;
 }
 
 .date-month {
   font-size: var(--font-size-small);
   letter-spacing: var(--letter-spacing-wide);
   margin-bottom: 2px;
 }
 
 .date-day {
   font-size: 31px;
   font-weight: var(--font-weight-black);
   margin-top: -4px;
 }
 
 /* Dark background date color override */
 .hero-actions-news.bg-dark .hero-actions-date {
   color: var(--primary-700);
 }
 
 .hero-actions-news .hero-actions-title {
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   margin: 0;
   text-transform: none;
   letter-spacing: normal;
   transition: transform 0.15s ease;
   word-break: break-word;
   display: block;
   visibility: visible;
   opacity: 1;
   overflow: visible;
   text-overflow: clip;
   max-height: none;
   -webkit-line-clamp: unset;
   -webkit-box-orient: unset;
 }
 
 /* Apply truncation to the link inside the title */
 .hero-actions-news .hero-actions-title a {
   text-decoration: none;
   display: block;
   visibility: visible;
   opacity: 1;
 }
 
 /* When news has no image, make the title larger to fill the space better */
 .hero-actions-news:not(.has-image) .hero-actions-title {
   font-size: calc(var(--font-size-medium) * 1.5);
   line-height: 1.3;
 }
 
 /* Ensure consistent baseline for both layouts */
 .hero-actions-news.has-image .hero-actions-title {
   font-size: var(--font-size-medium);
   line-height: 1.4;
 }
 
 /* Title hover effects */
 .hero-actions-block:hover .hero-actions-center .hero-actions-title {
   transform: translateX(6px);
 }
 
 .hero-actions-block:hover .hero-actions-center .hero-actions-label {
   transform: translateX(6px);
 }
 
 .hero-actions-excerpt {
   font-size: var(--font-size-medium);
   line-height: 1.5;
   margin-bottom: auto;
   opacity: 0.95;
 }
 
 /* Position read more icon in bottom right */
 .hero-actions-news .hero-actions-link {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   margin-top: var(--spacing-4);
   text-decoration: none;
 }
 
 .hero-actions-news .hero-actions-link i {
   font-size: 1.5em;
   color: var(--secondary-300);
   transition: transform 0.3s ease, color 0.2s ease;
 }
 
 .hero-actions-news .hero-actions-link:hover i,
 .hero-actions-block:hover .hero-actions-link i {
   transform: scale(1.2);
   color: var(--secondary-200);
 }
 
 /* Remove old arrow styles */
 .hero-actions-news .actions-arrow {
   display: none;
 }
 
 /* ================================
    ACTION BUTTONS COMPONENT - 3 LAYOUT SYSTEM
    ================================ */
 
 .hero-actions-buttons {
   padding: 0;
   overflow: visible;
   background: transparent !important;
 }
 
 /* Base grid container */
 .hero-actions-buttons__grid {
   position: relative;
 }
 
 /* 1 BUTTON: 1x1 grid */
 .hero-actions-buttons__grid--count-1 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 }
 
 /* 2 BUTTONS: 1x2 grid */
 .hero-actions-buttons__grid--count-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 1fr;
   gap: var(--spacing-3);
 }
 
 /* 3 BUTTONS: 2x2 grid */
 .hero-actions-buttons__grid--count-3 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: var(--spacing-3);
 }
 
 /* Absolute positioned eyebrow for 1 and 2 button layouts */
 .hero-actions-buttons__eyebrow--absolute {
   position: absolute;
   top: -30px;
   left: 50%;
   transform: translateX(-50%);
   margin: 0;
   font-size: var(--font-size-h4, 1.125rem);
   font-weight: var(--font-weight-medium, 500);
   color: currentColor;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;
 }
 
 /* Grid eyebrow for 3 button layout */
 .hero-actions-buttons__eyebrow-cell {
   grid-column: 1;
   grid-row: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: var(--spacing-3);
 }
 
 .hero-actions-buttons__eyebrow {
   margin: 0;
   font-size: var(--font-size-h4, 1.125rem);
   font-weight: var(--font-weight-medium, 500);
   color: currentColor;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 /* Empty cell for 3 buttons without eyebrow */
 .hero-actions-buttons__empty-cell {
   grid-column: 1;
   grid-row: 1;
   display: block;
 }
 
 /* Button Styles */
 .hero-actions-buttons__button {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 165px;
   height: 100%;
   padding: var(--spacing-3) var(--spacing-4);
   text-align: center;
   text-decoration: none;
   transition: all 0.3s ease;
   /* Button styling to match btn-medium */
   border: 2px solid currentColor;
   border-radius: var(--radius-md);
   background: transparent;
   color: inherit;
   font-weight: var(--font-weight-semibold);
   position: relative;
   overflow: hidden;
 }
 
 /* Button positioning in 3-button grid */
 .hero-actions-buttons__grid--count-3 .hero-actions-buttons__button:nth-of-type(1) {
   grid-column: 2;
   grid-row: 1;
 }
 
 .hero-actions-buttons__grid--count-3 .hero-actions-buttons__button:nth-of-type(2) {
   grid-column: 1;
   grid-row: 2;
 }
 
 .hero-actions-buttons__grid--count-3 .hero-actions-buttons__button:nth-of-type(3) {
   grid-column: 2;
   grid-row: 2;
 }
 
 .hero-actions-buttons__button:hover {
   background: currentColor;
   transform: translateY(-2px);
 }
 
 .hero-actions-buttons__icon {
   font-size: 5rem;
   margin-bottom: var(--spacing-2);
   transition: color 0.3s ease;
   display: block;
   position: absolute;
   color: var(--primary-900);
   opacity: .5;
 }
 
 .hero-actions-buttons__text {
   font-size: var(--font-size-medium);
   line-height: 1.3;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   transition: color 0.3s ease;
   word-break: break-word;
   max-width: 100%;
   z-index: 1;
 }
 
 /* Text color adjustments */
 .hero-actions-buttons.text-gray-50 {
   color: var(--gray-50);
 }
 
 .hero-actions-buttons.text-gray-900 {
   color: var(--gray-900);
 }
 
 /* Dark background adjustments */
 .hero-actions-buttons.bg-dark .hero-actions-buttons__button {
   border-color: currentColor;
   color: currentColor;
 }
 
 .hero-actions-buttons.bg-dark .hero-actions-buttons__button:hover {
   background: currentColor;
 }
 
 .hero-actions-buttons.bg-dark .hero-actions-buttons__button:hover .hero-actions-buttons__text,
 .hero-actions-buttons.bg-dark .hero-actions-buttons__button:hover .hero-actions-buttons__icon {
   color: var(--primary-900);
 }
 
 .hero-actions-buttons__button:nth-child(1) {
   background: var(--primary-700);
 }
 
 .hero-actions-buttons__button:nth-child(1):hover {
   background: var(--primary-600);
 }
 
 .hero-actions-buttons__button:nth-child(2) {
   background: var(--primary-500);
 }
 
 .hero-actions-buttons__button:nth-child(2):hover {
   background: var(--primary-400);
 }
 
 .hero-actions-buttons__button:nth-child(3) {
   background: var(--primary-600);
 }
 
 .hero-actions-buttons__button:nth-child(3):hover {
   background: var(--primary-500);
 }
 
 .hero-actions-buttons__button:nth-child(4) {
   background: var(--primary-800);
 }
 
 .hero-actions-buttons__button:nth-child(4):hover {
   background: var(--primary-700);
 }
 
 /* ================================
    QUOTE COMPONENT STYLES
    ================================ */
 
 .hero-actions-quote {
   padding: var(--spacing-6) var(--spacing-5);
   text-align: center;
 }
 
 .hero-quote-text {
   font-size: var(--font-size-large);
   font-weight: var(--font-weight-medium);
   font-style: italic;
   line-height: 1.4;
   margin: 0 0 var(--spacing-5) 0;
   quotes: none;
 }
 
 .hero-quote-attribution {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-3);
 }
 
 .quote-author-image {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .quote-author-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .quote-author-name {
   font-style: normal;
   font-weight: var(--font-weight-semibold);
   opacity: 0.9;
 }
 
 /* ================================
    SIGNUP FORM COMPONENT STYLES - ORIGINAL 2-COLUMN GRID
    ================================ 

 .hero-actions-signup {
   padding: var(--spacing-5);
   width: 100%;
   box-sizing: border-box;
 }
 
 .hero-actions-signup .hero-actions-title {
   text-align: center;
   margin-bottom: var(--spacing-5);
   display: none;
 }
 
 .hero-signup-form {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
   box-sizing: border-box;
 }
 
 /* DESKTOP: Keep original 2-column grid
 .hero-actions-signup .form-fields-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   width: 100%;
   box-sizing: border-box;
 }
 
 /* Form fields should scale properly within grid 
 .hero-actions-signup .form-field {
   width: 100%;
   min-width: 0; /* Allow fields to shrink below default 
   box-sizing: border-box;
 }
 
 /* Input fields should respect parent width 
 .hero-actions-signup .form-input,
 .hero-actions-signup input[type="text"],
 .hero-actions-signup input[type="email"],
 .hero-actions-signup input[type="tel"],
 .hero-actions-signup input[type="url"],
 .hero-actions-signup textarea,
 .hero-actions-signup select {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
 }
 
 .hero-signup-submit {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-2);
   padding: var(--spacing-3) var(--spacing-4);
   border: 2px solid currentColor;
   border-radius: var(--radius-sm);
   background: transparent;
   color: inherit;
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-semibold);
   cursor: pointer;
   transition: all 0.2s ease;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
 }
 
 .hero-signup-submit:hover {
   background: currentColor;
   color: var(--color-primary-900);
 }
 
 .hero-signup-submit .actions-arrow {
   font-size: 1.2em;
   margin-left: 0;
   transition: transform 0.2s ease;
 }
 
 .hero-signup-submit:hover .actions-arrow {
   transform: translateX(4px);
 }
 
 /* Privacy notice for vertical signup
 .hero-actions-signup .privacy-notice {
   text-align: center;
   width: 100%;
   box-sizing: border-box;
 }
 
 .hero-actions-signup .privacy-notice p {
   font-size: .75rem;
   line-height: 1.5;
   margin: 0;
 }
 
 .hero-actions-signup .privacy-link {
   color: var(--primary-300);
   text-decoration: underline;
   transition: color 0.2s ease;
 }
 
 .hero-actions-signup .privacy-link:hover {
   color: var(--primary-200);
 }
 
 /* Prevent any child elements from causing overflow 
 .hero-actions-signup * {
   max-width: 100%;
   box-sizing: border-box;
 }
 
 /* Fix for Contact Form 7 if used in vertical signup 
 .hero-actions-signup .wpcf7-form {
   width: 100%;
   margin: 0;
   box-sizing: border-box;
 }
 
 .hero-actions-signup .wpcf7-form p {
   margin: 0 0 var(--spacing-3) 0;
   width: 100%;
 }
 
 .hero-actions-signup .wpcf7-form input[type="text"],
 .hero-actions-signup .wpcf7-form input[type="email"],
 .hero-actions-signup .wpcf7-form input[type="tel"],
 .hero-actions-signup .wpcf7-form input[type="url"],
 .hero-actions-signup .wpcf7-form textarea,
 .hero-actions-signup .wpcf7-form select {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
 }

 */
 
 /* ================================
    VIDEO COMPONENT STYLES
    ================================ */
 
 .hero-actions-video {
   padding: var(--spacing-4);
 }
 
 .hero-actions-video .hero-actions-title {
   text-align: center;
   margin-bottom: var(--spacing-4);
 }
 
 .hero-video-container {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%; /* 16:9 aspect ratio */
   border-radius: var(--radius-md);
   overflow: hidden;
 }
 
 .hero-video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
 
 /* ================================
    HORIZONTAL SIGNUP FORM STYLES
    ================================ 
 
 .hero-actions-horizontal-signup {
   padding: var(--spacing-6) var(--spacing-8);
   background-color: var(--gray-100);
   color: var(--gray-900);
 }
 
 .hero-horizontal-signup-form {
   width: 100%;
   max-width: 100%;
 }
 
 .form-fields-row {
   display: flex;
   gap: var(--spacing-3);
   align-items: stretch;
   margin-bottom: var(--spacing-4);
   width: 100%;
 }
 
 .form-field {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0; /* Allow fields to shrink 
 }
 
 .form-field.flex-1 {
   flex: 1;
 }
 
 .form-input {
   width: 100%;
   padding: var(--spacing-4);
   box-sizing: border-box;
 }
 
 .hero-horizontal-submit {
   padding: var(--spacing-4) var(--spacing-6);
   background-color: var(--green-600);
   color: var(--white);
   border: none;
   border-radius: var(--radius-sm);
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-bold);
   font-family: var(--font-primary);
   cursor: pointer;
   transition: all 0.2s ease;
   text-transform: uppercase;
   letter-spacing: 0.025em;
   white-space: nowrap;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 160px;
 }
 
 .hero-horizontal-submit:hover {
   background-color: var(--green-700);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .hero-horizontal-submit:active {
   transform: translateY(0);
 }
 
 /* Privacy notice for horizontal signup 
 .hero-actions-horizontal-signup .privacy-notice {
   margin-top: var(--spacing-4);
   text-align: center;
 }
 
 .hero-actions-horizontal-signup .privacy-notice p {
   font-size: var(--font-size-small);
   line-height: 1.5;
   color: var(--gray-700);
   margin: 0 auto;
   max-width: 800px;
 }
 
 .hero-actions-horizontal-signup .privacy-link {
   color: var(--primary-600);
   text-decoration: underline;
   transition: color 0.2s ease;
 }
 
 .hero-actions-horizontal-signup .privacy-link:hover {
   color: var(--primary-800);
 }
 
 /* Alternative submit button colors
 .hero-horizontal-submit.bg-blue-600 {
   background-color: var(--blue-600);
 }
 
 .hero-horizontal-submit.bg-blue-600:hover,
 .hero-horizontal-submit.hover\:bg-blue-700:hover {
   background-color: var(--blue-700);
 }
 
 .hero-horizontal-submit.bg-green-600 {
   background-color: var(--green-600);
 }
 
 .hero-horizontal-submit.bg-green-600:hover,
 .hero-horizontal-submit.hover\:bg-green-700:hover {
   background-color: var(--green-700);
 }
 
 .hero-horizontal-submit.bg-primary-600 {
   background-color: var(--primary-600);
 }
 
 .hero-horizontal-submit.bg-primary-600:hover,
 .hero-horizontal-submit.hover\:bg-primary-700:hover {
   background-color: var(--primary-700);
 }
 
 /* Dark theme overrides for horizontal signup */
 .hero-actions-horizontal-signup.bg-dark .form-input {
   background-color: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.2);
   color: var(--white);
 }
 
 .hero-actions-horizontal-signup.bg-dark .privacy-notice p {
   color: rgba(255, 255, 255, 0.8);
 }
 
 .hero-actions-horizontal-signup.bg-dark .privacy-link {
   color: var(--primary-300);
 }
 
 .hero-actions-horizontal-signup.bg-dark .privacy-link:hover {
   color: var(--primary-200);
 }
 
 /* ================================
    CONTACT FORM 7 INTEGRATION
    ================================ */
 
 .hero-actions-horizontal-signup .wpcf7-form {
   margin: 0;
   width: 100%;
 }
 
 .hero-actions-horizontal-signup .wpcf7-form p {
   margin: 0;
   display: flex;
   gap: var(--spacing-3);
   align-items: stretch;
   margin-bottom: var(--spacing-4);
   flex-wrap: wrap;
   width: 100%;
 }
 
 .hero-actions-horizontal-signup .wpcf7-form input[type="text"],
 .hero-actions-horizontal-signup .wpcf7-form input[type="email"],
 .hero-actions-horizontal-signup .wpcf7-form input[type="tel"] {
   flex: 1;
   min-width: 150px; /* Minimum width before wrapping */
   padding: var(--spacing-4);
   border: 2px solid var(--gray-300);
   border-radius: var(--radius-sm);
   background-color: var(--gray-200);
   color: var(--gray-900);
   font-size: var(--font-size-medium);
   font-family: var(--font-primary);
   box-sizing: border-box;
 }
 
 .hero-actions-horizontal-signup .wpcf7-form input[type="submit"] {
   padding: var(--spacing-4) var(--spacing-6);
   background-color: var(--green-600);
   color: var(--white);
   border: none;
   border-radius: var(--radius-sm);
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-bold);
   font-family: var(--font-primary);
   cursor: pointer;
   transition: all 0.2s ease;
   text-transform: uppercase;
   letter-spacing: 0.025em;
   white-space: nowrap;
   min-width: 160px;
 }
 
 .hero-actions-horizontal-signup .wpcf7-form input[type="submit"]:hover {
   background-color: var(--green-700);
   transform: translateY(-1px);
 } */
 
 /* ================================
    Z-INDEX MANAGEMENT
    ================================ */
 
 /* Ensure proper stacking order */
 .hero-style1,
 .footer-style1 {
   position: relative;
   z-index: 1;
 }
 
 .hero-actions-block {
   z-index: 10;
 }
 
 .site-footer,
 .page-components > * {
   position: relative;
   z-index: 2;
 }
 
 /* ================================
    CUTOUT EFFECT WITH CLIP-PATH
    ================================ */
 
 /* Cutout effect - simplified background handling */
 .hero-actions-block.cutout-active {
   /* Simply transparent - the JS will handle the body background */
   background: transparent;
   box-shadow: none;
   border: none;
 }
 
 /* Hide triangle in cutout mode */
 .hero-actions-block.cutout-active::before {
   display: block !important;
 }
 
 /* Remove component backgrounds in cutout mode */
 .hero-actions-block.cutout-active .hero-actions-news,
 .hero-actions-block.cutout-active .hero-actions-buttons,
 .hero-actions-block.cutout-active .hero-actions-quote,
 .hero-actions-block.cutout-active .hero-actions-signup,
 .hero-actions-block.cutout-active .hero-actions-video,
 .hero-actions-block.cutout-active .hero-actions-horizontal-signup {
   background: transparent;
 }
 
 /* Light background adjustments */
 .hero-actions-block.cutout-active.on-light-bg * {
   color: var(--gray-900);
   text-shadow: 
     0 0 20px rgba(255, 255, 255, 0.9),
     0 0 10px rgba(255, 255, 255, 0.8),
     0 1px 3px rgba(255, 255, 255, 1);
 }
 
 /* Ensure interactive elements remain visible */
 .hero-actions-block.cutout-active a,
 .hero-actions-block.cutout-active button,
 .hero-actions-block.cutout-active input,
 .hero-actions-block.cutout-active .hero-actions-link i {
   position: relative;
   z-index: 2;
 }
 
 /* Hero sections with clip-path cutout */
 .hero-style1.has-hero-actions-cutout,
 .footer-style1.has-hero-actions-cutout {
   position: relative;
   overflow: visible;
 }
 
 /* Ensure background containers respect the clip-path */
 .hero-style1.has-hero-actions-cutout .background-image,
 .hero-style1.has-hero-actions-cutout .background-overlay,
 .footer-style1.has-hero-actions-cutout .footer-background-container,
 .footer-style1.has-hero-actions-cutout .background-image,
 .footer-style1.has-hero-actions-cutout .background-overlay {
   position: absolute;
   top: -15%;
   left: -15%;
   right: -15%;
   bottom: -15%;
 }
 
 /* ================================
    NEWS FILTER COMPONENT STYLES
    ================================ */
 .hero-actions-filter {
   display: flex;
   align-items: center;
 }
 
 .hero-actions-filter-content {
   display: flex;
   gap: var(--spacing-24);
   align-items: center;
   padding: var(--spacing-6);
 }
 
 /* Filter label */
 .hero-actions-filter .filter-label h2 {
   margin: 0;
   color: var(--secondary-500);
 }
 
 /* Categories section */
 .hero-actions-filter .filter-categories {
   flex: 1;
 }
 
 /* Category list */
 .hero-actions-filter .category-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .hero-actions-filter .category-list li {
   margin-bottom: 0;
 }
 
 .hero-actions-filter .category-list li:before {
   display: none !important;
 }
 
 .hero-actions-filter .category-list a {
   text-decoration: none;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.05em;
   transition: opacity 0.2s ease;
   display: block;
 }
 
 .hero-actions-filter .category-list a:hover,
 .hero-actions-filter .category-list li.active a {
   opacity: 1;
   color: var(--secondary-500);
 }
 
 /* Active category indicator */
 .hero-actions-filter .category-list li.active a {
   position: relative;
 }
 
 .hero-actions-filter .category-list li.active a::before {
   content: '';
   position: absolute;
   left: -20px;
   top: 50%;
   transform: translateY(-50%);
   width: 4px;
   height: 20px;
   background-color: currentColor;
   display: none !important;
 }
 
 /* ================================
    SINGLE ROW LAYOUT - ONLY BELOW 1024px
    ================================ */
 @media (max-width: 1024px) {
   /* Change to single row flex layout below 1024px */
   .hero-actions-signup .form-fields-grid {
     display: flex;
     gap: var(--spacing-3);
   }
   
   /* Make fields equal width in flex container */
   .hero-actions-signup .form-field {
     flex: 1;
     min-width: 0;
   }
 }
 
 /* ================================
    RESPONSIVE STYLES - UPDATED WITH 1024PX FIX
    ================================ */
 
 /* Tablet breakpoint - maintain cutout and overlap */
 @media (max-width: 1024px) and (min-width: 769px) {
   /* Maintain special positioning at tablet size */
   .hero-style1 + .hero-actions-block,
   .hero-section-wrapper + .hero-actions-block,
   .footer-style1 + .hero-actions-block,
   header .hero-actions-block {
     position: relative;
     margin-left: var(--spacing-8);
     margin-right: var(--spacing-8);
     margin-top: 0; /* Will be overridden by JS with negative margin */
     width: 100%;
     max-width: calc(100% - var(--spacing-16));
     transform: none;
   }
   
   /* Base hero actions styles for tablet */
   .hero-actions-block {
     position: relative;
     z-index: 10;
     width: 100%;
     max-width: calc(100% - var(--spacing-16));
     margin-left: var(--spacing-8);
     margin-right: var(--spacing-8);
   }
   
   /* Maintain cutout effect at tablet */
   .hero-actions-block.cutout-active {
     background: transparent;
     box-shadow: none;
     border: none;
   }
   
   /* Keep triangle visible at tablet */
   .hero-actions-block::before {
     display: block !important;
   }
   
   /* Maintain transparent backgrounds in cutout mode */
   .hero-actions-block.cutout-active .hero-actions-news,
   .hero-actions-block.cutout-active .hero-actions-buttons,
   .hero-actions-block.cutout-active .hero-actions-quote,
   .hero-actions-block.cutout-active .hero-actions-signup,
   .hero-actions-block.cutout-active .hero-actions-video,
   .hero-actions-block.cutout-active .hero-actions-horizontal-signup {
     background: transparent;
   }
   
   /* Light background adjustments still apply */
   .hero-actions-block.cutout-active.on-light-bg * {
     color: var(--gray-900);
     text-shadow: 
       0 0 20px rgba(255, 255, 255, 0.9),
       0 0 10px rgba(255, 255, 255, 0.8),
       0 1px 3px rgba(255, 255, 255, 1);
   }
   
   /* Maintain clip-path on hero/footer sections */
   .hero-style1.has-hero-actions-cutout,
   .footer-style1.has-hero-actions-cutout {
     position: relative;
     overflow: visible;
   }
   
   /* Title truncation adjustments for tablet */
   .hero-actions-title {
     -webkit-line-clamp: 2; /* Max 2 lines on tablet */
   }
   
   .hero-actions-news .hero-actions-title,
   .hero-actions-news:not(.has-image) .hero-actions-title,
   .hero-actions-news .hero-actions-title a,
   .hero-actions-news:not(.has-image) .hero-actions-title a {
     display: -webkit-box;
     -webkit-line-clamp: 2; /* Max 2 lines on tablet */
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   /* Updated responsive for button grid at tablet */
   .hero-actions-buttons__grid {
     gap: var(--spacing-3);
     padding: var(--spacing-4);
   }
   
   /* Adjust button height on tablet */
   .hero-actions-buttons__button {
     min-height: 140px;
     height: 140px;
     padding: var(--spacing-3);
   }
   
   /* Adjust single button height */
   .hero-actions-buttons--count-1 .hero-actions-buttons__button {
     height: 280px;
     min-height: 280px;
   }
   
   /* Text sizes for tablet */
   .hero-actions-buttons__text {
     font-size: var(--font-size-medium);
   }
   
   .hero-actions-buttons__icon {
     font-size: 4rem;
   }
   
   .hero-actions-buttons__eyebrow {
     font-size: var(--font-size-medium);
   }
   
   /* VERTICAL SIGNUP FORM TABLET ADJUSTMENTS */
   .hero-actions-signup {
     width: 100%;
     max-width: 100%;
   }
   
   /* Reduce gap slightly on tablet */
   .hero-actions-signup .form-fields-grid {
     gap: var(--spacing-2);
   }
   
   /* Smaller padding on inputs to save space */
   .hero-actions-signup input,
   .hero-actions-signup textarea,
   .hero-actions-signup select {
     font-size: var(--font-size-small);
     padding: var(--spacing-2) var(--spacing-3);
   }
   
   /* Horizontal signup adjustments for tablet */
   .hero-actions-horizontal-signup {
     padding: var(--spacing-5) var(--spacing-6);
   }
   
   .form-fields-row {
     flex-wrap: wrap; /* Allow wrapping on tablet if needed */
   }
   
   .form-field {
     min-width: 150px; /* Minimum width before wrapping */
   }
   
   .hero-horizontal-submit {
     min-width: 140px; /* Slightly smaller on tablet */
     padding: var(--spacing-4) var(--spacing-5);
   }
 }
 
 /* Mobile breakpoint - MAINTAIN cutout and overlap with adjustments */
 @media (max-width: 768px) {
   /* MAINTAIN special positioning on mobile */
   .hero-style1 + .hero-actions-block,
   .hero-section-wrapper + .hero-actions-block,
   .footer-style1 + .hero-actions-block,
   header .hero-actions-block {
     position: relative;
     margin-left: var(--spacing-2);
     margin-right: var(--spacing-2);
     margin-top: 0; /* Will be overridden by JS with negative margin */
     width: 100%;
     max-width: calc(100% - var(--spacing-4));
     transform: none;
   }
   
   .hero-actions-block {
     position: relative;
     z-index: 10;
     width: 100%;
     max-width: calc(100% - var(--spacing-8));
     margin-left: var(--spacing-8);
     margin-right: var(--spacing-8);
   }
   
   /* MAINTAIN cutout effect on mobile */
   .hero-actions-block.cutout-active {
     background: transparent;
     box-shadow: none;
     border: none;
   }
   
   /* Keep triangle visible on mobile */
   .hero-actions-block::before {
     display: block !important;
   }
   
   /* Maintain transparent backgrounds in cutout mode */
   .hero-actions-block.cutout-active .hero-actions-news,
   .hero-actions-block.cutout-active .hero-actions-buttons,
   .hero-actions-block.cutout-active .hero-actions-quote,
   .hero-actions-block.cutout-active .hero-actions-signup,
   .hero-actions-block.cutout-active .hero-actions-video,
   .hero-actions-block.cutout-active .hero-actions-horizontal-signup {
     background: transparent;
   }
   
   /* Light background adjustments still apply */
   .hero-actions-block.cutout-active.on-light-bg * {
     color: var(--gray-900);
     text-shadow: 
       0 0 20px rgba(255, 255, 255, 0.9),
       0 0 10px rgba(255, 255, 255, 0.8),
       0 1px 3px rgba(255, 255, 255, 1);
   }
   
   /* MAINTAIN clip-path on hero/footer sections for mobile */
   .hero-style1.has-hero-actions-cutout,
   .footer-style1.has-hero-actions-cutout {
     position: relative;
     overflow: visible;
     /* Let JS handle the clip-path */
   }
   
   /* Filter component mobile */
   .hero-actions-filter .filter-label h2 {
     font-size: 32px;
   }
   
   .hero-actions-filter .category-list a {
     font-size: 16px;
   }
   
   .hero-actions-filter-content {
     flex-direction: column;
     gap: var(--spacing-4);
   }
   
   .hero-actions-filter .category-list li {
     margin-bottom: 8px;
   }
   
   /* Full width inputs on mobile */
   .hero-actions-signup .form-field {
     width: 100%;
   }
   
   /* Other mobile styles */
   .hero-actions-block {
     padding: var(--spacing-4);
   }
   
   .hero-actions-title {
     font-size: var(--font-size-small);
   }
   
   
   .hero-actions-news.has-image .hero-actions-image {
     flex: none;
     margin-bottom: var(--spacing-4);
   }
   
   .hero-actions-news.has-image .hero-actions-image img {
     height: 150px;
     width: 100%;
     object-fit: cover;
   }
 
   /* Title truncation on mobile */
   .hero-actions-news .hero-actions-title,
   .hero-actions-news .hero-actions-title a {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   /* Mobile responsive adjustment for no-image title */
   .hero-actions-news:not(.has-image) .hero-actions-title {
     font-size: calc(var(--font-size-medium) * 1.3);
   }
   
   /* Quote component mobile */
   .hero-quote-text {
     font-size: var(--font-size-medium);
   }
   
   .hero-quote-attribution {
     flex-direction: column;
     gap: var(--spacing-2);
   }
   
   .quote-author-image {
     width: 40px;
     height: 40px;
   }
   
   /* Horizontal signup responsive */
   .hero-actions-horizontal-signup {
     padding: var(--spacing-4);
   }
   
   .form-fields-row {
     flex-direction: column;
     gap: var(--spacing-3);
   }
   
   .form-field {
     width: 100%;
   }
   
   .hero-horizontal-submit {
     width: 100%;
     min-width: auto;
     padding: var(--spacing-4);
   }
   
   .privacy-notice {
     margin-top: var(--spacing-3);
   }
   
   .privacy-notice p {
     font-size: var(--font-size-xs);
   }
   
   /* CF7 responsive */
   .hero-actions-horizontal-signup .wpcf7-form p {
     flex-direction: column;
     gap: var(--spacing-3);
   }
   
   .hero-actions-horizontal-signup .wpcf7-form input[type="text"],
   .hero-actions-horizontal-signup .wpcf7-form input[type="email"],
   .hero-actions-horizontal-signup .wpcf7-form input[type="tel"],
   .hero-actions-horizontal-signup .wpcf7-form input[type="submit"] {
     width: 100%;
     min-width: auto;
   }
 
   /* Stack to single column on mobile */
   .hero-actions-buttons__grid {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     min-height: auto;
   }
   
   /* Eyebrow/empty cell takes full width */
   .hero-actions-buttons__eyebrow-cell,
   .hero-actions-buttons__empty-cell {
     grid-column: 1;
     grid-row: auto;
   }
   
   /* All buttons stack vertically */
   .hero-actions-buttons__button,
   .hero-actions-buttons--count-1 .hero-actions-buttons__button,
   .hero-actions-buttons--count-2 .hero-actions-buttons__button,
   .hero-actions-buttons--count-3 .hero-actions-buttons__button {
     grid-column: 1;
     grid-row: auto;
   }
   
   /* Remove absolute positioning on mobile */
   .hero-actions-buttons--count-1.has-eyebrow .hero-actions-buttons__eyebrow-wrapper {
     position: static;
     width: 100%;
     background: none;
     padding: 0 0 var(--spacing-3) 0;
     text-align: center;
   }
   
   .hero-actions-buttons--count-1.has-eyebrow .hero-actions-buttons__eyebrow {
     color: inherit;
   }
   
   /* Consistent button height */
   .hero-actions-buttons__button,
   .hero-actions-buttons--count-1 .hero-actions-buttons__button {
     min-height: 100px;
     height: 100px;
   }
 }
 
 @media (max-width: 480px) {
  .hero-actions-news.has-image {
    display:block;
  }

  .hero-actions-news.has-image .hero-actions-image {
    margin-bottom:var(--spacing-8);
  }

  .hero-actions-meta {
    display:none;
  }

  .hero-actions-block.cutout-active::before {
    opacity:0 !important;
  }
   /* Title truncation on mobile */
   .hero-actions-news .hero-actions-title,
   .hero-actions-news .hero-actions-title a {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-height: none !important; /* in case there's a max-height set */
   }

   .hero-actions-block {
    padding-right: var(--spacing-4) !important;
   }

   .hero-actions-filter .filter-label h2 {
     font-size: 24px;
   }
   
   .hero-actions-filter .category-list a {
     font-size: 14px;
   }
 
   .hero-actions-horizontal-signup {
     padding: var(--spacing-3);
   }
   
   .form-input {
     padding: var(--spacing-3);
     font-size: var(--font-size-small);
   }
   
   .hero-horizontal-submit {
     padding: var(--spacing-3);
     font-size: var(--font-size-small);
   }
   
   /* Even smaller padding on very small screens */
   .hero-actions-signup input,
   .hero-actions-signup textarea,
   .hero-actions-signup select {
     font-size: var(--font-size-small);
   }
   
   .hero-signup-submit {
     padding: var(--spacing-3);
     font-size: var(--font-size-small);
   }
 }
 
 /* Title truncation fallback for browsers that don't support line-clamp */
 @supports not (-webkit-line-clamp: 2) {
   .hero-actions-title,
   .hero-actions-title a {
     max-height: 3em;
     overflow: hidden;
     position: relative;
   }
   
   .hero-actions-news .hero-actions-title,
   .hero-actions-news .hero-actions-title a {
     max-height: 4.5em; /* ~3 lines */
   }
   
   .hero-actions-news:not(.has-image) .hero-actions-title,
   .hero-actions-news:not(.has-image) .hero-actions-title a {
     max-height: 6em; /* ~4 lines */
   }
   
   /* Add gradient fade for fallback */
   .hero-actions-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 30%;
     height: 1.2em;
     background: linear-gradient(to right, transparent, currentColor);
     opacity: 0.8;
   }
 }

 @media (min-width: 1281px) {
  /* ABOVE 1280px - Ensure titles are fully visible */
  .hero-actions-news .hero-actions-title,
  .hero-actions-news .hero-actions-title a {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    text-overflow: clip;
    max-height: none;
  }

  .hero-actions-news.has-image .hero-actions-image {
    flex: 0 0 45%;
    margin-bottom: 0;
    align-self: stretch;
}
}
 
 /* Title truncation at specific breakpoints */
 @media (max-width: 1280px) {
   /* Title truncation starts at 1280px */
   .hero-actions-news .hero-actions-title {
     display: -webkit-box;
     -webkit-line-clamp: 2; /* 2 lines for titles with images */
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .hero-actions-news .hero-actions-title a {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .hero-actions-news:not(.has-image) .hero-actions-title,
   .hero-actions-news:not(.has-image) .hero-actions-title a {
     -webkit-line-clamp: 3; /* 3 lines when no image */
   }
 }

 /* ================================
   VERTICAL SIGNUP FORM - 480px MOBILE FIX
   Each input and button on its own line
   ================================ */
@media (max-width: 480px) {
  /* Stack all form fields vertically */
  .hero-actions-signup .form-fields-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-3) !important;
  }
  
  /* Ensure each field takes full width */
  .hero-actions-signup .form-field {
    width: 100% !important;
    flex: none !important;
    min-width: 100% !important;
  }
  
  /* Make all inputs full width */
  .hero-actions-signup .form-input,
  .hero-actions-signup input[type="text"],
  .hero-actions-signup input[type="email"],
  .hero-actions-signup input[type="tel"],
  .hero-actions-signup input[type="url"],
  .hero-actions-signup textarea,
  .hero-actions-signup select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Submit button on its own line, full width */
  .hero-signup-submit {
    width: 100% !important;
    margin-top: var(--spacing-2) !important;
  }
  
  /* Reduce padding on the signup component for mobile */
  .hero-actions-signup {
    padding: var(--spacing-4) !important;
  }
  
  /* Stack CF7 form fields if used */
  .hero-actions-signup .wpcf7-form p {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-3) !important;
  }
  
  .hero-actions-signup .wpcf7-form input[type="text"],
  .hero-actions-signup .wpcf7-form input[type="email"],
  .hero-actions-signup .wpcf7-form input[type="tel"],
  .hero-actions-signup .wpcf7-form input[type="url"],
  .hero-actions-signup .wpcf7-form textarea,
  .hero-actions-signup .wpcf7-form select,
  .hero-actions-signup .wpcf7-form input[type="submit"] {
    width: 100% !important;
    margin: 0 0 var(--spacing-2) 0 !important;
  }
}