/*
This file controls the custom layout of the Arab Student Association
design board.
The shared design board system creates the overall portfolio
structure, but each project has its own layout based on how the
story needs to be presented.
For ASA, I focused on presenting branding and social media work
as a visual identity system, so the layout gives each design piece
its own space while keeping the overall board organized.
*/


/* Main Board */
/*
The board uses a 12-column grid to create a flexible exhibition
layout.
Instead of stacking project information like a normal case study,
I arranged elements spatially to recreate the feeling of a design
workspace where posters, branding assets, and documentation are
placed together.
*/
.asa-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 project board relied on more fixed positioning.
I changed the structure into a responsive grid because the original
layout was difficult to adapt across different screen sizes.
The new approach keeps the freedom of a physical design board while
allowing the content to rearrange naturally on smaller screens.
*/
.asa-board>* {
  position: relative;
  inset: auto;

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

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


/* Typography  */
/*
The typography follows the main portfolio design system while being
adapted for this project board.
I kept the handwritten style because it connects the digital
portfolio with the feeling of sketches, posters, and creative
documentation.
*/
.asa-board h2,
.asa-board h3,
.asa-board p,
.asa-board ul,
.asa-board figure {
  margin-top: 0;
}

.asa-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);
}

.asa-board p,
.asa-board li,
.asa-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 project before showing individual design
artifacts.
I used a large title and short description to immediately explain
the project's purpose and establish context before users explore
the visual work.
*/
.asa-heading {
  grid-column: 1 / 11;

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

  z-index: 5;
}

.asa-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);
}

.asa-heading h2 {
  margin: 0;

  font-family: var(--font-elegant);
  font-size: clamp(3.2rem, 6vw, 6rem);
  font-weight: 500;
  line-height: .88;

  color: var(--text);
}

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

  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);
}


/* Shared ASA Surfaces */
/*
These reusable surfaces create the physical design board feeling.
Paper cards, media frames, and polaroid styles allow digital
content to feel like collected design materials placed in a
creative workspace.
*/
.asa-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;
}

.asa-board .board-media {
  width: 100%;
  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;
}

.asa-board .board-polaroid {
  width: 100%;
  margin: 0;

  background: transparent;

  transform: none;
}

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

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

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

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

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

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


/* Restrained Hover Movement  */
/*
Small hover movement was added to make the board feel interactive.
The movement is intentionally subtle so the focus remains on the
design work instead of distracting animations.
*/
.asa-board .board-paper:hover,
.asa-board .board-media:hover,
.asa-board .board-polaroid:hover,
.asa-board .board-sticky:hover {
  z-index: 10;

  transform: translateY(-.2rem);
}


/* Overview + Logo Sequence  */
/*
The overview and logo sequence are placed together because they
introduce the two main parts of the project: the organization's
identity and the visual branding system created for it.
This arrangement helps users understand the project context before
exploring individual designs.
*/
.asa-overview {
  grid-column: 1 / 7;
  grid-row: 2;

  width: 100%;
  align-self: start;

  transform: none;
}

.asa-logo-sequence {
  grid-column: 7 / 13;
  grid-row: 2;

  width: 100%;
  align-self: start;

  transform: rotate(1deg);
}


/* Social Posts */
/*
The social media designs are separated into individual sections
because each post represents a different communication goal while
still belonging to the same visual identity.
The layout allows each design piece to be viewed as its own artifact.
*/
.asa-boardgame {
  grid-column: 1 / 5;
  grid-row: 3;

  width: 100%;
  align-self: start;

  transform: rotate(-1.2deg);
}

.asa-shawarma-one {
  grid-column: 5 / 9;
  grid-row: 3;

  width: 100%;
  align-self: start;

  transform: none;
}

.asa-shawarma-two {
  grid-column: 9 / 13;
  grid-row: 3;

  width: 100%;
  align-self: start;

  transform: rotate(1deg);
}


/* Mixer + Ramadan */
.asa-mixer {
  grid-column: 1 / 7;
  grid-row: 4;

  width: 100%;
  align-self: start;

  transform: none;
}

.asa-ramadan {
  grid-column: 7 / 13;
  grid-row: 4;

  width: 100%;
  align-self: start;

  transform: rotate(1deg);
}


/* Event Photos  */
/*
Event photos provide context around the branding work.
Including these visuals connects the digital designs to the real
events and shows how the identity system was applied beyond
individual graphics.
*/
.asa-event-photo {
  grid-column: 1 / 5;
  grid-row: 5;

  width: 100%;
  align-self: start;

  transform: rotate(-1deg);
}

.asa-team-photo {
  grid-column: 5 / 9;
  grid-row: 5;

  width: 100%;
  align-self: start;

  margin-top: clamp(1rem, 3vw, 2rem);

  transform: rotate(.8deg);
}

.asa-bonfire {
  grid-column: 9 / 13;
  grid-row: 5;

  width: 100%;
  align-self: start;

  transform: rotate(-.8deg);
}


/* Reflection + Tools  */
/*
Reflection and tools are placed after the visual documentation to
move the viewer from seeing the final outcomes into understanding
the process behind them.
This structure follows the storytelling approach used throughout
the portfolio: outcome first, then process and learning.
*/
.asa-reflection {
  grid-column: 1 / 8;
  grid-row: 6;

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

  transform: none;
}

.asa-tools {
  grid-column: 8 / 13;
  grid-row: 6;

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

  transform: none;
}


/* Credits  */
/*
The credits section acknowledges collaboration while keeping my
specific contribution clear.
For team projects, I wanted the portfolio to communicate my role
and design decisions rather than only showing the final result.
*/
.asa-credit {
  grid-column: 3 / 11;
  grid-row: 7;

  width: 100%;
  align-self: start;

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

  text-align: center;

  transform: none;
}


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

  align-items: start;

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

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

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

  text-align: center;
}

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

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

  margin-inline: auto;

  object-fit: contain;
}

.asa-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  */
.asa-board .board-polaroid img {
  display: block;

  width: 100%;
  height: auto;

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


/* Restrained Decorations  */
.asa-board .asa-logo-sequence .board-pin,
.asa-board .asa-mixer .board-pin,
.asa-board .asa-shawarma-one .board-pin,
.asa-board .asa-shawarma-two .board-pin {
  display: none;
}

.asa-board .asa-overview .board-tape {
  display: block;

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

  opacity: .72;

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

.asa-board .asa-reflection .board-pin {
  display: none;
}


/* Left Preview Artwork  */
/*
The preview artwork reuses the gallery visual inside the design
board.

I kept the same project image between the gallery and case study
so the transition feels continuous instead of introducing a
different representation of the project.
*/
.design-board-preview-art .asa-exhibit {
  width: min(88%, 24rem);
  height: auto;
  aspect-ratio: 1 / 1;

  margin-inline: auto;

  transform: none !important;
}

.design-board-preview-art .asa-artwork {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}

.design-board-preview-art .asa-artwork .project-media,
.design-board-preview-art .asa-exhibit .project-media {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.design-board-preview-art .asa-exhibit:hover .asa-artwork,
.design-board-preview-art .asa-exhibit:focus-visible .asa-artwork {
  transform: none !important;
}


/* Medium Screens */
/*
Responsive behaviour changes the exhibition layout into a vertical
storytelling format.

On desktop, the project feels like a physical board with multiple
elements visible together. On smaller screens, the priority becomes
clear reading and easy navigation.
*/
@media (max-width: 75rem) {

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

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

  .asa-logo-sequence {
    grid-column: 7 / 13;
  }

  .asa-boardgame {
    grid-column: 1 / 5;
  }

  .asa-shawarma-one {
    grid-column: 5 / 9;
  }

  .asa-shawarma-two {
    grid-column: 9 / 13;
  }

  .asa-reflection {
    grid-column: 1 / 8;
  }

  .asa-tools {
    grid-column: 8 / 13;
  }
}

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

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

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

    width: 100%;

    padding:
      5rem 0 4rem;
  }

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

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

    margin: 0;

    transform: none;
  }

  .asa-heading {
    order: 1;

    padding-top: 0;
  }

  .asa-overview {
    order: 2;
  }

  .asa-logo-sequence {
    order: 3;

    transform: rotate(.6deg);
  }

  .asa-boardgame {
    order: 4;

    transform: rotate(-.8deg);
  }

  .asa-shawarma-one {
    order: 5;
  }

  .asa-shawarma-two {
    order: 6;

    transform: rotate(.7deg);
  }

  .asa-mixer {
    order: 7;
  }

  .asa-ramadan {
    order: 8;

    transform: rotate(.7deg);
  }

  .asa-event-photo {
    order: 9;

    transform: rotate(-.6deg);
  }

  .asa-team-photo {
    order: 10;

    transform: rotate(.6deg);
  }

  .asa-bonfire {
    order: 11;

    transform: rotate(-.6deg);
  }

  .asa-reflection {
    order: 12;
  }

  .asa-tools {
    order: 13;
  }

  .asa-credit {
    order: 14;
  }

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

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

  .asa-board {
    gap: 1.75rem;

    padding-top: 4.5rem;
  }

  .asa-heading h2 {
    font-size: clamp(2.8rem, 15vw, 4.2rem);
  }

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

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

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

    gap: 1rem;
  }
}