/* film-fund.css */

/* Follows existing pdf-section/bg/overlay conventions */
.film-fund {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000; /* Prevent white edges during loading */
}

/* ---------- desktop background ---------- */
.film-fund .ff-bg-desktop {
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop layer shown by default */
.film-fund .ff-desktop-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.film-fund .ff-title {
  position: absolute;
  left: clamp(36px, 5vw, 80px);
  top: clamp(60px, 10vh, 110px); /* Adjusted to same height as Home/About/Service titles */
  font-weight: 300;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: 0.5px;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Body text: below title, width references left area of original image */
.film-fund .ff-body {
  position: absolute;
  left: clamp(40px, 5.2vw, 90px);
  top: clamp(150px, 18vw, 260px);
  width: clamp(360px, 40vw, 620px);
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.7;
  font-weight: 300;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.film-fund .ff-body p { margin: 0 0 10px 0; }

/* Bottom logos: lower left. Two side by side, spacing and size similar to original */
.film-fund .ff-logos {
  position: absolute;
  left: clamp(36px, 5vw, 80px);
  bottom: clamp(28px, 4vw, 60px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}

.film-fund .ff-logo-arc {
  height: clamp(36px, 4.2vw, 58px);
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

/* Cinema placeholder: can be replaced with img when png is provided */
.film-fund .ff-logo-cinema {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 300;
  letter-spacing: 3px;
}

.film-fund .ff-cinema-icon {
  width: clamp(40px, 4.5vw, 64px);
  height: clamp(40px, 4.5vw, 64px);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.film-fund .ff-cinema-icon::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 6px;
}
.film-fund .ff-cinema-text {
  font-size: clamp(12px, 1.6vw, 18px);
}

/* ---------- mobile flow (hidden on desktop) ---------- */
.film-fund .ff-mobile-flow {
  display: none;
}

/* ---------- responsive switch ---------- */
@media (max-width: 900px) {
  /* Hide desktop */
  .film-fund .ff-bg-desktop,
  .film-fund .ff-desktop-layer {
    display: none;
  }

  /* Enable small screen fluid structure - fill 100% height */
  .film-fund .ff-mobile-flow {
    display: block;
    position: relative;
    width: 100%;
    height: 100%; /* Fill film-fund container height */
  }

  .film-fund .ff-mobile-hero {
    position: relative;
    width: 100%;
    height: 100%; /* Fill ff-mobile-flow height */
  }

  .film-fund .ff-bg-mobile {
    width: 100%;
    height: 100%; /* Changed to 100% height instead of auto */
    display: block;
    object-fit: cover; /* Ensure image covers entire area */
  }

  /* Small screen overlay: must layer on top of image */
  .film-fund .ff-mobile-overlay {
    position: absolute;
    inset: 0;
    padding: clamp(14px, 3.5vw, 22px); /* Reduce padding to fit 100vh */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Changed to space-between for better content distribution */
    color: #fff;
    z-index: 2;
  }

  /* Small screen title always within image, no line break overflow */
  .film-fund .ff-mobile-overlay .ff-title {
    position: static;
    margin-top: clamp(10px, 3vh, 30px); /* Reduce top spacing */
    font-size: clamp(24px, 5.5vw, 38px);
    white-space: normal; /* Allow two lines on small screen */
    max-width: 92%;
  }

  .film-fund .ff-mobile-overlay .ff-body {
    position: static;
    margin-top: clamp(8px, 2vh, 20px); /* Reduce spacing */
    width: min(92%, 560px);
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.6;
    flex: 1; /* Take up remaining space */
    overflow-y: auto; /* Allow internal scrolling if content is too much */
  }

  .film-fund .ff-mobile-overlay .ff-logos {
    position: static;
    margin-top: 0; /* Remove margin-top, use justify-content: space-between */
    margin-bottom: clamp(8px, 2vh, 14px); /* Reduce bottom spacing */
    gap: clamp(16px, 5vw, 32px);
    align-items: center;
  }

  .film-fund .ff-mobile-overlay .ff-logo-arc {
    height: clamp(30px, 7vw, 42px);
  }

  .film-fund .ff-mobile-overlay .ff-cinema-icon {
    width: clamp(34px, 8vw, 48px);
    height: clamp(34px, 8vw, 48px);
  }

  .film-fund .ff-mobile-overlay .ff-cinema-text {
    font-size: clamp(11px, 3.5vw, 14px);
  }
}