/* ===================================================================
   COMPONENTS
   Cards, buttons, breadcrumbs, ripple effects
   =================================================================== */

/* ===================================================================
   CARDS
   =================================================================== */

glass-card {
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-1);
     background: var(--glass-background);
     border: var(--glass-border);
     backdrop-filter: var(--glass-backdrop-filter);
     -webkit-backdrop-filter: var(--glass-backdrop-filter);
     scroll-snap-align: center;
     align-items: center;
     padding: var(--spacing-4xl);
     transition: transform var(--motion-fast) var(--motion-ease), 
                 box-shadow var(--motion-fast) var(--motion-ease);
}

/* Card entrance animations (apply .animate-in to parent grid) */
.animate-in glass-card,
.animate-in paper-card {
     opacity: 0;
     transform: translateY(var(--anim-offset));
     animation: fadeUp var(--motion-slow) var(--motion-ease) forwards;
}

/* Staggered entrance for grid children */
.animate-in > :nth-child(1) { animation-delay: var(--anim-stagger-1); }
.animate-in > :nth-child(2) { animation-delay: var(--anim-stagger-2); }
.animate-in > :nth-child(3) { animation-delay: var(--anim-stagger-3); }
.animate-in > :nth-child(4) { animation-delay: var(--anim-stagger-4); }
.animate-in > :nth-child(5) { animation-delay: var(--anim-stagger-5); }
.animate-in > :nth-child(6) { animation-delay: var(--anim-stagger-6); }
.animate-in > :nth-child(7) { animation-delay: var(--anim-stagger-7); }
.animate-in > :nth-child(8) { animation-delay: var(--anim-stagger-8); }

glass-card:hover {
     transform: translateY(var(--lift-lg));
     box-shadow: var(--shadow-2);
}

@media (max-width: 1023px) {
     glass-card {
          padding: var(--spacing-xl);
     }
}

@media (min-width: 1024px) {
     glass-card {
          width: 100%;
          border-radius: var(--radius-lg);
          padding: var(--spacing-4xl);
          scroll-snap-align: none;
     }
}

paper-card {
     background-color: var(--color-white);
     padding: var(--spacing-4xl);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-1);
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     transition: transform var(--motion-fast) var(--motion-ease), 
                 box-shadow var(--motion-fast) var(--motion-ease);
     scroll-snap-align: center;
}

paper-card:hover {
     transform: translateY(var(--lift-lg));
     box-shadow: var(--shadow-2);
}

paper-card.no-hover:hover {
     transform: none;
     box-shadow: var(--shadow-1);
}

@media (max-width: 1023px) {
     paper-card {
          scroll-snap-align: center;
          padding: var(--spacing-xl);
     }
}

/* ===================================================================
   BREADCRUMBS
   =================================================================== */

.breadcrumb {
     text-transform: uppercase;
     color: var(--color-text-medium);
     font-family: var(--font-body);
     letter-spacing: var(--letter-spacing-tight);
     line-height: var(--line-height-relaxed);
     font-size: var(--font-size-lg);
     text-align: left;
}

.breadcrumb ol {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
}

.breadcrumb li {
     display: inline-flex;
     align-items: center;
}

.breadcrumb li + li::before {
     content: "/";
     padding: 0 var(--spacing-sm);
     color: var(--color-border-light);
     /* Hide separator from screen readers */
     speak: never;
}

.breadcrumb li a {
     color: var(--color-brand-blue);
     text-decoration: none;
}

.breadcrumb li a:hover {
     text-decoration: underline;
}

.breadcrumb li a:focus-visible {
     outline: 2px solid var(--color-focus-outline);
     outline-offset: 2px;
     border-radius: var(--radius-sm);
}

.breadcrumb li[aria-current="page"] {
     color: var(--color-text-dark);
     font-weight: var(--font-weight-semibold);
}

@media (max-width: 1023px) {
     .breadcrumb,
     .breadcrumb ol {
          font-size: var(--font-size-xs);
          letter-spacing: 0.5px;
     }
}

/* Legacy support for custom elements */
breadcrumb {
     text-transform: uppercase;
     color: var(--color-text-medium);
     font-family: var(--font-body);
     letter-spacing: var(--letter-spacing-tight);
     line-height: var(--line-height-relaxed);
     font-size: var(--font-size-lg);
     text-align: left;
}

@media (max-width: 1023px) {
     breadcrumb {
          font-size: var(--font-size-xs);
          letter-spacing: 0.5px;
     }
}

breadcrumb breadcrumb-item+breadcrumb-item:before {
     content: "/";
     padding: 0 var(--spacing-sm);
     color: var(--color-border-light);
}

breadcrumb-item a {
     color: var(--color-brand-blue);
     text-decoration: none;
}

/* ===================================================================
   BUTTONS
   =================================================================== */

.btn {
     background-image: none;
     border: 1px solid transparent;
     border-radius: var(--radius-none);
     box-shadow: var(--shadow-1);
     cursor: pointer;
     display: inline-block;
     font-family: var(--font-heading);
     font-size: var(--btn-font-size-mobile);
     font-weight: var(--font-weight-light);
     letter-spacing: var(--letter-spacing-normal);
     line-height: var(--btn-line-height);
     margin-bottom: 0;
     padding: var(--btn-padding-mobile);
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
     transition: transform var(--motion-fast) var(--motion-ease), 
                 box-shadow var(--motion-fast) var(--motion-ease), 
                 background-color var(--motion-fast) var(--motion-ease), 
                 color var(--motion-fast) var(--motion-ease);
     user-select: none;
     vertical-align: middle;
     white-space: nowrap;
}

@media screen and (min-width: 1024px) {
     .btn {
          padding: var(--btn-padding-desktop);
          font-size: var(--btn-font-size-desktop);
          font-weight: var(--font-weight-bold);
     }
}

.btn:focus-visible {
     outline: 3px solid var(--color-focus-outline);
     outline-offset: 2px;
}

/* Ghost buttons on dark backgrounds need white focus ring */
.btn.btn-ghost:focus-visible {
     outline-color: var(--color-white);
     box-shadow: 0 0 0 6px rgba(0, 105, 180, 0.5);
}

.btn:hover,
.btn:focus {
     color: var(--color-text-medium);
     text-decoration: none;
     box-shadow: var(--shadow-2);
     transform: translateY(var(--lift-sm));
}

.btn:active {
     background-image: none;
     box-shadow: var(--shadow-1);
     transform: translateY(0);
}

.btn.btn-ghost {
     color: var(--color-white);
     border: 1px solid var(--color-white);
     margin-block: var(--spacing-md);
     font-family: var(--font-heading);
     font-weight: var(--font-weight-normal);
}

/* ===================================================================
   RIPPLE EFFECT (Material Design)
   =================================================================== */

.ripple {
     position: relative;
     overflow: hidden;
}

.ripple::after {
     content: "";
     position: absolute;
     width: var(--ripple-size, 0);
     height: var(--ripple-size, 0);
     left: calc(var(--ripple-x, 50%) - (var(--ripple-size, 0) / 2));
     top: calc(var(--ripple-y, 50%) - (var(--ripple-size, 0) / 2));
     background: var(--color-ripple);
     border-radius: var(--radius-pill);
     transform: scale(0);
     opacity: 0.35;
     pointer-events: none;
     transition: transform var(--motion-slow) var(--motion-ease), opacity var(--motion-slow) linear;
}

.ripple-animating::after {
     transform: scale(1);
     opacity: 0;
}