/* ==== PROGRAMS SECTION - FULL CSS ==== */ /* Note: Critical CSS is in IcaPrograms-critical.css and should be inlined in */ /* Note: CSS variables are defined globally in style.css */ /* ==== PROGRAMS SECTION ==== */ .ica-programs{ grid-column: full-start / full-end; background: var(--ica-mint); padding: 50px 0; margin-bottom: 4rem; /* Add bottom margin to prevent overlap */ height: auto; min-height: auto; max-height: none; display: flex; flex-direction: column; justify-content: center; /* Center content vertically */ /* Fade-in animation properties - optimized for performance */ opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; /* Optimize for animations */ } /* Animation trigger class */ .ica-programs.animate-in { opacity: 1; transform: translateY(0); } /* Section Heading */ .programs-section-heading { font-family: var(--font-heading); text-transform: uppercase; font-size: clamp(3.4375rem, 5vw, 4.0625rem); font-weight: 300; line-height: 1; color: var(--ica-green-deep); text-align: center; margin: 0 0 2rem; } .ica-programs .section__inner{ grid-column: content-start / content-end; box-sizing: border-box; margin: 0 auto; max-width: var(--wp--style--global--wide-size, 1280px); padding-inline: var(--wp--style--root--padding-left, 1rem) var(--wp--style--root--padding-right, 1rem); width: 100%; } /* ==== GRID LAYOUT ==== */ .programs-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; text-align: center; } .programs-card{ display: flex; flex-direction: column; align-items: center; height: auto; min-height: auto; max-height: none; text-align: center; color: var(--ica-green-deep); background: white; padding: 1.2rem 0.8rem; /* Reduced padding to fix spacing issue */ border-radius: .6rem; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgba(30, 49, 47, 0.1); /* Card animation properties - optimized for performance */ opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; /* Optimize for animations */ } /* Staggered animation for cards */ .programs-card.animate-in { opacity: 1; transform: translateY(0); } /* Staggered delays for each card */ .programs-card:nth-child(1).animate-in { transition-delay: 0.1s; } .programs-card:nth-child(2).animate-in { transition-delay: 0.2s; } .programs-card:nth-child(3).animate-in { transition-delay: 0.3s; } .programs-card:nth-child(4).animate-in { transition-delay: 0.4s; } .programs-card:focus-visible{ outline: 2px solid var(--ica-green-deep); outline-offset: 3px; } .programs-card:hover{ transform: translateY(-3px); background: var(--ica-bg); border-color: var(--ica-green-deep); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } /* Card Link Styles */ .programs-card-link { display: block; text-decoration: none; color: inherit; } .programs-title-link { display: block; text-decoration: none; color: inherit; transition: color 0.2s ease; } .programs-title-link:hover, .programs-title-link:focus { color: var(--ica-teal); } .programs-icon{ display: block; margin: 0 auto .6rem; width: 40px; height: 40px; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .programs-title{ margin-top: .5rem; font-size: clamp(1.2rem, 2vw, 1.4rem); letter-spacing: .06em; text-transform: uppercase; margin: .3rem 0 .6rem; line-height: 1.2; font-weight: 500; } .programs-sublist{ margin-top: .25rem; margin: 0; padding: 0; list-style: none; font-size: 18px; letter-spacing: .03em; display: grid; gap: .2rem; } /* ==== RESPONSIVE DESIGN ==== */ @media (max-width: 1100px){ .programs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ica-programs { margin-bottom: 3rem; /* Reduced margin on medium screens */ } .programs-section-heading { font-size: clamp(3.4375rem, 5vw, 4.0625rem); margin-bottom: 3.5rem; } } @media (max-width: 560px){ .programs-grid{ grid-template-columns: 1fr; gap: 1.5rem; } .programs-card { max-width: 360px; margin: 0 auto; padding: 1.2rem 0.8rem; /* Consistent with desktop padding */ height: auto; min-height: auto; max-height: none; } .desktop-break { display: none; } .programs-title .first-word::after { content: " "; } .ica-programs { margin-bottom: 2rem; /* Further reduced margin on small mobile */ } .programs-section-heading { font-size: clamp(3.4375rem, 5vw, 4.0625rem); margin-bottom: 3.25rem; } } @media (max-width: 400px){ .programs-card { max-width: 330px; padding: 1rem 0.75rem; /* Further reduced for very small screens */ height: auto; min-height: auto; max-height: none; } .programs-title { font-size: 1.1rem; } } /* ==== REDUCED MOTION SUPPORT ==== */ @media (prefers-reduced-motion: reduce) { .programs-card { transition: none; } .programs-card:hover { transform: none; } }