/* ============================================================ TFE INDIVIDUAL PAGE (tfe.php) ============================================================ */ .tfe-body { display: flex; flex-direction: column; min-height: 100vh; background: var(--white); } .tfe-main { flex: 1; overflow-y: auto; padding: 2rem 1.5rem 3rem; } /* Two-column layout */ .tfe-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; max-width: 1200px; } /* Left column */ .tfe-left { display: flex; flex-direction: column; gap: 1.5rem; } /* Student name — large */ .tfe-author { font-size: 1.9rem; font-weight: 400; color: var(--black); margin: 0; line-height: 1.15; letter-spacing: -0.01em; } /* Title — very large, slightly spaced */ .tfe-title { font-size: 2.2rem; font-weight: 400; color: var(--black); margin: 0; line-height: 1.15; letter-spacing: -0.01em; } /* Metadata list */ .tfe-meta-list { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.95rem; line-height: 1.4; } .tfe-meta-item { display: flex; gap: 0.4rem; flex-wrap: wrap; } .tfe-meta-item .label { color: var(--black); font-weight: 400; flex-shrink: 0; } .tfe-meta-item .value { color: var(--black); font-weight: 700; } .tfe-meta-item .value a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Synopsis text */ .tfe-synopsis-text { font-size: 0.95rem; line-height: 1.7; color: var(--black); margin-top: 0.5rem; } /* Right column — media */ .tfe-right { display: flex; flex-direction: column; gap: 1.5rem; } .tfe-media-block { overflow: hidden; } .tfe-media-block img { width: 100%; height: auto; display: block; } .tfe-media-block embed, .tfe-media-block video { width: 100%; display: block; border: none; } .tfe-media-block video { max-height: 500px; } .tfe-media-block embed { height: 700px; } .tfe-file-caption { font-size: 0.8rem; color: var(--text-muted); margin: 0.3rem 0 0; font-style: italic; } .tfe-no-files { font-size: 0.95rem; color: var(--text-muted); padding: 1rem 0; } /* Responsive */ @media (max-width: 900px) { .tfe-layout { grid-template-columns: 1fr; gap: 2rem; } .tfe-author { font-size: 1.5rem; } .tfe-title { font-size: 1.7rem; } } @media (max-width: 600px) { .tfe-main { padding: 1.5rem 1rem 2rem; } .tfe-author { font-size: 1.25rem; } .tfe-title { font-size: 1.4rem; } }