/* --- CONTAINER LAYOUT --- */
.notes-gallery {
    display: grid;
    /* Desktop: 4 columns for 8 items = 2 rows */
    grid-template-columns: repeat(4, 1fr);
    /* Negative gap creates the overlap effect */
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Ensure notes have relative positioning for stacking */
.note {
    position: relative;
    /* Base styling defaults */
    min-height: 250px; 
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Slight overlap logic */
    margin: -10px; 
    transition: transform 0.3s ease, z-index 0s;
}


/* --- OVERLAP & ROTATION RANDOMIZER --- */
/* We rotate them slightly to look like sticky notes */
.notes-gallery .note:nth-child(odd) {
    transform: rotate(-2deg);
}
.notes-gallery .note:nth-child(even) {
    transform: rotate(2deg);
    top: 15px; /* Push even notes down slightly for staggered look */
}
.notes-gallery .note:nth-child(3n) {
    transform: rotate(1.5deg);
}

/* --- MOBILE LAYOUT --- */
@media (max-width: 767px) {
    .notes-gallery {
        /* Mobile: 2 columns = 4 notes per visible 'block' (2 rows) */
        grid-template-columns: repeat(2, 1fr);
        margin: 0;
    }
    
    /* Reset margins for mobile so they don't overlap too much */
    .note {
        margin: -5px;
        min-height: 200px;
    }
}

/* --- YOUR PROVIDED NOTE STYLES --- */
/* (Add the specific styling for colors, backgrounds, tape, fonts here) */
/* Examples to make the layout visible while you add your specific designs: */

.note__content p {
    margin: 0;
    font-family: 'LaBelleAurore';
    font-size: 20px;
    line-height: 33px;
}

/* SVGs inside tape need to scale */
.note__tape svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure layers don't block text selection if they are decorative */
.note__layer, .note__tape {
    pointer-events: none;
    position: absolute;
}


/* --- Layout Container --- */
.notes-gallery {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center in viewport */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 0px; /* Space between notes */
    padding: 50px;
    min-height: 100vh;
}

/* --- Base Note Class --- */
.note {
    position: relative;
    box-sizing: border-box;
    /* Default shadow, can be overridden */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* =========================================
   NOTE 1: Navy Note
   ========================================= */
.note--navy {
    width: 250px; 
    height: 250px;
    z-index: 1;
	color: white;
}

/* The Tape (using pseudo-element) */
.note--navy::before {
    content: '';
    position: absolute;
    width: 144px;
    height: 47px;
    top: -15px; 
    left: 55px; 
    background-color: #7EC6DC;
    opacity: 0.8;
    z-index: 2;
    clip-path: path('M0.464708 16.1255C1.01285 20.9187 1.48703 25.7275 1.87536 30.5506C2.29158 35.7621 2.61009 40.9865 2.92859 46.2109L143.183 35.8814C142.393 30.8921 141.91 25.8416 141.801 20.7855C141.753 18.6735 141.758 16.5194 141.046 14.5363C140.774 13.7589 140.378 13.0036 140.401 12.1756C140.412 11.5509 140.66 10.9533 140.778 10.3409C140.945 9.4089 140.788 8.46414 140.641 7.53261C140.488 5.39655 139.024 2.19621 139.503 -0.000126762L0.000231897 10.2826C0.378888 12.1314 0.292752 14.4688 0.488484 16.1282L0.464708 16.1255Z');
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

/* The Paper Background (using pseudo-element) */
.note--navy::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #004563;
    -webkit-mask-image: radial-gradient(circle at 20px, transparent 6px, black 7px);
    mask-image: radial-gradient(circle at 20px, transparent 6px, black 7px);
    -webkit-mask-size: 100% 35px; 
    mask-size: 100% 35px;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    z-index: 0;
}

.note--navy .note__content {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 20px;
    color: white;
    line-height: 1.5;
}

/* =========================================
   NOTE 2: Sketch Note (Updated)
   ========================================= */
.note--sketch {
    width: 425px; /* Restored to original width for the SVG to fit well */
    height: 396px;
    filter: none;
}

/* 1. The Main Paper Sheet */
.note--sketch .note__layer--paper {
    position: absolute;
    inset: 0;
    background-color: #DCD6D0;
    /* Original complex clip-path */
    clip-path: polygon(357.4px 34.1px, 32.8px 55.8px, 54.4px 380.4px, 379px 358.8px);
    z-index: 1;
}

/* 2. The Green Lines Mask */
.note--sketch .note__layer--lines-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Masks the lines to specific area of the paper */
    clip-path: polygon(54.3px 119.3px, 344.5px 100.2px, 359.7px 328.1px, 69.5px 347.2px);
    overflow: hidden; 
}

/* The SVG Pattern */
.note--sketch .note__lines-pattern {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    
    /* Using the provided SVG as a background image */
    background-image: url("data:image/svg+xml,%3Csvg width='291' height='20' viewBox='0 0 291 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.27998e-05 19.3542L0.0185547 19.6313L290.241 0.277142L290.222 3.70773e-05L7.27998e-05 19.3542Z' fill='%23517D64'/%3E%3C/svg%3E");
    
    background-repeat: repeat-y;
    /* Width: 100% to stretch across. Height: 30px sets the line spacing */
    background-size: 100% 30px; 
    
    /* NOTE: We do NOT rotate this container because the SVG lines 
       are already drawn at a diagonal angle */
}

/* 3. Content Positioning */
.note--sketch .note__content {
    position: absolute;
    z-index: 3;
    top: 115px;
    left: 65px;
    width: 280px;
    
    /* Rotate TEXT to match the angle of the SVG lines */
    transform: rotate(-3.76deg);
    transform-origin: top left;
    
    color: #333;
}

.note--sketch .note__content p {
    margin: 0;
    /* Fine-tune padding to push text to sit exactly on the green line */
    padding-top: 5px; 
}

/* 4. Tape Corners */
.note--sketch .note__tape {
    position: absolute;
    inset: 0;
    background-color: #F48A94;
    opacity: 0.8;
    z-index: 4;
}

.note--sketch .note__tape--top-left {
    clip-path: polygon(92.3px 40.2px, 82.9px 32.3px, 79.3px 28.7px, 6.5px 106.7px, 14.5px 113.6px, 31.4px 129.1px, 104px 51.4px);
}

.note--sketch .note__tape--top-right {
    clip-path: polygon(391.8px 53.6px, 393.4px 41.4px, 394.5px 36.5px, 289.6px 16.8px, 288.1px 27.2px, 284px 49.8px, 388.6px 69.4px);
}

/* =========================================
   NOTE 3: Blue Grid Note
   ========================================= */
.note--grid {
    width: 300px;
    aspect-ratio: 1 / 1;
    padding: 30px;
    background-color: #0689aa;
    background-image: 
        linear-gradient(#7EC6DC 1px, transparent 1px),
        linear-gradient(90deg, #7EC6DC 1px, transparent 1px);
    background-size: 15px 15px;
    color: white;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    filter: none; /* Uses box-shadow instead */
}

.note--grid .note__tape--center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -24px;
    width: 108px;
    height: 36px;
    z-index: 10;
}

.note--grid .note__content h3 {
    margin-top: 0;
    color: white;
}

/* =========================================
   NOTE 4: Lined Paper Note
   ========================================= */
.note--lined {
  transform: rotate(8deg);
    width: 300px;
    aspect-ratio: 1 / 1;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    color: black; 
    background-color: #D8C9B7;
    filter: none;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

/* Layer 1: Horizontal Blue Lines */
.note--lined .note__layer--blue-lines {
    position: absolute;
    inset: 0;
    /* We only keep the horizontal lines here */
    background-image: linear-gradient(transparent 19px, #7EC6DC 19px, #7EC6DC 20px);
    background-size: 100% 20px;
    z-index: 0;
}

/* Layer 2: Vertical Red Line 
   (Using a border on a DIV ensures smooth anti-aliasing on rotation) */
.note--lined .note__layer--red-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60px;
    width: 0px; /* Width is 0 because we use the border for the line */
    border-left: 1px solid #BE6B85;
    z-index: 1;
}

/* Tapes */
.note--lined .note__tape {
    position: absolute;
    top: -40px;
    z-index: 10;
}

.note--lined .note__tape--vertical-left {
    left: 10%; 
    width: 46px;
    height: 76px;
}

.note--lined .note__tape--vertical-right {
    right: 10%;
    width: 55px;
    height: 77px;
}

/* Content */
.note--lined .note__content {
    position: relative; /* Ensure it sits above the background layers */
    z-index: 2;
}

.note--lined .note__content h3 {
    margin-top: 0;
    color: black;
}

.note--lined .note__content p {
    margin: 0;
    line-height: 20px; 
}