/*

================================================================================

BIOGRAPHY TEMPLATE - RESPONSIVE CSS WITH INLINE IMAGES & INSTAGRAM FEEDS

Tables stay as TABLES on mobile (no row conversion)

Just horizontal scroll on small screens

================================================================================

*/

/* ============================================================ */

/* FEATURED IMAGE - CENTERED & FULL DISPLAY */

/* ============================================================ */

.biography-featured-image {

text-align: center !important;

margin: 0 auto 30px auto !important;

display: flex !important;

justify-content: center !important;

align-items: center !important;

width: 100% !important;

max-width: 100% !important;

clear: both !important;

float: none !important;

position: relative !important;

left: auto !important;

right: auto !important;

padding: 0 !important;

overflow: visible !important;

}

.biography-featured-image img {

display: block !important;

margin: 0 auto !important;

width: 100% !important;

height: auto !important;

max-width: 800px !important;

border-radius: 8px !important;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

}

/* ============================================================ */

/* INLINE BIOGRAPHY IMAGES (image_1, image_2, image_3, image_4) */

/* ============================================================ */

.biography-image-container {

text-align: center !important;

margin: 40px auto !important;

display: flex !important;

justify-content: center !important;

align-items: center !important;

width: 100% !important;

max-width: 100% !important;

padding: 20px 0 !important;

clear: both !important;

}

.biography-inline-image {

width: 100% !important;

height: auto !important;

max-width: 600px !important;

border-radius: 8px !important;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;

display: block !important;

margin: 0 auto !important;

}

@media (max-width: 768px) {

.biography-image-container {

margin: 30px auto !important;

padding: 15px 0 !important;

}

.biography-inline-image {

max-width: 90% !important;

}

}

@media (max-width: 480px) {

.biography-image-container {

margin: 20px auto !important;

padding: 10px 0 !important;

}

.biography-inline-image {

max-width: 100% !important;

border-radius: 6px !important;

}

}

/* ============================================================ */

/* BIOGRAPHY TABLES - RESPONSIVE DESIGN */

/* ============================================================ */

.biography-tables-wrapper {

width: 100%;

overflow-x: auto;

-webkit-overflow-scrolling: touch;

margin: 30px 0;

padding: 0;

}

.biography-table {

width: 100%;

border-collapse: collapse;

background-color: #fff;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

table-layout: auto;

margin: 0;

padding: 0;

}

.biography-table tbody {

display: table-row-group;

}

.biography-table tr {

display: table-row;

border-bottom: 1px solid #e0e0e0;

}

.biography-table tr:hover {

background-color: #f8f9fa;

}

.biography-table tr:last-child {

border-bottom: none;

}

.biography-table td {

display: table-cell;

padding: 15px 20px;

text-align: left;

border-bottom: 1px solid #e0e0e0;

font-size: 14px;

line-height: 1.6;

}

.biography-table td:first-child {

background-color: #f8f9fa;

width: 35%;

font-weight: 500;

color: #333;

vertical-align: top;

}

.biography-table td:last-child {

background-color: #fff;

width: 65%;

color: #555;

}

.biography-table tr:nth-child(even) td:first-child {

background-color: #f0f2f5;

}

.biography-table a {

color: #0073aa;

text-decoration: none;

font-weight: 500;

transition: color 0.3s ease;

}

.biography-table a:hover {

color: #005a87;

text-decoration: underline;

}

/* ============================================================ */

/* SPECIFIC TABLE STYLES */

/* ============================================================ */

.biography-table.wiki-section td:first-child {

background-color: #e8f4f8;

}

.biography-table.physical-stats td:first-child {

background-color: #fff3e0;

}

.biography-table.personal-life td:first-child {

background-color: #f3e5f5;

}

.biography-table.family-affairs td:first-child {

background-color: #e0f2f1;

}

.biography-table.favorite-things td:first-child {

background-color: #fce4ec;

}

.biography-table.social-media td:first-child {

background-color: #e3f2fd;

}

/* ============================================================ */

/* FILMOGRAPHY & AWARDS SECTIONS */

/* ============================================================ */

.biography-filmography,

.biography-awards {

background-color: #f8f9fa;

border-left: 4px solid #0073aa;

padding: 20px;

margin: 30px 0;

border-radius: 4px;

}

.biography-filmography {

border-left-color: #0073aa;

}

.biography-awards {

border-left-color: #28a745;

}

.biography-filmography h4,

.biography-awards h4 {

margin-top: 0;

color: #333;

}

/* ============================================================ */

/* INSTAGRAM FEEDS SECTION */

/* ============================================================ */

.biography-instagram-feeds-container {

width: 100%;

margin: 40px 0;

padding: 20px 0;

}

.biography-instagram-feed {

background-color: #f8f9fa;

border-radius: 8px;

padding: 30px 20px;

margin: 20px 0;

text-align: center;

}

.instagram-feed-heading {

font-size: 20px;

font-weight: 600;

color: #333;

margin: 0 0 20px 0;

padding-bottom: 15px;

border-bottom: 2px solid #e0e0e0;

text-transform: capitalize;

}

.biography-instagram-feed iframe,

.biography-instagram-feed blockquote {

max-width: 100% !important;

margin: 0 auto !important;

}

.biography-instagram-feed .instagram-media {

margin: 0 auto !important;

}

@media (max-width: 768px) {

.biography-instagram-feed {

padding: 20px 15px;

}

.instagram-feed-heading {

font-size: 18px;

}

}

/* ============================================================ */

/* POST TAGS STYLING */

/* ============================================================ */

.post-tags {

margin: 40px 0 20px 0;

padding: 20px;

background-color: #f8f9fa;

border-radius: 6px;

}

.post-tags strong {

display: inline-block;

margin-right: 15px;

color: #333;

}

.post-tags a {

display: inline-block;

padding: 6px 12px;

margin: 5px 5px 5px 0;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 4px;

color: #0073aa;

text-decoration: none;

font-size: 13px;

transition: all 0.3s ease;

}

.post-tags a:hover {

background-color: #0073aa;

border-color: #0073aa;

color: #fff;

}

/* ============================================================ */

/* RESPONSIVE DESIGN - TABLET (768px) */

/* ============================================================ */

@media (max-width: 768px) {

.biography-tables-wrapper {

margin: 20px 0;

}

.biography-table td {

padding: 12px 15px;

font-size: 13px;

}

.biography-table td:first-child {

width: 40%;

}

.biography-table td:last-child {

width: 60%;

}

.biography-filmography,

.biography-awards {

padding: 15px;

margin: 20px 0;

}

}

/* ============================================================ */

/* RESPONSIVE DESIGN - MOBILE (480px) */

/* ============================================================ */

@media (max-width: 480px) {

.biography-tables-wrapper {

margin: 15px 0;

}

.biography-table td {

padding: 10px 12px;

font-size: 12px;

min-width: 120px;

}

.biography-table td:first-child {

width: 45%;

}

.biography-table td:last-child {

width: 55%;

}

.biography-filmography,

.biography-awards {

padding: 12px;

margin: 15px 0;

}

.instagram-feed-heading {

font-size: 16px;

}

.post-tags {

padding: 15px;

margin: 30px 0 15px 0;

}

.post-tags strong {

display: block;

margin-bottom: 10px;

}

}

/* ============================================================ */

/* RESPONSIVE DESIGN - EXTRA SMALL (320px) */

/* ============================================================ */

@media (max-width: 320px) {

.biography-featured-image img {

max-width: 100% !important;

border-radius: 4px !important;

}

.biography-inline-image {

max-width: 100% !important;

border-radius: 4px !important;

}

.biography-table td {

padding: 8px 10px;

font-size: 11px;

}

.biography-table td:first-child {

width: 50%;

}

.biography-table td:last-child {

width: 50%;

}

.biography-table a {

word-break: break-all;

}

h2, h3, h4 {

font-size: 14px;

}

.instagram-feed-heading {

font-size: 14px;

}

}

/* ============================================================ */

/* PRINT STYLES */

/* ============================================================ */

@media print {

.biography-featured-image,

.biography-image-container,

.biography-inline-image {

max-width: 100%;

page-break-inside: avoid;

}

.biography-table {

page-break-inside: avoid;

width: 100%;

}

.biography-table td {

padding: 10px 8px;

border: 1px solid #ccc;

font-size: 11pt;

}

.post-tags {

display: none;

}

.biography-instagram-feed {

page-break-inside: avoid;

}

}

/* ============================================================ */

/* ANIMATION & TRANSITIONS */

/* ============================================================ */

.biography-table a {

transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.biography-image-container {

animation: fadeInUp 0.6s ease-out;

}

@keyframes fadeInUp {

from {

opacity: 0;

transform: translate3d(0, 30px, 0);

}

to {

opacity: 1;

transform: translate3d(0, 0, 0);

}

}