/* ============================================================
       HUFFLEPUFF HOUSE PAGE STYLES
       ============================================================
       Colors: Yellow (#ecb939) and Black (#000000)
       Theme: Loyalty, hard work, and dedication
       ========================================================== */

    /* Header banner - Hufflepuff colors */
    .house-header {
      background: linear-gradient(135deg, #ecb939, #000000); /* Yellow to black gradient */
      color: white;                                /* White text */
      padding: 60px 20px;                          /* Generous padding */
      text-align: center;                          /* Center all content */
    }
    
    /* Main content area wrapper */
    .house-content {
      max-width: 1200px;                           /* Limit width for readability */
      margin: 0 auto;                              /* Center on page */
      padding: 40px 20px;                          /* Internal padding */
    }
    
    /* Individual content sections (History, Faculty, Students, etc.) */
    .house-section {
      background: white;                           /* White background */
      padding: 30px;                               /* Internal padding */
      margin: 20px 0;                              /* Space between sections */
      border-radius: 10px;                         /* Rounded corners */
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);      /* Subtle shadow */
      border-left: 5px solid #ecb939;              /* Yellow accent border on left */
    }
    
    /* Section headings (e.g., "History", "Famous Students") */
    .house-section h2 {
      color: #000000;                              /* Black text */
      border-bottom: 2px solid #ecb939;            /* Yellow underline */
      padding-bottom: 10px;                        /* Space before underline */
      margin-bottom: 20px;                         /* Space below heading */
    }
    
    /* Grid layouts for faculty members and students */
    .faculty-list, .students-list {
      display: grid;                               /* Use CSS grid */
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Auto columns, min 250px */
      gap: 20px;                                   /* Space between cards */
      margin-top: 20px;                            /* Space above grid */
    }
    
    /* Individual person cards (faculty or student) */
    .person-card {
      background: #f9f9f9;                         /* Light gray background */
      padding: 15px;                               /* Internal padding */
      border-radius: 8px;                          /* Rounded corners */
      border: 2px solid #ecb939;                   /* Yellow border */
    }
    
    /* Person name (e.g., "Newt Scamander", "Cedric Diggory") */
    .person-card h3 {
      color: #000000;                              /* Black text */
      margin: 0 0 10px 0;                          /* Bottom margin only */
    }
    
    /* House traits box (Loyalty, Hard Work, etc.) */
    .traits {
      background: #ecb939;                         /* Yellow background */
      color: #000000;                              /* Black text (for contrast) */
      padding: 20px;                               /* Internal padding */
      border-radius: 8px;                          /* Rounded corners */
      margin: 20px 0;                              /* Space above and below */
    }
    
    /* List of traits */
    .traits ul {
      list-style: none;                            /* Remove bullets */
      padding: 0;                                  /* Remove padding */
    }
    
    /* Individual trait items */
    .traits li {
      padding: 5px 0;                              /* Vertical padding */
      padding-left: 20px;                          /* Space for icon */
      position: relative;                          /* For icon positioning */
    }
    
    /* Badger emoji before each trait */
    .traits li:before {
      content: "🦡";                                /* Badger emoji */
      position: absolute;                          /* Position it */
      left: 0;                                     /* Align to left */
    }

    /* ============================================================
       RELOCATED INLINE STYLES
       ============================================================
       These were previously inline in hufflepuff.html
       Moved here for better organization
       ========================================================== */
    
    /* House crest image in header */
    .house-header img[alt="Hufflepuff Crest"] {
      height: 150px;                               /* Fixed height */
      margin-bottom: 20px;                         /* Space below */
    }

    /* House motto/quote in header */
    .house-header p {
      font-size: 1.2em;                            /* Larger text */
      margin-top: 10px;                            /* Space above */
    }

    /* Founder image (Helga Hufflepuff) - floats to right of text */
    .house-section img[alt*="Helga"] {
      float: right;                                /* Float right */
      width: 200px;                                /* Fixed width */
      margin: 0 0 15px 15px;                       /* Margins: none top, 15px right/bottom/left */
      border-radius: 8px;                          /* Rounded corners */
    }

    /* All person card images - negative margins to extend beyond padding */
    .person-card img {
      margin: -15px -15px 15px -15px;              /* Extend to edges, space at bottom */
    }

    /* Full-width images with top border-radius for specific student cards */
    .person-card img[src*="hannah.png"],
    .person-card img[src*="Erniest.png"],
    .person-card img[src*="Teddy.png"],
    .person-card img[src*="Artemisia_Lufkin.png"],
    .person-card img[src*="Bridget_Wenlock.png"],
    .person-card img[src*="Grogan_Stump.png"] {
      width: 100%;                                 /* Full width of card */
      border-radius: 8px 8px 0 0;                  /* Round top corners only */
      margin: -15px -15px 15px -15px;              /* Extend to edges */
    }