/* Index page specific styles */

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}

.contact-row {
  flex-basis: 100%;
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.contact-row .card:has(a[href^="mailto"]) {
  flex: 0 1 auto;
}

.contact-row .card:has(a[href*="github"]) {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  height: 100%;
  min-width: 0;
}

.card {
  background-color: #1e1e1e;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  padding: 16px;
}

/* Presentation card - has image */
section:has(img.landscape-image) {
  flex: 3 1 60%;
  padding: 0;
}

section:has(img.landscape-image) img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* About me card - has h2, no links */
section:has(h2):not(:has(a)) {
  flex: 2 1 35%;
}

/* Bullet Points - matching resume style */
.card ul {
  margin-top: 12px;
  margin-bottom: 32px;
  padding-left: 16px;
  list-style: none;
}

.card li {
  margin-bottom: 10px;
  padding-left: 20px;
  line-height: 1.75;
  color: #d0d0d0;
  text-indent: -20px;
}

.card li::before {
  content: '▸';
  color: rgb(120, 170, 230);
  font-weight: bold;
  font-size: 1.1em;
  padding-right: 8px;
}

/* Contact card - has mailto link */
section:has(a[href^="mailto"]) {
  flex: 2 1 35%;
  padding: 0;
  max-width: 35rem;
  transition: box-shadow var(--button-hover-transition-duration), 
              transform var(--button-hover-transition-duration), 
              background-color var(--button-hover-transition-duration),
              border var(--button-hover-transition-duration);
  border: 2px solid transparent;
}

section:has(a[href^="mailto"]) a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: clamp(1.5em, 4vw, 2.5em);
  font-weight: 700;
  color: #fff;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 16px;
  box-sizing: border-box;
  transition: text-shadow var(--button-hover-transition-duration);
}

section:has(a[href^="mailto"]) svg {
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  color: #fff;
  transition: filter var(--button-hover-transition-duration);
}

/* Github card - has github link */
section:has(a[href*="github"]) {
  padding: 0;
  transition: box-shadow var(--button-hover-transition-duration), 
              transform var(--button-hover-transition-duration), 
              background-color var(--button-hover-transition-duration),
              border var(--button-hover-transition-duration);
  border: 2px solid transparent;
}

section:has(a[href*="github"]) a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 16px;
  box-sizing: border-box;
  text-decoration: none;
}

/* Hover effects for interactive cards */
section:has(a[href^="mailto"]):hover,
section:has(a[href*="github"]):hover {
  box-shadow: var(--button-hover-shadow);
  transform: var(--button-hover-transform);
  background-color: var(--button-hover-bg-color);
  border: 2px solid #6bb6ff;
}

section:has(a[href*="github"]):hover img {
  filter: var(--button-image-hover-filter);
  transition: filter var(--button-hover-transition-duration);
}

/* Contact card text glow on hover */
section:has(a[href^="mailto"]):hover a {
  text-shadow: 0 0 var(--button-image-hover-glow-size) var(--button-image-hover-glow-color),
               0 0 calc(var(--button-image-hover-glow-size) * 1.5) var(--button-image-hover-glow-color);
}

section:has(a[href^="mailto"]):hover svg {
  filter: brightness(var(--button-image-hover-brightness)) drop-shadow(0 0 var(--button-image-hover-glow-size) var(--button-image-hover-glow-color));
}

@media (max-width: 768px) {
  .landscape-image {
    border-radius: 4px;
  }

  
  .card li {
    padding-left: 18px;
  }
  
  .contact-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .contact-row .card:has(a[href*="github"]) {
    height: auto;
    width: 100%;
    max-width: 120px;
    align-self: center;
  }
}