/**
 * GCB Official Brand Patterns
 * Accurate recreation from GCB Brand Manual
 * 
 * Large angular prismatic rays radiating from bottom left corner
 * Creating depth, energy, and sophisticated corporate appeal
 */

/* ========================================
   OFFICIAL GCB PRISMATIC PATTERN - DARK
======================================== */

.gcb-pattern-official-dark {
    position: relative;
    background: #3C4449; /* Base dark grey from the pattern */
    overflow: hidden;
}

.gcb-pattern-official-dark::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='ray1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%232B3136;stop-opacity:0.9' /%3E%3Cstop offset='100%25' style='stop-color:%234A545B;stop-opacity:0.3' /%3E%3C/linearGradient%3E%3ClinearGradient id='ray2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23353C41;stop-opacity:0.8' /%3E%3Cstop offset='100%25' style='stop-color:%23525C64;stop-opacity:0.2' /%3E%3C/linearGradient%3E%3ClinearGradient id='ray3' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%233F474D;stop-opacity:0.7' /%3E%3Cstop offset='100%25' style='stop-color:%235A656E;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Large angular rays from bottom left --%3E%3Cpolygon points='0,900 0,400 600,0 400,0' fill='url(%23ray1)'/%3E%3Cpolygon points='0,900 0,600 400,0 200,0' fill='%23323940' opacity='0.8'/%3E%3Cpolygon points='0,900 400,900 900,0 600,0' fill='url(%23ray2)'/%3E%3Cpolygon points='0,900 600,900 1200,200 900,0' fill='%23434B52' opacity='0.6'/%3E%3Cpolygon points='0,900 800,900 1400,400 1200,200' fill='url(%23ray3)'/%3E%3Cpolygon points='600,900 1000,900 1600,500 1400,400' fill='%234A545B' opacity='0.5'/%3E%3Cpolygon points='1000,900 1600,900 1600,500' fill='%23525C64' opacity='0.4'/%3E%3C/svg%3E");
    background-size: cover !important;
    background-position: bottom left;
    z-index: -1;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ========================================
   OFFICIAL GCB PRISMATIC PATTERN - AMBER
======================================== */

.gcb-pattern-official-amber {
    position: relative;
    background: linear-gradient(135deg, #E5A220 0%, #FDB813 50%, #FFCA45 100%);
    overflow: hidden;
}

.gcb-pattern-official-amber::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='amberRay1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23D17F00;stop-opacity:0.7' /%3E%3Cstop offset='100%25' style='stop-color:%23FFE08A;stop-opacity:0.2' /%3E%3C/linearGradient%3E%3ClinearGradient id='amberRay2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23E89005;stop-opacity:0.6' /%3E%3Cstop offset='100%25' style='stop-color:%23FFC52A;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,900 0,400 600,0 400,0' fill='url(%23amberRay1)'/%3E%3Cpolygon points='0,900 0,600 400,0 200,0' fill='%23E89005' opacity='0.5'/%3E%3Cpolygon points='0,900 400,900 900,0 600,0' fill='url(%23amberRay2)'/%3E%3Cpolygon points='0,900 600,900 1200,200 900,0' fill='%23F5A623' opacity='0.4'/%3E%3Cpolygon points='0,900 800,900 1400,400 1200,200' fill='%23FDB813' opacity='0.3'/%3E%3Cpolygon points='600,900 1000,900 1600,500 1400,400' fill='%23FFC52A' opacity='0.3'/%3E%3Cpolygon points='1000,900 1600,900 1600,500' fill='%23FFE08A' opacity='0.2'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom left;
}

/* ========================================
   OFFICIAL GCB PRISMATIC PATTERN - BLACK
======================================== */

.gcb-pattern-official-black {
    position: relative;
    background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #2C2C2C 100%);
    overflow: hidden;
}

.gcb-pattern-official-black::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='blackRay1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23000000;stop-opacity:0.8' /%3E%3Cstop offset='100%25' style='stop-color:%23333333;stop-opacity:0.2' /%3E%3C/linearGradient%3E%3ClinearGradient id='blackRay2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%231A1A1A;stop-opacity:0.7' /%3E%3Cstop offset='100%25' style='stop-color:%23444444;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,900 0,400 600,0 400,0' fill='url(%23blackRay1)'/%3E%3Cpolygon points='0,900 0,600 400,0 200,0' fill='%231A1A1A' opacity='0.6'/%3E%3Cpolygon points='0,900 400,900 900,0 600,0' fill='url(%23blackRay2)'/%3E%3Cpolygon points='0,900 600,900 1200,200 900,0' fill='%23222222' opacity='0.5'/%3E%3Cpolygon points='0,900 800,900 1400,400 1200,200' fill='%232C2C2C' opacity='0.4'/%3E%3Cpolygon points='600,900 1000,900 1600,500 1400,400' fill='%23333333' opacity='0.3'/%3E%3Cpolygon points='1000,900 1600,900 1600,500' fill='%23444444' opacity='0.2'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom left;
    z-index: -1;
}

/* ========================================
   OFFICIAL GCB PRISMATIC PATTERN - PEBBLE
======================================== */

.gcb-pattern-official-pebble {
    position: relative;
    background: linear-gradient(135deg, #B0B0B0 0%, #C5C5C5 50%, #DADADA 100%);
    overflow: hidden;
}

.gcb-pattern-official-pebble::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='pebbleRay1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%239A9A9A;stop-opacity:0.6' /%3E%3Cstop offset='100%25' style='stop-color:%23E0E0E0;stop-opacity:0.2' /%3E%3C/linearGradient%3E%3ClinearGradient id='pebbleRay2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23B0B0B0;stop-opacity:0.5' /%3E%3Cstop offset='100%25' style='stop-color:%23ECECEC;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,900 0,400 600,0 400,0' fill='url(%23pebbleRay1)'/%3E%3Cpolygon points='0,900 0,600 400,0 200,0' fill='%23B0B0B0' opacity='0.5'/%3E%3Cpolygon points='0,900 400,900 900,0 600,0' fill='url(%23pebbleRay2)'/%3E%3Cpolygon points='0,900 600,900 1200,200 900,0' fill='%23C5C5C5' opacity='0.4'/%3E%3Cpolygon points='0,900 800,900 1400,400 1200,200' fill='%23D0D0D0' opacity='0.35'/%3E%3Cpolygon points='600,900 1000,900 1600,500 1400,400' fill='%23DADADA' opacity='0.3'/%3E%3Cpolygon points='1000,900 1600,900 1600,500' fill='%23E5E5E5' opacity='0.25'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom left;
}

/* ========================================
   UTILITY CLASSES
======================================== */

/* Ensure content is above patterns */
[class*="gcb-pattern-official"] > * {
    position: relative;
    z-index: 1;
}

/* Text contrast for dark backgrounds */
.gcb-pattern-official-dark,
.gcb-pattern-official-black {
    color: white;
}

.gcb-pattern-official-dark h1,
.gcb-pattern-official-dark h2,
.gcb-pattern-official-dark h3,
.gcb-pattern-official-dark h4,
.gcb-pattern-official-dark h5,
.gcb-pattern-official-dark h6,
.gcb-pattern-official-dark p,
.gcb-pattern-official-black h1,
.gcb-pattern-official-black h2,
.gcb-pattern-official-black h3,
.gcb-pattern-official-black h4,
.gcb-pattern-official-black h5,
.gcb-pattern-official-black h6,
.gcb-pattern-official-black p {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Text contrast for light patterns */
.gcb-pattern-official-amber,
.gcb-pattern-official-pebble {
    color: var(--gcb-black, #1A1A1A);
}

.gcb-pattern-official-amber h1,
.gcb-pattern-official-amber h2,
.gcb-pattern-official-amber h3,
.gcb-pattern-official-amber h4,
.gcb-pattern-official-amber h5,
.gcb-pattern-official-amber h6,
.gcb-pattern-official-pebble h1,
.gcb-pattern-official-pebble h2,
.gcb-pattern-official-pebble h3,
.gcb-pattern-official-pebble h4,
.gcb-pattern-official-pebble h5,
.gcb-pattern-official-pebble h6 {
    color: var(--gcb-black, #1A1A1A);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Content overlays for better readability */
.official-pattern-overlay {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.official-pattern-overlay-dark {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [class*="gcb-pattern-official"]::before {
        background-size: 150% auto;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .official-pattern-overlay {
        background: rgba(255, 255, 255, 0.98);
    }
    
    .official-pattern-overlay-dark {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    [class*="gcb-pattern-official"] {
        animation: none !important;
        transition: none !important;
    }
}