@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------*/
/* SCREENINGS PAGE ////////////////////////////*/
/*--------------------------------------------*/

/* ========= Screenings Welcome Section ========= */
.screenings__welcome { min-height: 40vh; position: relative; }
.screenings__welcome h2 { font-family: var(--en); font-size: clamp(3rem, 8vw, 6rem); font-weight: var(--fw-black); color: var(--color__white); text-align: center; margin: 2rem 0; letter-spacing: 0.05em; }
.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; }
.scroll-indicator p { font-family: var(--ja); font-size: 0.875rem; color: var(--color__white); margin: 0.5rem 0; opacity: 0.8; }
.scroll-indicator .line { display: block; width: 1px; height: 20px; background: var(--color__white); opacity: 0.6; }

/* ========= Event Information Section ========= */
#EVENT_INFO           { padding: 6rem 0; background: var(--color__white); color: var(--color__gray-900); }
#EVENT_INFO h3        { text-align: center; display: block; }
#EVENT_INFO h3::after { display: none; }

.event-info-container { max-width: 800px; margin: 0 auto; }
.event-details        { margin-bottom: 3rem; }

article.detail-item { margin-bottom: 2rem; padding: 1.5rem; border-left: 4px solid var(--color__primary-red); background: var(--color__gray-50); border-radius: 0 8px 8px 0; }
article.detail-item h4 { font-family: var(--ja); font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color__primary-red); margin-bottom: 0.75rem; }
article.detail-item h4::before { content: "▮"; margin-right: 0.5rem; }
article.detail-item p { font-family: var(--ja); font-size: 1rem; line-height: 1.8; color: var(--color__gray-700); margin: 0; }

/* ========= Speaker Profiles ========= */
article.detail-item dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 0; padding: 0; }
.prof-container { background: var(--color__white); border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.prof-container:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.prof-container dd img { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; }
.prof-container dt { font-family: var(--ja); font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color__gray-900); text-align: center; margin-bottom: 0.75rem; }
.prof-container dd { font-family: var(--ja); font-size: 0.875rem; line-height: 1.6; color: var(--color__gray-600); margin: 0.25rem 0; text-align: center; }
.prof-container dd.hrefIG a, .prof-container dd.hrefHP a { color: var(--color__primary-red); text-decoration: none; font-weight: var(--fw-medium); transition: color 0.3s ease; }
.prof-container dd.hrefIG a:hover, .prof-container dd.hrefHP a:hover { color: var(--color__accent-yellow); text-decoration: underline; }

aside { margin-bottom: 2rem; color: var(--color__gray-700); }
aside h4 { font-size: clamp(3rem, 8vw, 3rem); line-height: 1em; font-weight: var(--fw-black); position: relative; display: inline-block; letter-spacing: 0.05em; color: var(--color__primary-red); margin-bottom: 25px; }
aside h4::after { content: ""; position: absolute; left: 0; bottom: -0.2em; width: 70%; height: 3px; background-color: var(--color__primary-red) }
aside article { gap: 20px; margin-bottom: 100px; }
aside .asideInfo h5 { font-family: var(--ja); font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--color__primary-red); margin-bottom: 0.75rem; text-wrap: auto; }
aside .asideInfo h5::before { content: "▮"; margin-right: 0.5rem; }
aside .synopsis  { font-size: 1.2rem; line-height: 1.8;}
aside .asideInfo h6 { font-family: var(--ja); font-size: 1rem; font-weight: var(--fw-bold); color: var(--color__accent-yellow); margin: 1rem 0 0.5rem 0; position: relative; display: inline-block; }
aside .asideInfo h6::before { content: "★"; margin-right: 0.5rem; }
aside .asideInfo h6::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 8px; background: linear-gradient(transparent 60%, var(--color__accent-yellow) 40%); z-index: 1; }
aside .thumb     { max-width: fit-content; display: block; margin: 0 auto;}
aside .thumb img { max-width: 896px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
aside .asideInfo    { margin-left: 0; min-width: 300px; flex: 1; }
aside .asideInfo dl { margin-top: 1rem; }
aside .asideInfo dt { font-size: 0.875rem; color: var(--color__gray-600); margin-bottom: 0.25rem; }
aside .asideInfo dd { font-size: 1rem; line-height: 1.6; color: var(--color__gray-700); margin: 0 0 0.5rem 0; padding-left: 1rem; border-left: 2px solid var(--color__primary-red); }

/* ========= Icon Links ========= */
.hrefIG a::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 0.5rem; background-image: url("../@assets/img/icon/bl_ig-logo.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; }
.hrefHP a::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 0.5rem; background-image: url("../@assets/img/icon/bl_url.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; }

/* ========= Registration Section ========= */
.registration-section { text-align: center; padding: 2rem 0; }
.registration-box h4 { display: block; width: max-content; min-height: max-content; font-family: var(--ja); font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color__primary-red); margin-bottom: 1.5rem; text-align: center; }
.btn-registration { display: inline-block; font-family: var(--ja); font-size: 1.125rem; font-weight: var(--fw-medium); color: var(--color__primary-red); padding: .5rem 2rem; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; border: 1px solid var(--color__white); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.btn-registration:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); border: 1px solid var(--color__accent-yellow); background: var(--color__accent-yellow); }

/* ========= Floating Registration Button ========= */
.floating-registration { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(20px); }
.floating-registration.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floating-registration button { background: var(--color__primary-red); color: var(--color__white); border: none; border-radius: 50px; padding: 1rem 1.5rem; font-family: var(--ja); font-size: 0.875rem; font-weight: var(--fw-bold); cursor: pointer; box-shadow: 0 4px 16px rgba(184, 28, 34, 0.3); transition: all 0.3s ease; white-space: nowrap; }
.floating-registration button:hover { background: var(--color__accent-yellow); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4); }

/* ========= Responsive Design ========= */
@media screen and (max-width: 767px) {

  .screenings__welcome    { min-height: 30vh; padding: 2rem 1rem; }
  .screenings__welcome h2 { font-size: clamp(2.5rem, 6vw, 4rem); margin: 1.5rem 0; }

  #EVENT_INFO    { padding: 4rem 0; }
  #EVENT_INFO h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 2rem; }

  article.detail-item    { padding: 1rem; margin-bottom: 1.5rem; }
  article.detail-item h4 { font-size: 1rem; }
  article.detail-item p  { font-size: 0.875rem; }

  article.detail-item dl { grid-template-columns: 1fr; gap: 1.5rem; }
  
  aside article    { margin-bottom: 30px; }
  aside .thumb img { max-width: -webkit-fill-available; height: auto; margin-bottom: 20px;}

  .prof-container          { padding: 1rem; }
  .prof-container dd img   { width: 100px; height: 100px; }
  .prof-container dt       { font-size: 1rem; }
  .prof-container dd       { font-size: 0.8rem; }

  .registration-box     { padding: 2rem 1.5rem; margin: 0 1rem; }
  .registration-box h4  { font-size: 1.125rem; }
  .btn-registration     { font-size: 1rem; padding: 0.875rem 1.5rem; }

  .floating-registration { bottom: 1rem; right: 1rem; }
  .floating-registration button { font-size: 0.75rem; padding: 0.75rem 1rem; }

}