/* === Responsive fixes for Portfolio page (2025-09-15) === */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }
}

/* Card layout */
.portfolio-grid .card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface, #0f0f0f);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Image wrapper keeps consistent aspect ratio so the grid doesn't jump */
.portfolio-grid .portfolio-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Make images responsive and neatly cropped inside their wrapper */
.portfolio-grid .portfolio-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  aspect-ratio: auto; /* avoids double-constraining images */
}

/* Ensure any images placed directly in cards also behave */
.portfolio-grid img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Info area */
.portfolio-grid .portfolio-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Optional: tidy generic card content spacing */
.portfolio-grid .card-content { padding: 0; }

/* Prevent oversized images anywhere on the page from breaking layout */
main img, section img, .content img {
  max-width: 100% !important;
  height: auto !important;
}

/* Avoid layout overflow on very small screens */
@media (max-width: 380px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}


/* === Global responsive/layout fixes (2025-09-26) === */

/* Prevent any image from exceeding its container */
main img, section img, .content img, .split-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Card grid used on the homepage */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Generic card styling (safe defaults) */
.card {
  background: var(--color-white, #fff);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.06));
  overflow: hidden;
}

/* Image wrapper inside cards */
.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  max-height: none;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Portfolio grid & items */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
}
@media (min-width: 1200px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
  }
}
.portfolio-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-md, 12px);
}
.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-grid .card-content { padding: 0; }
.portfolio-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.55) 100%); }
.portfolio-info h3, .portfolio-info p { margin: 0; }

/* Split sections (image + text) */
.split-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg, 32px);
}
.split-content, .split-image { flex: 1; }
@media (max-width: 992px) {
  .split-section { flex-direction: column; }
  .split-image { order: -1; }
}

/* Extra safety on very small screens */
@media (max-width: 380px) {
  .portfolio-grid, .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Avoid layout overflow from long words/URLs */
* { word-wrap: break-word; overflow-wrap: anywhere; }