/* testimonials.css */

:root {
    /* Variables for easy customization */
    --testimonial-gap: 1.5rem; /* Gap between cards */
    --testimonial-padding: 1.75rem; /* Padding inside cards */
    --testimonial-border-radius: 10px; /* Slightly more rounded corners */
    --testimonial-bg-start: #f8f9fa;  /* Very light grey start */
    --testimonial-bg-end: #e9ecef;    /* Slightly darker grey end */
    --testimonial-text-color: #000000; /* Black text as requested */
    --testimonial-meta-color: #495057; /* Dark grey for meta info */
    --testimonial-border-color: #dee2e6; /* Subtle border color */
    --testimonial-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); /* Softer shadow */
    --testimonial-link-color: #0056b3;        /* A professional, accessible blue */
    --testimonial-link-hover-color: #003d80;  /* A darker shade for hover/focus */
    --testimonial-link-underline-color: rgba(0, 86, 179, 0.5); /* Slightly transparent */
  }
  
  /* Main grid container */
  .testimonial-grid {
    display: grid;
    gap: 1.5rem;
    /* Default: 2 columns for desktop */
    grid-template-columns: repeat(2, 1fr);
    margin: 2rem 0; /* Add some vertical space around the grid */
  }
  
  /* Individual testimonial card styling */
  .testimonial-card {
    background: linear-gradient(140deg,  #f8f9fa,  );
    border-radius: 10px; 
    padding: 1.75rem; 
    color: #000000;
    border: 1px solid  #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    display: flex; /* Use flexbox to push footer down */
    flex-direction: column; /* Stack content vertically */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  
  .testimonial-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Slightly enhance shadow on hover */
  }
  
  /* Main content area (quote) */
  .testimonial-card__content {
    flex-grow: 1; /* Allows this element to grow and push the footer */
  }
  
  /* Styling for the blockquote */
  .testimonial-card__quote {
    margin: 0 0 1.25rem 0; /* Bottom margin to separate from attribution */
    font-size: 1rem; /* Base size for quote */
    line-height: 1.7;
    font-style: italic;
    position: relative;
    padding-left: 2.5rem; /* Space for quote marks */
  }
  
  /* Adding quote marks using pseudo-elements */
  .testimonial-card__quote::before {
    content: '\201C'; /* Left double quotation mark */
    position: absolute;
    left: 0;
    top: -0.1em; /* Adjust vertical position */
    font-size: 3em; /* Large quote mark */
    color:  #dee2e6; /* Use border color for subtle effect */
    line-height: 1;
    font-style: normal; /* Reset italic */
  }
  
  /* Paragraph inside blockquote */
  .testimonial-card__quote p {
    margin: 0;
  }
  
  /* Footer area for attribution */
  .testimonial-card__attribution {
    margin-top: auto; /* Push to bottom (works with flex container) */
    padding-top: 0.75rem;
    border-top: 1px solid  #dee2e6;
    text-align: right; /* Align attribution to the right */
  }
  
  /* Name styling */
  .testimonial-card__name {
    font-size: 1rem;
    font-weight: 600; /* Use font-weight instead of <strong> if preferred */
    margin-bottom: 0.15rem;
    color:  #000000; /* Ensure name is black */
  }
  
  /* Meta information (Company, Location) */
  .testimonial-card__meta {
    font-size: 0.9rem;
    color:  #495057; 
    line-height: 1.4;
  }
  
  /* Target all links specifically within a testimonial card */
  .testimonial-card a {
    color:  #0056b3; 
    font-weight: 500; /* Slightly bolder than normal text maybe */
    text-decoration: underline;
    text-decoration-color: rgba(0, 86, 179, 0.5); /* Subtle underline */
    text-underline-offset: 2px; /* Add a little space below text */
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    /* Prevent links from breaking words awkwardly if possible */
    word-break: break-word; /* Allows breaking long URLs/words */
  }

  /* Hover and Focus states for improved interaction */
  .testimonial-card a:hover,
  .testimonial-card a:focus {
    color: #003d80; 
    text-decoration-color: #003d80;; /* Make underline solid/darker */
    /* Remove underline on hover if preferred, but keep it for focus */
    /* text-decoration: none; */
  }

  /* Specific styling for focus state for accessibility */
  /* Modern browsers use :focus-visible */
  .testimonial-card a:focus-visible {
    outline: 2px dashed  #0056b3;  /* Dashed outline */
    outline-offset: 2px; /* Space between text and outline */
  }
  /* Fallback for older browsers that don't support focus-visible */
  .testimonial-card a:focus {
    /* You might keep the dashed outline or use a solid one */
      outline: 2px dashed  #0056b3; 
      outline-offset: 2px;
  }


  /* --- Responsive Adjustments --- */
  
  /* Stack cards into a single column on mobile */
  @media (max-width: 767px) {
    .testimonial-grid {
      grid-template-columns: 1fr; /* Single column */
      gap: calc( 1.5rem * 0.75); /* Slightly reduce gap */
    }
  
    .testimonial-card {
       padding: calc(1.75rem * 0.8); /* Slightly reduce padding */
    }
  
    .testimonial-card__quote {
       padding-left: 2rem; /* Adjust quote mark spacing */
    }
    .testimonial-card__quote::before {
      font-size: 2.5em;
    }
  }