/*
Responsive Behaviour

The desktop layout presents the project as an interactive board with
multiple elements visible together.

On smaller screens, the content becomes a vertical storytelling
experience so users can explore the project clearly without losing
the intended sequence.
*/

/* Main Board  */
/*
The 12-column grid allows the project documentation to be arranged
like a physical design workspace.
Because Tech4Ease involves both digital design and physical making,
the layout creates space for different artifacts such as models,
components, sketches, and prototype documentation.
*/
.tech4ease-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  */
/*
Originally, the board relied on more fixed positioning.

I changed this structure into a responsive grid because a fixed
layout made it difficult to maintain consistency across different
screen sizes.

The grid approach keeps the handmade board feeling while making
the project easier to explore on different devices.
*/
.tech4ease-board>* {
  position: relative;
  inset: auto;

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

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


/* Typography  */
/*
The typography follows the overall portfolio identity while keeping
the project approachable and human-centered.

The handwritten visual style supports the project's focus on
sketching, prototyping, and designing for people.
*/
.tech4ease-board h2,
.tech4ease-board h3,
.tech4ease-board p,
.tech4ease-board ul,
.tech4ease-board figure {
  margin-top: 0;
}

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

  font-family: var(--font-elegant);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 500;
  line-height: 1;

  color: var(--text);
}

.tech4ease-board p,
.tech4ease-board li,
.tech4ease-board figcaption {
  font-family: var(--font-main);
  font-size: clamp(.78rem, 1vw, .92rem);
  line-height: 1.7;

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


/* Header  */
/*
The header introduces the problem and design direction before
showing the prototype development.

This creates context first, allowing users to understand why the
solution was created before exploring how it was built.
*/
.tech4ease-heading {
  grid-column: 1 / 10;

  width: min(100%, 50rem);
  margin: 0;
  padding-top: clamp(1rem, 3vw, 2.5rem);

  z-index: 5;
}

.tech4ease-heading .board-eyebrow {
  margin: 0 0 .8rem;

  font-family: var(--font-main);
  font-size: clamp(.62rem, .8vw, .72rem);
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;

  color: var(--text);
}

.tech4ease-heading h2 {
  margin: 0;

  font-family: var(--font-elegant);
  font-size: clamp(3.8rem, 8vw, 7rem);
  font-weight: 500;
  line-height: .84;

  color: var(--text);
}

.tech4ease-heading .board-subtitle {
  width: min(100%, 38rem);

  margin: clamp(1.2rem, 2vw, 1.7rem) 0 0;

  font-family: var(--font-elegant);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.45;

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


/* Certificate  */
/*
The certificate is included as supporting evidence of the project
outcome.

It is positioned as a secondary visual element so recognition is
shown without taking attention away from the design process itself.
*/
.tech4ease-certificate {
  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;
}

.tech4ease-certificate img {
  display: block;

  width: 100%;
  height: auto;
}

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


/* Shared Tech4Ease Surfaces  */
/*
These reusable surfaces maintain consistency with the overall
design board system.

Paper cards, media frames, and polaroid elements help present the
project documentation as physical design artifacts rather than
a traditional webpage.
*/
.tech4ease-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;
}

.tech4ease-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;
}

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

  background: transparent;

  transform: none;
}

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

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

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

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

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

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


/* Restrained Hover Movement */

.tech4ease-board .board-paper:hover,
.tech4ease-board .board-media:hover,
.tech4ease-board .board-polaroid:hover,
.tech4ease-board .board-sticky:hover {
  z-index: 10;

  transform: translateY(-.2rem);
}


/* Overview + 3D Model  */
/*
The overview is placed beside the 3D model because the concept and
the physical frm need to be understood together.

Showing the explanation beside the prototype allows users to connect
the design idea with the object that was created.
*/
.tech4ease-overview-note {
  grid-column: 1 / 6;
  grid-row: 2;

  width: 100%;
  align-self: start;

  transform: none;
}

.tech4ease-3d-model {
  grid-column: 6 / 13;
  grid-row: 2;

  width: 100%;
  align-self: start;

  margin: 0;

  text-align: center;

  transform: none;
}

.tech4ease-3d-model img {
  display: block;

  width: 100%;
  max-width: 30rem;
  max-height: 30rem;

  margin-inline: auto;

  object-fit: contain;

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


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

I included my role alongside the physical outcome to make my design
decisions and responsibilities clear within the collaborative
project.
*/
.tech4ease-physical-polaroid {
  grid-column: 1 / 5;
  grid-row: 3;

  width: 100%;
  align-self: start;

  transform: rotate(-1.2deg);
}

.tech4ease-role-note {
  grid-column: 5 / 13;
  grid-row: 3;

  width: 100%;
  align-self: start;

  transform: none;
}

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


/* Components */
/*
The component sections highlight the individual parts that make up
the final prototype.

Breaking the object into smaller elements helps communicate the
design thinking behind how the solution was constructed.
*/
.tech4ease-components-one {
  grid-column: 1 / 7;
  grid-row: 4;

  width: 100%;
  align-self: start;

  transform: none;
}

.tech4ease-components-two {
  grid-column: 7 / 13;
  grid-row: 4;

  width: 100%;
  align-self: start;

  transform: none;
}


/* Inside View + Process  */
/*
The process section shows the transition from idea to construction.

The inside view and process documentation were separated because
understanding how the object was built is an important part of the
design story.
*/
.tech4ease-inside-polaroid {
  grid-column: 1 / 5;
  grid-row: 5;

  width: 100%;
  align-self: start;

  transform: rotate(-1deg);
}

.tech4ease-process-note {
  grid-column: 5 / 13;
  grid-row: 5;

  width: 100%;
  align-self: start;

  transform: none;
}


/* Fabrication + Worn Prototype */
/*
This section demonstrates the relationship between making and
testing.

Showing fabrication details alongside the worn prototype helps
communicate how the design moved from a concept into something
usable.
*/
.tech4ease-fabrication-note {
  grid-column: 1 / 9;
  grid-row: 6;

  width: 100%;
  align-self: start;

  transform: none;
}

.tech4ease-worn-polaroid {
  grid-column: 9 / 13;
  grid-row: 6;

  width: 100%;
  align-self: start;

  transform: rotate(1.2deg);
}


/* Challenge + Reflection  */
/*
The challenge and reflection sections focus on learning from the
design process.

After presenting the prototype development, these sections explain
the problems encountered and how the project influenced my approach
as a designer.
*/
.tech4ease-challenges-note {
  grid-column: 1 / 5;
  grid-row: 7;

  position: relative;

  width: 100%;
  height: fit-content;
  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(1deg);
}

.tech4ease-reflection-note {
  grid-column: 5 / 13;
  grid-row: 7;

  width: 100%;
  height: fit-content;
  align-self: start;

  transform: none;
}


/* Team + Tools  */
/*
The team and tools sections provide context around collaboration
and implementation.

They show the combination of creative decisions, technical tools,
and teamwork required to complete the project.
*/
.tech4ease-team-polaroid {
  grid-column: 1 / 5;
  grid-row: 8;

  width: 100%;
  align-self: start;

  transform: rotate(-1deg);
}

.tech4ease-tools-note {
  grid-column: 5 / 13;
  grid-row: 8;

  width: 100%;
  height: fit-content;
  align-self: start;

  transform: none;
}


/* Credits  */
.tech4ease-credits-note {
  grid-column: 3 / 11;
  grid-row: 9;

  width: 100%;
  align-self: start;

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

  text-align: center;

  transform: none;
}


/* Tool Tags  */
/*
Tool tags provide a quick visual summary of the technologies and
methods involved in the project.

I used tags instead of a long list to keep the information easy to
scan while maintaining the visual style of the board.
*/
.tech4ease-tool-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: .6rem;

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

.tech4ease-tool-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .55rem .75rem;

  background: rgba(36, 36, 36, .045);
  border: .06rem solid var(--border-light);
  border-radius: 999rem;

  font-family: var(--font-main);
  font-size: clamp(.62rem, .8vw, .72rem);
  font-weight: 700;
  line-height: 1.2;

  color: var(--text);
}


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

  align-items: start;

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

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

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

  text-align: center;
}

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

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

  margin-inline: auto;

  object-fit: contain;
}

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

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


/* Polaroid Images */

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

  width: 100%;
  height: auto;

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


/* Restrained Decorations  */
.tech4ease-board .tech4ease-components-one .board-pin,
.tech4ease-board .tech4ease-components-two .board-pin,
.tech4ease-board .tech4ease-3d-model .board-pin {
  display: none;
}

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

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

  opacity: .72;

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

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

  opacity: .65;

  transform: rotate(4deg);
}


/* Left Preview Artwork  */
/*
The preview artwork reuses the project representation from the
gallery.
Keeping the same visual language between the gallery and design
board creates a smoother transition from exploration into the
case study.
*/
.design-board-preview-art .tech4ease-exhibit {
  width: min(86%, 23rem);
  height: auto;
  aspect-ratio: 1 / 1.15;

  margin-inline: auto;

  transform: none !important;
}

.design-board-preview-art .tech4ease-exhibit .project-media {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.design-board-preview-art .tech4ease-exhibit:hover .project-media,
.design-board-preview-art .tech4ease-exhibit:focus-visible .project-media {
  transform: none !important;
}

/*
Responsive Behaviour

The desktop layout presents the prototype documentation as a
physical workspace with multiple elements visible together.

On smaller screens, the layout becomes a vertical story that
prioritizes readability while keeping the design process intact.
*/
@media (max-width: 75rem) {

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

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

  .tech4ease-3d-model {
    grid-column: 7 / 13;
  }

  .tech4ease-physical-polaroid {
    grid-column: 1 / 6;
  }

  .tech4ease-role-note {
    grid-column: 6 / 13;
  }

  .tech4ease-components-one {
    grid-column: 1 / 7;
  }

  .tech4ease-components-two {
    grid-column: 7 / 13;
  }

  .tech4ease-fabrication-note {
    grid-column: 1 / 8;
  }

  .tech4ease-worn-polaroid {
    grid-column: 8 / 13;
  }
}


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

  .tech4ease-board {
    display: flex;
    flex-direction: column;

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

    width: 100%;

    padding:
      5rem 0 4rem;
  }

  .tech4ease-board>*,
  .tech4ease-board .board-paper,
  .tech4ease-board .board-sticky,
  .tech4ease-board .board-media,
  .tech4ease-board .board-polaroid {
    position: relative;
    inset: auto;

    width: 100%;
    max-width: 100%;

    margin: 0;

    transform: none;
  }

  .tech4ease-heading {
    order: 1;

    padding-top: 0;
  }

  .tech4ease-certificate {
    order: 2;

    align-self: flex-end;

    width: clamp(6rem, 20vw, 8rem);

    margin:
      -2.5rem 1rem 0 0;

    transform: rotate(2deg);
  }

  .tech4ease-overview-note {
    order: 3;
  }

  .tech4ease-3d-model {
    order: 4;
  }

  .tech4ease-physical-polaroid {
    order: 5;

    transform: rotate(-1deg);
  }

  .tech4ease-role-note {
    order: 6;
  }

  .tech4ease-components-one {
    order: 7;
  }

  .tech4ease-components-two {
    order: 8;
  }

  .tech4ease-inside-polaroid {
    order: 9;

    transform: rotate(-.8deg);
  }

  .tech4ease-process-note {
    order: 10;
  }

  .tech4ease-fabrication-note {
    order: 11;
  }

  .tech4ease-worn-polaroid {
    order: 12;

    transform: rotate(.8deg);
  }

  .tech4ease-challenges-note {
    order: 13;

    width: min(92%, 32rem);
    align-self: center;

    transform: rotate(1deg);
  }

  .tech4ease-reflection-note {
    order: 14;
  }

  .tech4ease-team-polaroid {
    order: 15;

    transform: rotate(-.8deg);
  }

  .tech4ease-tools-note {
    order: 16;
  }

  .tech4ease-credits-note {
    order: 17;
  }

  .tech4ease-board .board-paper:hover,
  .tech4ease-board .board-media:hover,
  .tech4ease-board .board-polaroid:hover,
  .tech4ease-board .board-sticky:hover {
    transform: translateY(-.15rem);
  }
}


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

  .tech4ease-board {
    gap: 1.75rem;

    padding-top: 4.5rem;
  }

  .tech4ease-heading h2 {
    font-size: clamp(3.2rem, 18vw, 4.5rem);
  }

  .tech4ease-heading .board-subtitle {
    font-size: 1rem;
  }

  .tech4ease-board .board-paper,
  .tech4ease-board .board-sticky {
    padding: 1.2rem;
  }

  .tech4ease-board .board-tool-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 1rem;
  }

  .tech4ease-tool-tags {
    gap: .5rem;
  }

  .tech4ease-tool-tags span {
    padding: .5rem .65rem;
  }

  .tech4ease-certificate {
    margin-top: -1.5rem;
  }
}