/* === General Styling for Artist Profile (Desktop Default) === */
.artist-profile { display: -webkit-flex; display: flex; max-width: 1000px; margin: 20px auto; font-family: 'Helvetica Neue',Arial,sans-serif; }

/* Left Column Styling */
.artist-profile .left-column { width: 25%; padding: 0 20px 20px 0; }
.artist-profile .left-column .artist-box { background: -webkit-linear-gradient(to bottom,#fff,#f8f8f8); background: linear-gradient(to bottom,#fff,#f8f8f8); padding: 20px; border-radius: 10px; border: 1px solid #ddd; -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.1); box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.artist-profile .left-column img { width: 100%; border-radius: 10px; object-fit: cover; margin-bottom: 15px; -webkit-box-shadow: 0 4px 6px rgba(0,0,0,.1); box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.artist-profile .left-column .artist-meta p { margin: 10px 0; color: #333; font-size: .95em; }

/* Center Column Styling */
.artist-profile .center-column { width: 50%; padding: 20px; }
.artist-profile .section-header { font-size: 1.3em; color: #444; margin: 20px 0 10px; font-weight: bold; text-transform: uppercase; border-bottom: 2px solid #ddd; }

/* Table Box Styling */
.artist-profile .table-box { background: -webkit-linear-gradient(to bottom,#fefefe,#f4f4f4); background: linear-gradient(to bottom,#fefefe,#f4f4f4); border-radius: 10px; border: 1px solid #ddd; -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.1); box-shadow: 0 4px 8px rgba(0,0,0,.1); overflow: hidden; margin-bottom: 20px; }

/* Table Styling */
.artist-profile table { width: 100%; border-collapse: collapse; font-size: .95em; }
.artist-profile th, .artist-profile td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eaeaea; }
.artist-profile th { background: -webkit-linear-gradient(to bottom,#f8f8f8,#e0e0e0); background: linear-gradient(to bottom,#f8f8f8,#e0e0e0); color: #333; font-weight: bold; text-transform: uppercase; }
.artist-profile tr:nth-child(even) { background-color: #f9f9f9; }
.artist-profile tr:hover { background-color: #f1f1f1; }
.artist-profile td { color: #555; }

/* Right Column Styling */
.artist-profile .right-column { width: 25%; padding: 20px; background: -webkit-linear-gradient(to bottom,#fff,#f8f8f8); background: linear-gradient(to bottom,#fff,#f8f8f8); border-radius: 10px; border: 1px solid #ddd; -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.1); box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.artist-profile .right-column p { font-size: .9em; margin: 10px 0; color: #444; }

/* === Mobile Styling for Artist Profile === */
@media screen and (max-width: 768px) {
.artist-profile { display: block; margin: 0 auto; padding: 15px; }
.artist-profile .left-column { width: 100%; text-align: center; }
.artist-profile .left-column img { width: 100%; height: auto; margin: 0 auto 20px; border-radius: 0; -webkit-box-shadow: 0 4px 6px rgba(0,0,0,.1); box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.artist-profile .center-column { font-size: 1em; width: 110%; padding: 0 -15px; margin: -10px 0; max-width: 350px; }
.artist-profile .section-header { font-size: 1.3em; text-align: center; margin: 20px 0; border-bottom: 2px solid #ddd; padding-bottom: 5px; }
.artist-profile .right-column { display: none; }

/* Center buttons */
.artist-profile .elgg-button { display: block; width: 90%; max-width: 300px; margin: 10000px auto; text-align: center; }

/* Flexible content containers for Interviews and Albums */
.artist-profile .content-box { margin: 15px 0; padding: 15px; border-radius: 10px; background: #fff; -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.1); box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.artist-profile .content-box h3 { font-size: 1.2em; margin-bottom: 10px; text-align: left; }
.artist-profile .content-box .content-item { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; margin-bottom: 15px; font-size: 1em; }
.artist-profile .content-box .content-item .title { font-weight: bold; color: #007bff; text-decoration: none; }
.artist-profile .content-box .content-item .title:hover { text-decoration: underline; }
.artist-profile .content-box .content-item .meta { font-size: .9em; color: #666; margin-top: 5px; }
.artist-profile .content-box .view-all-link { display: block; margin-top: 10px; font-size: .9em; text-align: center; color: #007bff; text-decoration: none; }
.artist-profile .content-box .view-all-link:hover { text-decoration: underline; }
}