/* ============================================================
   How to Apply page — section styles (values from post-25.css)
   ============================================================ */

/* ------------------------------
   HERO — "How to Submit a Project"
   ------------------------------ */
.apply-hero {
  padding-top: 170px;
}
.apply-hero .apply-title {
  margin-bottom: 36px;
}

@media (max-width: 1200px) {
  .apply-hero { padding-top: 130px; }
}
@media (max-width: 992px) {
  .apply-hero { padding-top: 120px; }
  .apply-hero .apply-title { margin-bottom: 32px; }
}

/* ------------------------------
   INTRO — "Applying is easy!"
   ------------------------------ */
.apply-intro {
  padding-top: 71px;
}
.apply-intro .intro-text {
  max-width: 685px;
  font-family: var(--font-inter);
  font-weight: 500;
  color: var(--accent);
}

@media (max-width: 992px) {
  .apply-intro { padding: 50px 0; }
  .apply-intro .intro-text { max-width: 60%; }
}
@media (max-width: 768px) {
  .apply-intro .intro-text { max-width: 100%; }
}

/* ------------------------------
   THREE STEPS grid
   ------------------------------ */
.apply-steps {
  padding-top: 50px;
}
.apply-steps .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
}
.apply-steps .step-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.apply-steps .step-card p {
  font-family: var(--font-source-serif);
  color: var(--text);
}
.apply-steps .step-card p a {
  text-decoration: underline;
  font-weight: 700;
}

@media (max-width: 992px) {
  .apply-steps { padding-top: 50px; }
  .apply-steps .steps-grid { gap: 48px; }
}
@media (max-width: 768px) {
  .apply-steps .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .apply-steps .step-card { gap: 16px; }
}
@media (max-width: 576px) {
  .apply-steps .steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .apply-steps .step-card { gap: 10px; }
}

/* ------------------------------
   STEP 4 — help / downloads (full-width block under the 3-step grid;
   the grid stays 3-up, so step 4 gets its own row spanning the container)
   ------------------------------ */
.apply-steps .step-help {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.apply-steps .step-help .help-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px;
}
.apply-steps .step-help .help-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.apply-steps .step-help .help-block p {
  font-family: var(--font-source-serif);
  color: var(--text);
}
.apply-steps .step-help .help-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 992px) {
  .apply-steps .step-help { margin-top: 48px; gap: 24px; }
  .apply-steps .step-help .help-blocks { gap: 48px; }
}
@media (max-width: 768px) {
  .apply-steps .step-help { margin-top: 32px; }
  .apply-steps .step-help .help-blocks { grid-template-columns: 1fr; gap: 32px; }
  .apply-steps .step-help .help-block { gap: 16px; }
}

/* ------------------------------
   SUBMISSION PERIOD — orange card
   (same component as the home page; source column gap 71px passes through an
   empty hidden-buttons container, so the visual gap is 71px x 2 = 142px)
   ------------------------------ */
.period {
  margin-top: 142px;
}
.period .period-card {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--primary);
  padding: 100px 100px 95px 60px;
}
.period .period-content {
  width: 411px;
  max-width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.period .period-logo {
  width: 117px;
  margin-bottom: 36px;
}
.period .period-date {
  font-weight: 300;
  margin-bottom: 24px;
}
.period .period-status {
  font-family: var(--font-inter);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 8px;
}
.period .period-note {
  font-family: var(--font-inter);
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 59px;
}
.period .period-art {
  align-self: flex-end;
}
.period .period-art img {
  width: 100%;
  max-width: 452px;
}
.period .period-art-mobile { display: none; }
/* Scheduled swap (data-opens-at, /js/main.js): the closed card renders until
   the open date; guard [hidden] since .period-card sets display:flex. */
.period .period-card[hidden] { display: none; }
.period .period-cta { position: relative; z-index: 2; }
/* btn-primary's orange fill vanishes against the orange card, so give the
   CTA the card's native white-button palette (as the source's hidden
   btn-white CTA used) while keeping the shared button structure. */
.period .period-cta > a { border-color: var(--white); color: var(--text); }
.period .period-cta > a::after { background: var(--white); }
.period .period-cta > a:hover { color: var(--white); }

@media (max-width: 1200px) {
  .period .period-content { width: 40%; }
  .period .period-art { max-width: 55%; }
}
@media (max-width: 992px) {
  .period { margin-top: 100px; }
  .period .period-card { padding: 48px; }
  .period .period-content { width: 100%; }
  .period .period-logo { margin-bottom: 0; }
  .period .period-date { margin-bottom: 16px; }
  .period .period-note { margin-bottom: 32px; }
  .period .period-art { display: none; }
  .period .period-art-mobile {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
  }
  .period .period-art-mobile img { width: 60%; margin: 0 auto; }
}
@media (max-width: 768px) {
  .period .period-card { padding: 32px; }
  .period .period-art-mobile img { width: 80%; }
}
@media (max-width: 576px) {
  .period .period-card { padding: 24px; }
  .period .period-art-mobile img { width: 100%; }
}