/* Custom responsive tweaks and helpers */
html, body {
  -webkit-text-size-adjust: 100%;
}

/* Ensure images and svgs never overflow their containers */
img, svg {
  max-width: 100%;
  height: auto;
}

/* Make long links and texts wrap nicely on small screens */
.break-words {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Touch-friendly contact cards */
.contact-card {
  text-align: center;
  padding: 0.75rem;
  display: block;
  border-radius: 0.5rem;
}

/* Slightly larger tap targets on mobile */
@media (max-width: 640px) {
  .contact-card {
    padding: 1rem;
    font-size: 0.95rem;
  }
  header a.max-w-xs {
    max-width: 200px;
  }
}

/* Make header logo wrap better */
header a {
  word-break: break-word;
}

/* Ensure carousel images keep aspect and don't overflow */
.carousel-track img {
  width: 100%;
  height: auto;
  display: block;
}

/* Improve readability of text blocks on very small screens */
@media (max-width: 420px) {
  body { font-size: 15px; }
}

/* Social section specific tweaks */
#social {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#social .contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 88px;
}

#social .contact-card:focus,
#social .contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
}

#social .contact-card .link-url {
  font-size: 0.95rem;
  color: #0ea5e9; /* sky-500 */
  margin-top: 0.25rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.social-cta {
  display: inline-block;
  margin-top: 0.75rem;
  background-color: #0ea5e9;
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

.social-cta:hover { background-color: #0284c7; }

@media (max-width: 640px) {
  #contacts .grid { grid-template-columns: 1fr !important; }
  .social-cta { width: 100%; text-align: center; }
}

/* Announcements styles */
.announcement-card {
  display: block;
}
.announcement-card .announcement-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.announcement-body h3 { margin: 0; }

@media (min-width: 768px) {
  .announcement-card { align-items: center; }
  .announcement-card .announcement-image { width: 260px; }
}

.announcement-card + .announcement-card { margin-top: 1rem; }