/*
This file controls the custom layout of the SkyConnect design board.

The shared design board system creates consistency across projects,
while this file creates a layout that reflects the specific story
of SkyConnect.

Because this project focuses on concept development, 3D modelling,
animation, and visual communication, the layout emphasizes the
transition from idea generation to final presentation.
*/

/*
The 12-column grid creates a flexible exhibition space where
different project artifacts can be arranged based on their
importance.

I used this structure to combine presentation material, 3D models,
design questions, process documentation, and reflection into one
continuous case study.
*/
.skyconnect-board {
  position: relative;

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
  row-gap: clamp(3.5rem, 7vw, 6rem);

  width: min(100%, 76rem);
  min-height: auto;

  margin-inline: auto;

  padding:
    clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 3rem) clamp(6rem, 10vw, 10rem);

  background: transparent;
  border: 0;
  box-shadow: none;

  overflow: visible;
}


/* Reset Old Absolute Layout  */
/*
The original board structure relied on more fixed positioning.

I changed the layout into a responsive grid because the project
contains different types of content that need to adapt across
screen sizes.

This approach keeps the visual freedom of a design board while
making the experience easier to maintain.
*/
.skyconnect-board>* {
  position: relative;
  inset: auto;

  max-width: 100%;
  margin-top: 0;
}

.skyconnect-board .board-paper,
.skyconnect-board .board-sticky,
.skyconnect-board .board-media,
.skyconnect-board .board-polaroid {
  position: relative;
  inset: auto;
}


/* Typography  */
/*
The typography follows the portfolio's creative identity while
supporting the storytelling aspect of SkyConnect.

The combination of readable body text and expressive headings helps
balance technical information with the imaginative concept behind
the project.
*/
.skyconnect-board h2,
.skyconnect-board h3,
.skyconnect-board h4 {
  margin-top: 0;

  font-family: var(--font-main);
  font-weight: 500;
  line-height: 1;

  color: var(--text);
}


.skyconnect-board h3 {
  margin-bottom: clamp(.7rem, 1.5vw, 1rem);

  font-size: clamp(1.8rem, 3vw, 2.8rem);
}


.skyconnect-board h4 {
  margin-bottom: clamp(.8rem, 1.5vw, 1.2rem);

  font-size: clamp(1.2rem, 2vw, 1.7rem);
}


.skyconnect-board p,
.skyconnect-board li,
.skyconnect-board figcaption {

  font-family: var(--font-elegant);

  font-size: clamp(.85rem, 1vw, 1rem);

  line-height: 1.75;

  color: rgba(36, 36, 36, .78);
}

/* Header  */
/*
The header introduces the concept before showing the detailed work.

For SkyConnect, this was important because the project started as
an idea and evolved into a designed experience. The introduction
helps users understand the vision before seeing the process.
*/
.skyconnect-heading {

  grid-column: 1 / 10;

  width: min(100%, 48rem);

  margin: 0;

  padding-top: clamp(1rem, 3vw, 2.5rem);

}

.skyconnect-heading h2 {

  margin: 0;

  font-family: var(--font-main);

  font-size: clamp(3.5rem, 7vw, 6.5rem);

  font-weight: 500;

  line-height: .85;

}


.skyconnect-heading .board-subtitle {

  width: min(100%, 38rem);

  margin-top: 1.5rem;

  font-family: var(--font-elegant);

  font-size: clamp(1.1rem, 1.8vw, 1.5rem);

  line-height: 1.5;

}

/* Award  */
/*
The award is included as supporting context rather than the focus
of the project.

I wanted the board to emphasize the design process and my
contribution instead of only highlighting the final achievement.
*/
.skyconnect-award {
  grid-column: 10 / 13;
  grid-row: 1;

  justify-self: end;
  align-self: start;

  display: block;

  width: clamp(6rem, 10vw, 9rem);
  max-width: 100%;

  margin:
    clamp(1rem, 3vw, 2.5rem) clamp(.5rem, 2vw, 1.5rem) 0 0;

  transform: rotate(2deg);

  filter:
    drop-shadow(0 .8rem 1rem rgba(0, 0, 0, .13));

  transition:
    transform .3s ease,
    filter .3s ease;
}

.skyconnect-award:hover {
  transform:
    rotate(0) translateY(-.2rem) scale(1.025);
}


/* Shared SkyConnect Surfaces  */
/*
These reusable surfaces maintain the physical design board language
used throughout the portfolio.

Paper cards, media frames, and polaroids help present SkyConnect
documentation as collected design materials rather than a standard
case study page.
*/
.skyconnect-board .board-paper {
  padding: clamp(1.4rem, 2.2vw, 2rem);
  background: rgba(255, 255, 255, .96);
  border: .06rem solid var(--border-light);
  box-shadow:
    0 .2rem .5rem rgba(0, 0, 0, .025),
    0 1rem 2.5rem rgba(0, 0, 0, .055);

  transform: none;
}

.skyconnect-board .board-paper {

  align-self: start;

}

.skyconnect-board .board-media {
  margin: 0;
  padding: clamp(.65rem, 1vw, .9rem);

  background: var(--white);
  border: .06rem solid var(--border-light);
  box-shadow:
    0 .2rem .5rem rgba(0, 0, 0, .025),
    0 1rem 2.5rem rgba(0, 0, 0, .06);

  transform: none;
}

.skyconnect-board .board-polaroid {
  margin: 0;

  background: transparent;

  transform: none;
}

.skyconnect-board .board-media img,
.skyconnect-board .board-media video {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;
}

.skyconnect-board .board-media video {
  background: var(--text);
}

.skyconnect-board .board-media figcaption {
  max-width: 60ch;

  margin:
    clamp(.75rem, 1.3vw, 1rem) auto .15rem;

  padding-inline: clamp(.2rem, 1vw, .7rem);
}


/* Remove Excessive Hover Movement  */
.skyconnect-board .board-paper:hover,
.skyconnect-board .board-media:hover,
.skyconnect-board .board-polaroid:hover,
.skyconnect-board .board-sticky:hover {
  z-index: 10;

  transform: translateY(-.2rem);
}


/* Overview + Presentation  */
/*
The overview and presentation sections are placed together because
SkyConnect focuses heavily on communication.

The layout connects the original idea with the final pitch and
shows how visual storytelling helped communicate the concept.
*/
.board-overview-note {
  grid-column: 1 / 6;
  grid-row: 2;

  align-self: start;

  width: 100%;

  transform: none;
}

.board-presentation {
  grid-column: 7/ 13;
  grid-row: 2;

  align-self: start;

  width: 90%;

  transform: none;
}

/*
Project Moments

These images capture important stages of the project experience.

Instead of only showing the final outcome, I included moments that
represent the process, collaboration, and development behind the
project.
*/
.skyconnect-moments {

  grid-column: 2 / 12;

  display: grid;

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

  gap: clamp(2rem, 4vw, 4rem);

  width: 100%;

  align-items: start;

}



.board-moment {

  grid-column: auto;

  width: 100%;

  margin: 0;

  transform: none;

}



.board-moment img {

  width: 100%;

  max-height: 24rem;

  object-fit: contain;

}



.board-moment figcaption {

  width: min(100%, 30ch);

  margin: 1rem auto 0;

  text-align: center;

}

.skyconnect-board .board-polaroid img {
  display: block;

  width: 100%;
  height: auto;

  filter:
    drop-shadow(0 .9rem 1.15rem rgba(0, 0, 0, .12));
}


/* Role + Prototype  */
/*
This section connects my personal contribution with the prototype
development.

The goal is to make my role visible by showing what I designed,
modelled, and communicated within the larger team project.
*/
.board-role-note {
  grid-column: 2 / 12;

  grid-row: auto;

  width: min(100%, 55rem);

  margin-inline: auto;

  transform: none;
}

.board-role-note ul {
  margin: 0;
  padding-left: 1.1rem;
}

.board-prototype {
  grid-column: 6 / 13;
  grid-row: 4;

  width: 100%;
  align-self: start;

  transform: none;
}

.skyconnect-moments {

  margin-bottom: clamp(3rem, 6vw, 5rem);

}

/* Process + Challenge  */
/*
The process and challenge sections explain the decisions behind the
final design.

Showing challenges alongside development helps communicate how
ideas were tested, adjusted, and improved throughout the project.
*/
.board-process-note {

  grid-column: 1 / 13;

  grid-row: 6;

  width: min(100%, 62rem);

  margin-inline: auto;

}

.board-challenges-note {
  grid-column: 9 / 13;
  grid-row: 5;

  position: relative;

  width: 100%;
  align-self: start;

  padding: clamp(1.3rem, 2vw, 1.8rem);

  background: #fff0a8;

  box-shadow:
    0 .1rem .2rem rgba(36, 36, 36, .05),
    0 1rem 2rem rgba(0, 0, 0, .075);

  transform: rotate(1.3deg);
}


/* Reflection + Tools  */
/*
Reflection and tools sections explain both the learning outcome and
technical methods behind the project.

This helps show SkyConnect as a combination of creative direction,
3D modelling, storytelling, and digital production.
*/
.board-reflection-note {

  grid-column: 2 / 8;

  grid-row: 9;


  width: 100%;

  align-self: start;

}


.board-tools-note {

  grid-column: 8 / 12;

  grid-row: 9;

  width: 100%;

  align-self: start;

}


/* Tools  */
.skyconnect-board .board-tool-list {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: clamp(.6rem, 1.3vw, 1rem);

  width: 100%;
  margin-top: 1rem;
}

.skyconnect-board .board-tool-list figure {
  min-width: 0;
  margin: 0;

  text-align: center;
}

.skyconnect-board .board-tool-list img {
  display: block;

  width: 100%;
  max-width: 5rem;
  aspect-ratio: 1;

  margin-inline: auto;

  object-fit: contain;
}

.skyconnect-board .board-tool-list figcaption {
  margin-top: .4rem;
  margin-bottom: 0;

  font-size: clamp(.6rem, .8vw, .7rem);
  font-weight: 700;
  line-height: 1.3;
}


/* Credits  */
/*
The credits section provides project context while keeping the
focus on individual contributions.

For collaborative projects, this helps communicate my specific role
within the overall outcome.
*/
.board-credits-note {

  grid-column: 3 / 11;

  grid-row: 10;

  width: 100%;
  align-self: start;

  padding-block: clamp(1.3rem, 2vw, 1.8rem);

  text-align: center;

  transform: none;
}


/* Restrained Decorations  */
/*
Decorations are intentionally limited to important areas.

I used tape, pins, and clips only where they support the storytelling
because too many decorative elements would distract from the project
content.
*/
.skyconnect-board .board-presentation .board-pin,
.skyconnect-board .board-prototype .board-tape,
.skyconnect-board .board-reflection-note .board-pin {
  display: none;
}

.skyconnect-board .board-overview-note .board-tape {
  display: block;

  width: clamp(4rem, 7vw, 5.5rem);
  height: 1.5rem;

  opacity: .72;

  transform:
    translateX(-50%) rotate(-1deg);
}

.skyconnect-board .board-role-note .board-paperclip {
  display: block;

  opacity: .65;

  transform: rotate(4deg);
}


/* Left Preview Artwork  */
/*
The preview artwork reuses the same project representation from the
gallery.

Keeping the visual connection between the gallery and design board
creates a smoother transition when users move from discovery into
the detailed case study.
*/
.design-board-preview-art .skyconnect-exhibit {

  width: min(86%, 23rem);

  aspect-ratio: 1 / 1.15;

  height: auto;

  margin-inline: auto;

  transform: none;
}

.design-board-preview-art .skyconnect-exhibit .project-media {

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

}

.design-board-preview-art .skyconnect-artwork {
  top: 1%;
  right: 10%;
  bottom: 10%;
}

.skyconnect-questions {

  grid-column: 1 / 13;

  display: grid;

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

  gap: clamp(1.5rem, 3vw, 3rem);

  width: 100%;

}


.skyconnect-questions .board-paper {

  width: 100%;

}


.skyconnect-questions .board-media {

  width: 100%;

}


.skyconnect-questions img {

  width: 100%;

  height: auto;

  object-fit: contain;

}

.board-question h3,
.board-question h4 {

  width: 100%;

}


.board-question .board-media {

  width: min(100%, 45rem);

  margin-inline: auto;

}

.board-question>*,
.board-question .board-paper {

  width: 100%;

}


.board-question .board-media {

  width: 100%;

}

.board-question .board-media img {

  max-height: 32rem;

  object-fit: contain;

}

.skyconnect-board .board-paper {

  height: auto;

  min-height: 0;

}


.skyconnect-board .board-paper p:last-child {

  margin-bottom: 0;

}


/* Design Thinking  */
/*
Design Thinking Questions

These questions highlight the reasoning behind the design decisions.

Instead of only presenting what was created, this section explains
the problems considered during the design process and how the
solution responded to user needs.
*/
.board-design-thinking {

  grid-column: 1 / 13;

  width: min(100%, 62rem);

  margin-inline: auto;

  align-self: start;

}

.board-design-thinking p {

  max-width: 65ch;

}


.board-process-note img {

  width: 100%;

  height: auto;

  max-height: 30rem;

  object-fit: contain;

}

/*
Responsive Behaviour

The desktop layout presents SkyConnect as a visual workspace where
different artifacts can be viewed together.

On smaller screens, the layout becomes a structured vertical story
that keeps the design process readable while maintaining the same
sequence of ideas.
*/
/* Medium Screens  */
@media (max-width: 75rem) {

  .skyconnect-board {
    row-gap: clamp(3rem, 6vw, 4.5rem);
  }

  .board-overview-note {
    grid-column: 1 / 7;
  }

  .board-presentation {
    grid-column: 7 / 13;
  }

  .board-role-note {
    grid-column: 1 / 7;
  }

  .board-prototype {
    grid-column: 7 / 13;
  }

  .board-process-note {
    grid-column: 1 / 9;
  }

  .board-challenges-note {
    grid-column: 9 / 13;
  }
}

/* Tablet  */
@media (max-width: 60rem) {


  .skyconnect-heading {

    order: 1 !important;

    position: relative;

    margin-top: 0;

    padding-top: 0;

  }


  .skyconnect-award {

    order: 2 !important;

  }

  .skyconnect-board {

    display: flex;

    flex-direction: column;

    gap: clamp(2rem, 6vw, 3.5rem);

    width: 100%;
    padding:
      1.5rem 1rem 4rem;


  }


  .skyconnect-board>*,
  .skyconnect-board .board-paper,
  .skyconnect-board .board-sticky,
  .skyconnect-board .board-media,
  .skyconnect-board .board-polaroid {

    position: relative;

    inset: auto;

    width: 100%;

    max-width: 100%;

    margin: 0;

    transform: none;

  }


  /* HEADER FIRST -------------------------------- */


  .skyconnect-heading {

    order: 1;

    width: 100%;

    padding-top: 0;

  }


  .skyconnect-heading h2 {

    font-size:
      clamp(3rem, 9vw, 4.8rem);

    line-height: .9;

  }


  .skyconnect-heading .board-subtitle {

    width: 100%;

    font-size: 1rem;

  }

  .skyconnect-heading {

    order: 1;

    width: 100%;

    display: flex;

    flex-direction: column;

  }


  .skyconnect-award {

    order: 2;

    position: relative;

    align-self: flex-end;

    width:
      clamp(4.5rem, 15vw, 6rem);

    margin-top: -1rem;

    margin-right: 1rem;

  }



  /* BROCHURE / AWARD UNDER HEADER ---------------- */

  .skyconnect-questions {

    order: 15;

  }


  .board-design-thinking {

    order: 16;

  }



  /* CONTENT ORDER ------------------------------- */


  .board-overview-note {

    order: 3;

  }


  .board-presentation {

    order: 4;

  }


  .skyconnect-moments {

    order: 5;

    display: flex;

    flex-direction: column;

    gap: 2rem;

    width: 100%;

  }


  .board-moment {

    width: 100%;

  }


  .board-moment img {

    max-height: none;

  }



  .board-role-note {

    order: 6;

  }


  .board-prototype {

    order: 7;

  }


  .board-process-note {

    order: 8;

  }


  .board-challenges-note {

    order: 9;

    width: min(92%, 32rem);

    align-self: center;

  }


  .board-reflection-note {

    order: 10;

  }


  .board-tools-note {

    order: 11;

  }


  .board-credits-note {

    order: 12;

  }



  .skyconnect-board .board-paper:hover,
  .skyconnect-board .board-media:hover,
  .skyconnect-board .board-polaroid:hover,
  .skyconnect-board .board-sticky:hover {

    transform:
      translateY(-.15rem);

  }

  .skyconnect-questions {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    width: 100%;

  }


  .skyconnect-questions .board-paper {

    width: 100%;

  }


  .skyconnect-questions .board-media {

    width: 100%;

  }


  .skyconnect-questions .board-media img {

    width: 100%;

    height: auto;

    object-fit: contain;

  }

  .board-presentation video {

    width: 100%;

    height: auto;

    max-height: 25rem;

    object-fit: contain;

  }

  .board-presentation video {

    width: 100%;

    height: auto;

    max-height: 25rem;

    object-fit: contain;

  }

}

/* Small Mobile  */
@media (max-width:48rem) {


  .skyconnect-board {

    gap: 1.75rem;

    padding:
      3.5rem .75rem 3rem;

  }



  .skyconnect-heading h2 {

    font-size:
      clamp(2.4rem, 12vw, 3.4rem);


  }



  .skyconnect-heading .board-subtitle {

    font-size: .95rem;

  }



  .skyconnect-board .board-paper,
  .skyconnect-board .board-sticky {

    padding: 1.2rem;

  }



  .skyconnect-award {

    width:
      5rem;

    margin-top: -.5rem;

  }



  .skyconnect-board .board-tool-list {

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

    gap: 1rem;

  }
.skyconnect-moments .board-polaroid {

  width:92%;

  margin-inline:auto;

}


.skyconnect-moments .board-moment img {

  max-height:22rem;

  object-fit:contain;

}


.skyconnect-moments .board-winning img {

  max-height:19rem;

  object-fit:contain;

}

.skyconnect-moments .board-polaroid figcaption {

    width: min(85%, 24ch);

    margin: 1rem auto 0;

    text-align: center;

    line-height: 1.45;

}
}