/* Liability Hero Section Styles */
/* 
 * This CSS file is part of the main liability page structure:
 * - Used by: components/liability/liability-hero/liability-hero.php
 * - Assets loaded by: smart-liability-loader.php
 * - Following site-grid-rails.css for layout and style.css for colors/fonts
 */

.liability-hero {
  background-color: var(--ica-green-deep);
  padding: var(--global-padding-desktop) 0;
  min-height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.liability-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

.liability-hero__image {
  flex-shrink: 0;
}

.liability-hero__image img {
  width: 350px;
  object-fit: contain;
  display: block;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {  
  .liability-hero__image img {
    width: 240px;
  }
}

@media (max-width: 480px) {
  .liability-hero {
    padding: var(--global-padding-mobile);
  }
  
  .liability-hero__image img {
    width: 200px;
  }
}