/* profile_public_layout.css */
/* Shell inside the white card */
.profile-body {
  max-width: 1200px;
  margin: 0 auto;
}

/* Cover image: floated on the right so text can flow underneath */
.public-cover {
  float: right;
  width: min(52%, 520px);
  aspect-ratio: 3 / 2;
  margin: 0 0 1rem 1.5rem;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-card-lg, 12px);
  overflow: hidden;
  background: var(--surface-2, #f1f5f9);
}

.public-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Make sure the header/bio block clears the float at the end */
.profile-body .header-block::after {
  content: "";
  display: block;
  clear: both;
}

/* Bio / prose text – “liquid” under the image */
.profile-body .prose {
  font-size: 1rem;
  line-height: 1.6;
  word-break: break-word;
}

/* Avatar sizes – reuse across profile views */
.profile-avatar-md {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.avatar-fallback-md {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #f3f4f6);
  color: var(--text-muted, #6b7280);
  font-size: 1.5rem;
}

/* Responsive: on smaller screens stack the cover above the text */
@media (max-width: 992px) {
  .public-cover {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* Sidebar: keep icon + text on one line and vertically centered */
.studio-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.studio-sidebar .nav-link svg,
.studio-sidebar .nav-link i {
  flex: 0 0 auto;
}

/* ================================
   PUBLIC PROFILE — Blog section
   ================================ */

.public-blog-grid{
  display:grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;   /* mobile */
}

@media (min-width: 768px){
  .public-blog-grid{
    grid-template-columns: repeat(2, 1fr); /* tablet */
  }
}

@media (min-width: 992px){
  .public-blog-grid{
    grid-template-columns: repeat(4, 1fr); /* desktop: 4 in one row */
    gap: 1rem; /* was 1.25rem */
  }
}

.public-blog-card {
  background: var(--surface-2);
  border-radius: var(--radius-card-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.public-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

/* Ensure project cards match blog cards */
.public-blog-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Thumbnail (16:9 ratio fixed) */
.thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}

.thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

/* Body */
.public-blog-body {
  padding: 1rem;
}

/* "See all blogs" card */
.public-blog-more {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  background: var(--surface);
}

.public-blog-more:hover {
  background: var(--surface-2);
}

.more-icon {
  font-size: 2.2rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.profile-body .prose {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
/* Plus cards/boxes */
.public-plus-card,
.public-plus-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  background: var(--surface);
}

.public-plus-box {
  min-height: 120px;
}

.public-plus-card:hover,
.public-plus-box:hover {
  background: var(--surface-2);
  box-shadow: var(--shadow-strong);
}

.more-icon {
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}

/* Author icons (icon-only buttons) */
.author-icons .author-icon{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;

  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

.author-icons .author-icon:hover{
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}