/* =========================================================
   CONFERENCE HOMEPAGE
   OJS 3.3 - Additional Content
   ========================================================= */


/* ================= ROOT ================= */

.conf-page {
  --conf-primary: #123b63;
  --conf-secondary: #1677a8;
  --conf-accent: #e8a63a;
  --conf-dark: #102a43;
  --conf-text: #40566d;
  --conf-light: #f4f7fa;
  --conf-white: #ffffff;
  --conf-border: #dce5ed;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--conf-text);
  line-height: 1.7;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* ================= CONTAINER ================= */

.conf-container {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
}


/* ================= HERO ================= */

.conf-hero {
  position: relative;
  min-height: 620px;

  background:
    linear-gradient(
      90deg,
      rgba(8, 35, 60, .97) 0%,
      rgba(8, 35, 60, .86) 48%,
      rgba(8, 35, 60, .40) 100%
    ),
    url("https://via.placeholder.com/1600x800")
    center center / cover no-repeat;

  display: flex;
  align-items: center;

  color: #ffffff;
}


.conf-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(18, 59, 99, .35),
      rgba(22, 119, 168, .10)
    );
}


.conf-hero-content {
  position: relative;
  z-index: 2;

  width: 90%;
  max-width: 1180px;

  margin: 0 auto;

  padding: 90px 0;
}


.conf-label,
.conf-section-label {
  display: inline-block;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 3px;
  text-transform: uppercase;

  color: var(--conf-accent);

  margin-bottom: 15px;
}


.conf-title {
  max-width: 820px;

  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.08;

  font-weight: 800;

  margin: 0 0 25px;

  color: #ffffff;
}


.conf-title span {
  display: block;
  color: #ffffff;
}


.conf-tagline {
  max-width: 680px;

  font-size: 19px;
  line-height: 1.7;

  margin: 0 0 35px;

  color: rgba(255,255,255,.88);
}


.conf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;

  margin-bottom: 35px;
}


.conf-meta-item {
  border-left: 2px solid var(--conf-accent);
  padding-left: 15px;
}


.conf-meta-item strong {
  display: block;

  color: #ffffff;

  font-size: 14px;
  letter-spacing: 1px;
}


.conf-meta-item span {
  display: block;

  color: rgba(255,255,255,.65);

  font-size: 12px;
}


.conf-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


.conf-btn {
  display: inline-block;

  padding: 14px 25px;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 1.5px;

  text-decoration: none !important;

  transition: all .25s ease;
}


.conf-btn-primary {
  background: var(--conf-accent);
  color: #ffffff !important;
}


.conf-btn-primary:hover {
  background: #ffffff;
  color: var(--conf-dark) !important;
}


.conf-btn-outline {
  border: 1px solid rgba(255,255,255,.7);
  color: #ffffff !important;
}


.conf-btn-outline:hover {
  background: #ffffff;
  color: var(--conf-dark) !important;
}


/* ================= INFO BAR ================= */

.conf-info-bar {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  background: #ffffff;

  box-shadow:
    0 8px 30px rgba(0,0,0,.08);

  position: relative;

  z-index: 5;
}


.conf-info-item {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 25px 30px;

  border-right: 1px solid var(--conf-border);
}


.conf-info-item:last-child {
  border-right: none;
}


.conf-info-icon {
  font-size: 25px;
}


.conf-info-item strong {
  display: block;

  color: var(--conf-dark);

  font-size: 13px;
}


.conf-info-item small {
  display: block;

  color: #7b8c9d;

  font-size: 11px;
}


/* ================= SECTION ================= */

.conf-section {
  padding: 100px 0;
}


.conf-about {
  background: #ffffff;
}


.conf-two-column {
  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 80px;

  align-items: center;
}


.conf-content h2,
.conf-heading-center h2,
.conf-contact h2 {
  font-size: clamp(32px, 4vw, 48px);

  line-height: 1.15;

  color: var(--conf-dark);

  margin: 0 0 25px;
}


.conf-content h2 span,
.conf-heading-center h2 span,
.conf-contact h2 span {
  color: var(--conf-secondary);
}


.conf-content p {
  margin-bottom: 18px;
}


.conf-text-link {
  display: inline-block;

  margin-top: 15px;

  color: var(--conf-secondary);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 1px;

  text-decoration: none;
}


.conf-about-card {
  background:
    linear-gradient(
      135deg,
      var(--conf-primary),
      var(--conf-secondary)
    );

  padding: 45px;

  color: #ffffff;

  position: relative;

  box-shadow:
    0 20px 50px rgba(18,59,99,.18);
}


.conf-about-number {
  font-size: 60px;

  font-weight: 800;

  color: rgba(255,255,255,.12);

  line-height: 1;

  margin-bottom: 15px;
}


.conf-about-card h3 {
  color: #ffffff;

  font-size: 24px;

  margin: 0 0 20px;
}


.conf-about-card ul {
  padding-left: 20px;

  margin: 0;
}


.conf-about-card li {
  margin-bottom: 10px;

  color: rgba(255,255,255,.85);
}


/* ================= HEADING ================= */

.conf-heading-center {
  max-width: 700px;

  margin: 0 auto 55px;

  text-align: center;
}


.conf-heading-center p {
  margin: 0;

  color: #718397;
}


/* ================= DATES ================= */

.conf-dates {
  background: var(--conf-light);
}


.conf-timeline {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 15px;
}


.conf-date-card {
  background: #ffffff;

  border: 1px solid var(--conf-border);

  padding: 25px 20px;

  transition: all .25s ease;
}


.conf-date-card:hover {
  transform: translateY(-5px);

  box-shadow:
    0 15px 35px rgba(0,0,0,.08);
}


.conf-date-number {
  color: var(--conf-accent);

  font-size: 28px;

  font-weight: 800;

  margin-bottom: 20px;
}


.conf-date-label {
  display: block;

  color: #8493a2;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;

  margin-bottom: 8px;
}


.conf-date-card strong {
  display: block;

  color: var(--conf-dark);

  font-size: 15px;
}


/* ================= SPEAKERS ================= */

.conf-speakers {
  background: #ffffff;
}


.conf-speaker-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 25px;
}


.conf-speaker-card {
  background: #ffffff;

  border: 1px solid var(--conf-border);

  overflow: hidden;

  transition: all .3s ease;
}


.conf-speaker-card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 18px 40px rgba(0,0,0,.10);
}


.conf-speaker-image {
  height: 330px;

  overflow: hidden;

  background: #e9eef3;
}


.conf-speaker-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform .4s ease;
}


.conf-speaker-card:hover
.conf-speaker-image img {
  transform: scale(1.05);
}


.conf-speaker-info {
  padding: 25px;
}


.conf-speaker-role {
  color: var(--conf-accent);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.conf-speaker-info h3 {
  color: var(--conf-dark);

  font-size: 20px;

  line-height: 1.3;

  margin: 8px 0;
}


.conf-speaker-info p {
  font-size: 13px;

  margin: 0 0 5px;
}


.conf-speaker-institution {
  font-size: 11px;

  color: #8a99a7;
}


/* ================= TOPICS ================= */

.conf-topics {
  background: var(--conf-light);
}


.conf-topic-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;
}


.conf-topic-card {
  background: #ffffff;

  padding: 30px;

  border-left: 3px solid transparent;

  transition: all .25s ease;
}


.conf-topic-card:hover {
  border-left-color: var(--conf-accent);

  transform: translateY(-4px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.06);
}


.conf-topic-card > span {
  color: var(--conf-accent);

  font-size: 13px;

  font-weight: 800;
}


.conf-topic-card h3 {
  color: var(--conf-dark);

  font-size: 20px;

  margin: 10px 0;
}


.conf-topic-card p {
  font-size: 13px;

  margin: 0;

  color: #718397;
}


/* ================= POLICIES ================= */

.conf-policies {
  background: #ffffff;
}


.conf-policy-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 15px;
}


.conf-policy-card {
  display: grid;

  grid-template-columns:
    60px 1fr 25px;

  align-items: center;

  gap: 20px;

  padding: 25px;

  border: 1px solid var(--conf-border);

  color: inherit;

  text-decoration: none !important;

  transition: all .25s ease;
}


.conf-policy-card:hover {
  border-color: var(--conf-secondary);

  box-shadow:
    0 12px 30px rgba(0,0,0,.06);
}


.conf-policy-icon {
  width: 50px;
  height: 50px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--conf-light);

  color: var(--conf-secondary);

  font-weight: 800;
}


.conf-policy-card h3 {
  color: var(--conf-dark);

  margin: 0 0 4px;

  font-size: 17px;
}


.conf-policy-card p {
  margin: 0;

  color: #7b8c9d;

  font-size: 12px;
}


.conf-policy-card > span {
  color: var(--conf-accent);

  font-size: 20px;
}


/* ================= CTA ================= */

.conf-cta {
  position: relative;

  background:
    linear-gradient(
      120deg,
      rgba(12,48,82,.98),
      rgba(22,119,168,.90)
    ),
    url("https://via.placeholder.com/1600x700")
    center / cover;

  color: #ffffff;
}


.conf-cta-content {
  position: relative;

  z-index: 2;

  max-width: 800px;

  padding: 100px 0;
}


.conf-cta h2 {
  font-size: clamp(35px, 5vw, 58px);

  line-height: 1.1;

  color: #ffffff;

  margin: 0 0 25px;
}


.conf-cta h2 span {
  color: var(--conf-accent);
}


.conf-cta p {
  max-width: 650px;

  color: rgba(255,255,255,.80);

  margin-bottom: 30px;
}


.conf-btn-light {
  background: #ffffff;

  color: var(--conf-dark) !important;
}


.conf-btn-transparent {
  border: 1px solid rgba(255,255,255,.7);

  color: #ffffff !important;
}


/* ================= CONTACT ================= */

.conf-contact {
  background: var(--conf-dark);

  color: rgba(255,255,255,.7);

  padding: 70px 0;
}


.conf-contact-grid {
  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 80px;

  align-items: center;
}


.conf-contact h2 {
  color: #ffffff;

  margin-bottom: 15px;
}


.conf-contact-detail {
  display: grid;

  gap: 20px;
}


.conf-contact-detail strong {
  display: block;

  color: var(--conf-accent);

  font-size: 11px;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.conf-contact-detail span {
  color: rgba(255,255,255,.8);

  font-size: 14px;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

  .conf-info-bar {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .conf-two-column {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .conf-timeline {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .conf-speaker-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .conf-topic-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 650px) {

  .conf-hero {
    min-height: 680px;
  }

  .conf-hero-content {
    padding: 70px 0;
  }

  .conf-title {
    font-size: 38px;
  }

  .conf-tagline {
    font-size: 16px;
  }

  .conf-meta {
    gap: 20px;

    flex-direction: column;
  }

  .conf-info-bar {
    grid-template-columns: 1fr;
  }

  .conf-info-item {
    border-right: none;

    border-bottom: 1px solid var(--conf-border);
  }

  .conf-section {
    padding: 70px 0;
  }

  .conf-timeline {
    grid-template-columns: 1fr;
  }

  .conf-speaker-grid {
    grid-template-columns: 1fr;
  }

  .conf-topic-grid {
    grid-template-columns: 1fr;
  }

  .conf-policy-grid {
    grid-template-columns: 1fr;
  }

  .conf-contact-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .conf-buttons {
    flex-direction: column;

    align-items: flex-start;
  }

  .conf-btn {
    width: auto;
  }

}